/* NURION — приём проектов: секция с формой на лендинге + страница /project-intake.
   Живёт в дизайн-системе лендинга: те же токены (--bg/--ink/--red/--sc), прямые
   углы, красный акцент. Ширина колонок масштабируется через --sc, как .pr__grid. */

/* ---------------------------------------------------------------- форма ---- */
/* scroll-margin: при переходе по якорю #intake (из меню «Подать проект»)
   заголовок формы не должен уезжать под фикс-шапку (76px + воздух). */
.intake{background:var(--bg);padding:clamp(56px,7vw,96px) 0;scroll-margin-top:96px}
.intake__in{width:calc(1200px * var(--sc,1));max-width:100%;margin:0 auto;padding:0 calc(13px * var(--sc,1))}
.intake__head{max-width:860px;margin-bottom:clamp(32px,4vw,54px)}
.intake__head .badge{display:inline-flex;height:auto;padding:8px 14px;font-size:13px;letter-spacing:.04em;margin-bottom:22px}
.intake__head h2{margin-bottom:18px}
.intake__head p{max-width:720px}
.intake__grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,3.4vw,58px);align-items:start}

.intake__steps{list-style:none;counter-reset:st;margin:0 0 26px;padding:0}
.intake__steps li{position:relative;padding:17px 0 17px 44px;border-top:1px solid rgba(0,0,0,.12);font-size:15px;line-height:23px;color:#5f5f5f}
.intake__steps li:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.intake__steps li b{display:block;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:3px}
.intake__steps li::before{counter-increment:st;content:"0" counter(st);position:absolute;left:0;top:19px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--red)}
.intake__note{font-size:14px;line-height:22px;color:#6a6a6a;margin:0 0 20px}
.intake__more{display:inline-block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--red);padding-bottom:4px;transition:color .2s}
.intake__more:hover{color:var(--red)}

/* Форма инвертирована относительно страницы: тёмная карточка, поля — белые
   залитые прямоугольники. Смысл в аффордансе: подчёркивание на белом не читалось
   как «сюда можно кликнуть», особенно на мобильном. --red-lt — осветлённый
   бренд-красный: #e10000 на #121212 даёт ~3.4:1, для мелкого текста мало. */
.intake__form{--red-lt:#ff5a45;position:relative;background:var(--dark);padding:clamp(26px,3vw,46px)}
.if-grid{display:grid;grid-template-columns:1fr 1fr;gap:21px 26px}
.if-f{display:flex;flex-direction:column;min-width:0}
.if-f--wide{grid-column:1/-1}
.if-f label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:8px}
.if-f label .req{color:var(--red-lt)}
/* 16px — нижняя граница: на меньшем размере iOS зумит страницу при фокусе.
   min-height 48px — тач-таргет. */
.if-f input,.if-f select,.if-f textarea{font:inherit;font-size:16px;line-height:22px;color:var(--ink);background:#fff;border:1px solid transparent;border-radius:0;padding:12px 14px;min-height:48px;width:100%;transition:box-shadow .16s;-webkit-appearance:none;appearance:none}
.if-f input::placeholder,.if-f textarea::placeholder{color:#7a7a7a}
.if-f textarea{resize:vertical;min-height:132px}
.if-f select{padding-right:38px;background-repeat:no-repeat;background-position:right 14px center;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236a6a6a' stroke-width='1.6'/%3E%3C/svg%3E")}
.if-f input:focus,.if-f select:focus,.if-f textarea:focus{outline:none;box-shadow:0 0 0 2px var(--red)}
.if-f.is-bad input,.if-f.is-bad select,.if-f.is-bad textarea{box-shadow:0 0 0 2px var(--red)}
.if-err{display:none;font-size:12.5px;line-height:17px;color:var(--red-lt);margin-top:7px}
.if-f.is-bad .if-err{display:block}

/* Кастомный выпадающий список. Нативный <select> остаётся в DOM (он и уходит в
   FormData), но прячется, как только JS построил контрол поверх него — без JS
   пользователь видит обычный рабочий select. */
.if-sel{position:relative}
.if-sel__native{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;pointer-events:none}
.if-sel__btn{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;font:inherit;font-size:16px;line-height:22px;text-align:left;color:var(--ink);background:#fff;border:1px solid transparent;border-radius:0;padding:12px 14px;cursor:pointer;transition:box-shadow .16s}
.if-sel__btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--red)}
.if-sel.is-open .if-sel__btn{box-shadow:0 0 0 2px var(--red)}
.if-f.is-bad .if-sel__btn{box-shadow:0 0 0 2px var(--red)}
.if-sel__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.if-sel__val.is-placeholder{color:#7a7a7a}
.if-sel__chev{flex:0 0 12px;width:12px;height:8px;transition:transform .2s}
.if-sel__chev path{stroke:#6a6a6a;transition:stroke .2s}
.if-sel.is-open .if-sel__chev{transform:rotate(180deg)}
.if-sel.is-open .if-sel__chev path,.if-sel__btn:hover .if-sel__chev path{stroke:var(--red)}

.if-sel__panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);max-height:min(384px,60vh);overflow-y:auto;margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 18px 44px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s}
.if-sel--up .if-sel__panel{top:auto;bottom:calc(100% + 6px);transform:translateY(4px)}
.if-sel.is-open .if-sel__panel{opacity:1;visibility:visible;transform:none}
.if-sel__opt{position:relative;padding:11px 18px 11px 30px;font-size:15px;line-height:22px;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.if-sel__opt::before{content:"";position:absolute;left:14px;top:calc(50% - 4px);width:8px;height:8px;background:var(--red);opacity:0;transition:opacity .15s}
.if-sel__opt.is-active{background:#f4f4f4}
.if-sel__opt.is-on{font-weight:600}
.if-sel__opt.is-on::before{opacity:1}
.if-sel__opt--placeholder{color:#9a9a9a}
.if-sel__opt--placeholder.is-on{font-weight:400}
.if-sel__opt--placeholder.is-on::before{opacity:0}
@media(prefers-reduced-motion:reduce){.if-sel__panel,.if-sel__chev{transition:none}}

/* Зона файлов остаётся «дырой» в тёмной карточке, а не белым полем: она не поле
   ввода, и одинаковая с ними заливка сбивала бы с толку. Отличается пунктиром. */
.if-drop{grid-column:1/-1;border:1px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.04);padding:22px 20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.if-drop:hover,.if-drop.is-over,.if-drop:focus-visible{outline:none;border-color:var(--red);background:rgba(225,0,0,.14)}
.if-drop b{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:5px}
.if-drop span{display:block;font-size:12.5px;line-height:19px;color:rgba(255,255,255,.5)}
.if-drop input[type=file]{display:none}
.if-files{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px}
.if-files:empty{display:none}
.if-file{display:inline-flex;align-items:center;gap:10px;max-width:100%;background:rgba(255,255,255,.11);color:#fff;padding:10px 13px;font-size:13px;line-height:18px}
.if-file b{font-weight:500;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.if-file i{font-style:normal;color:rgba(255,255,255,.5)}
.if-file button{border:0;background:none;padding:0 1px;cursor:pointer;font:inherit;font-size:17px;line-height:1;color:rgba(255,255,255,.55);transition:color .2s}
.if-file button:hover{color:var(--red-lt)}

.if-consent{grid-column:1/-1;display:flex;gap:13px;align-items:flex-start;font-size:13px;line-height:20px;color:rgba(255,255,255,.68)}
/* Нативный чекбокс на тёмном фоне почти не виден (accent-color красит только
   отмеченное состояние), поэтому рисуем свой: белый квадрат → красный с галкой. */
.if-consent input{-webkit-appearance:none;appearance:none;flex:0 0 20px;width:20px;height:20px;margin:0;background:#fff;border:0;border-radius:0;cursor:pointer;transition:background .16s}
.if-consent input:checked{background:var(--red) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center no-repeat}
.if-consent input:focus-visible{outline:2px solid var(--red-lt);outline-offset:2px}
.if-consent a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.if-consent.is-bad{color:var(--red-lt)}
.if-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
/* Чёрная кнопка на тёмной карточке исчезла бы — красная, как CTA во всех тёмных
   секциях сайта (.pi--dark .pi-cta), с той же инверсией на ховере. */
.if-submit{background:var(--red);color:#fff;border:0;border-radius:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:18px 38px;min-height:52px;transition:background .2s,color .2s}
.if-submit:hover{background:#fff;color:#000}
.if-submit:focus-visible{outline:2px solid #fff;outline-offset:3px}
.if-submit[disabled]{opacity:.5;cursor:default}
.if-submit[disabled]:hover{background:var(--red);color:#fff}
.if-status{font-size:13px;line-height:19px;color:var(--red-lt)}
.if-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.if-done{display:none}
.if-done__sq{width:23px;height:23px;background:var(--red);margin-bottom:20px}
.if-done h3{font-size:27px;font-weight:600;line-height:33px;color:#fff;margin-bottom:12px}
.if-done p{font-size:16px;line-height:25px;color:rgba(255,255,255,.66);max-width:520px}
.intake--sent .if-grid{display:none}
.intake--sent .if-done{display:block}

/* -------------------------------------------- страница /project-intake ---- */
.pi{padding:clamp(52px,6.6vw,92px) 0}
.pi__in{width:calc(1200px * var(--sc,1));max-width:100%;margin:0 auto;padding:0 calc(13px * var(--sc,1))}
.pi--top{padding-top:calc(72px + clamp(52px,6.6vw,92px))}
.pi--bg{background:var(--bg)}
.pi--white{background:#fff}
.pi--dark{background:var(--dark);color:#fff}
.pi__head{max-width:900px}
.pi__head .badge{display:inline-flex;height:auto;padding:8px 14px;font-size:13px;letter-spacing:.04em;margin-bottom:22px}
.pi__head h1,.pi__head h2{margin-bottom:18px}
.pi__head p{max-width:760px}
.pi__sub{margin-top:clamp(26px,3vw,40px)}

.pi-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 40px;margin-top:clamp(34px,4vw,54px);padding-top:26px;border-top:1px solid rgba(0,0,0,.12)}
.pi-facts div .k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a;margin-bottom:8px}
.pi-facts div .v{font-size:19px;font-weight:600;line-height:26px}

.pi-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,56px);margin-top:clamp(30px,3.4vw,48px)}
.pi-list{list-style:none;margin:0;padding:0}
.pi-list li{position:relative;padding:15px 0 15px 26px;border-top:1px solid rgba(0,0,0,.11);font-size:16px;line-height:25px}
.pi-list li:last-child{border-bottom:1px solid rgba(0,0,0,.11)}
.pi-list li::before{content:"";position:absolute;left:0;top:24px;width:9px;height:9px;background:var(--red)}
.pi-list--no li::before{background:#c9c9c9}
.pi-list--no li{color:#7c7c7c}
.pi-col__t{font-size:20px;font-weight:600;line-height:28px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px}
.pi-col__t--no{color:#8a8a8a}

.pi-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,3.4vw,60px);margin-top:clamp(30px,3.4vw,48px);counter-reset:pistep}
.pi-step{counter-increment:pistep;position:relative;padding:22px 0 22px 52px;border-top:1px solid rgba(255,255,255,.13)}
.pi-step::before{content:"0" counter(pistep);position:absolute;left:0;top:24px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--red)}
.pi-step:nth-child(10)::before{content:counter(pistep)} /* 01…09, затем 10 */
.pi-step:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}
.pi-step h3{font-size:21px;font-weight:600;line-height:28px;margin-bottom:7px}
.pi-step p{font-size:15px;line-height:23px;color:var(--muted-d)}

.pi-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.6vw,40px);margin-top:clamp(30px,3.4vw,48px)}
.pi-card{border-top:2px solid var(--red);padding-top:18px}
.pi-card h3{font-size:19px;font-weight:600;line-height:26px;margin-bottom:9px}
.pi-card p{font-size:15px;line-height:23px;color:#6a6a6a}

.pi-cta{display:inline-flex;align-items:center;background:#000;color:#fff;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:17px 34px;margin-top:clamp(28px,3vw,42px);transition:background .2s}
.pi-cta:hover{background:var(--red)}
.pi--dark .pi-cta{background:var(--red)}
.pi--dark .pi-cta:hover{background:#fff;color:#000}

/* --------------------------------------------------------------- мобайл ---- */
@media(max-width:960px){
  .intake{padding:44px 0}
  .intake__in{width:auto;padding:0 22px}
  .intake__head{margin-bottom:26px}
  .intake__grid{grid-template-columns:1fr;gap:30px}
  /* Карточка уходит в край экрана: тёмная панель на всю ширину читается как
     отдельный «экран ввода», а полям достаётся вся ширина вместо 2×22px полей. */
  .intake__form{margin:0 -22px;padding:30px 22px 34px}
  /* Две колонки держатся до узкого экрана: на планшете форма уже во всю ширину,
     и одна колонка растянула бы «Компанию» на 700px. */
  .if-grid{gap:17px 20px}
  .if-f textarea{min-height:124px}
  .if-drop{padding:20px 16px}
  .if-submit{width:100%;justify-content:center;text-align:center}
  .if-actions{gap:14px}
  .if-done h3{font-size:23px;line-height:29px}

  .pi{padding:42px 0}
  .pi--top{padding-top:calc(62px + 34px)}
  .pi__in{width:auto;padding:0 22px}
  .pi-facts{grid-template-columns:1fr;gap:0;margin-top:28px;padding-top:0;border-top:0}
  /* Было `.pi-facts div` — ПОТОМКОВЫЙ селектор. Он цеплял не 3 блока, а все 9
     вложенных div (.k и .v — тоже div), поэтому каждая строка получала три
     линейки вместо одной и тройной паддинг, а .v ещё и ловил :last-child
     с нижней границей. Нужен дочерний селектор. */
  .pi-facts>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:6px 16px;padding:11px 0;border-top:1px solid rgba(0,0,0,.11)}
  .pi-facts>div:last-child{border-bottom:1px solid rgba(0,0,0,.11)}
  /* Ключ слева, значение справа — тот же реестр, что в герое лендинга. */
  .pi-facts>div .k{flex:none;margin-bottom:0}
  .pi-facts>div .v{font-size:17px;line-height:24px;text-align:right}
  .pi-two,.pi-steps,.pi-cards{grid-template-columns:1fr;gap:26px}
  .pi-steps{gap:0}
  .pi-step{padding:19px 0 19px 46px}
  .pi-step:nth-last-child(-n+2){border-bottom:0}
  .pi-step:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
  .pi-step h3{font-size:18px;line-height:25px}
  .pi-list li{font-size:15px;line-height:23px}
  .pi-cta{width:100%;justify-content:center;text-align:center}
}
@media(max-width:620px){
  .if-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .intake__in,.pi__in{padding:0 20px}
  .intake__form{margin:0 -20px;padding:28px 20px 32px}
}

/* ------------------------------------------------------------- шапка ------ */
/* С новым пунктом меню строка навигации стала длиннее: запрещаем перенос
   внутри пункта и поджимаем интервалы на «узком» десктопе (1200–1460). */
.nav a{white-space:nowrap}
@media(max-width:1460px){.nav{gap:18px}}


/* --------------------------------------------- прогрессивное раскрытие ---- */
/* Только форма лендинга (data-compact). На /project-intake форма — смысл
   страницы, там она остаётся полной: её разметка этого атрибута не получает. */
.if-more{display:none}
@media(max-width:620px){
  /* 620px — та же точка, где .if-grid становится одноколоночной. */
  .intake__form[data-compact].js-progressive .if-more{grid-column:1/-1;display:flex;align-items:center;
    justify-content:center;gap:9px;width:100%;padding:14px 16px;background:none;
    border:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:12px;
    font-weight:600;line-height:1;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
    transition:border-color .2s}
  .intake__form[data-compact].js-progressive .if-more::before{content:"+";font-size:15px;line-height:1}
  .intake__form[data-compact].js-progressive .if-more:hover{border-color:var(--red)}
  /* Скрытые поля остаются в DOM: валидация и отправка не меняются. */
  .intake__form[data-compact].js-progressive:not(.is-open) .if-opt{display:none}
  .intake__form[data-compact].js-progressive.is-open .if-more{display:none}
  /* Номера шагов — в один масштаб с .col3 и .pr__card. */
  .intake__steps li{padding-left:46px}
  .intake__steps li::before{font-size:18px;font-weight:700;line-height:24px;letter-spacing:.04em;top:16px}
}

/* ------------------------------------------- форма свёрнута до одной кнопки */
/* .js-progressive ставит скрипт: без него ничего не прячется и форма работает
   как обычно. .if-start — сосед .if-grid, поэтому состояние «отправлено»
   (.intake--sent) его не воскрешает. */
.if-start{display:none}
@media(max-width:620px){
  .intake__form[data-compact].js-progressive .if-start{display:flex;align-items:center;
    justify-content:center;gap:10px;width:100%;padding:18px 24px;min-height:52px;
    background:var(--red);color:#fff;border:0;font-family:inherit;font-size:14px;
    font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase;
    cursor:pointer;transition:background .2s}
  .intake__form[data-compact].js-progressive .if-start::after{content:"→";font-size:16px;line-height:1}
  .intake__form[data-compact].js-progressive .if-start:hover{background:#c40000}
  .intake__form[data-compact].js-progressive:not(.is-started) .if-grid{display:none}
  .intake__form[data-compact].js-progressive.is-started .if-start{display:none}
  .intake--sent .if-start{display:none!important}
}


/* ------------------------------------------- адвайзеры и партнёры -------- */
/* Названия фирм набраны шрифтом сайта одним серым, а не подтянуты картинками:
   пять чужих логотипов имеют разные пропорции и фирменные цвета, в grayscale
   они выглядят мутно и вразнобой. Единое начертание держит строгий строй
   страницы. Если пришлют файлы логотипов — менять только разметку .adv__row. */
.adv{margin-top:clamp(30px,3.4vw,48px)}
.adv__g{padding:26px 0;border-top:1px solid rgba(0,0,0,.12)}
.adv__g:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.adv__k{position:relative;padding-left:20px;margin-bottom:20px;font-size:11px;font-weight:600;
  letter-spacing:.16em;line-height:1.2;text-transform:uppercase;color:#8a8a8a}
.adv__k::before{content:"";position:absolute;left:0;top:.15em;width:7px;height:7px;background:var(--red)}
.adv__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:14px clamp(30px,4vw,58px)}
.adv__row li{font-size:clamp(21px,3vw,30px);font-weight:700;line-height:1.15;
  letter-spacing:-.01em;color:#a6a6a6;white-space:nowrap}
@media(max-width:960px){
  .adv{margin-top:28px}
  .adv__g{padding:22px 0}
  .adv__k{margin-bottom:16px}
  .adv__row{gap:12px 26px}
  .adv__row li{font-size:21px}
}
@media(max-width:400px){
  .adv__row{gap:10px 20px}
  .adv__row li{font-size:19px}
}