/**
 * Услуги в языке лендингов курса.
 *
 * Раздел был светлым и ровным, курс — контрастным и крупным, и они читались
 * как два разных сайта. Здесь услуги получают ту же логику: тёмный первый
 * экран с градиентным заголовком, крупные строки услуг вместо мелких плашек,
 * тёмная панель «Почему со мной» на светлой странице, акцент один на раздел.
 *
 * Слой подключается последним и перекрывает uslugi26.css. Заменяет собой
 * монохромный слой: цвет вернулся, но одним акцентом, а не радугой.
 * Значения заданы прямо — переменные из отдельного файла до элементов не
 * доходят (проверено на лендингах).
 */

/* Второй селектор — для аккордеона, который переехал на другие страницы
   (виды съёмки в портфолио): там нет обёртки .ef-uslugi-page, и без этого
   переменные не доходили — номер и раскрытая плашка теряли цвет. */
.ef-uslugi-page.u26,
.u26 {
  --acc: #8b8578;
  --acc-lt: #8b8578;
  --acc-tint: rgba(23,21,15,.1);
  --grad-btn: linear-gradient(100deg, #8b8578 0%, #8b8578 100%);
  /* Заголовок начинается белым и уходит в цвет: первые слова остаются
     читаемыми, а фраза «расцветает» к концу. */
  --grad-title: linear-gradient(100deg, #fff 0%, #8FD0FF 38%, #BF5AF2 74%, #FF9F0A 100%);
}

/* ================= Первый экран: тёмный, во всю ширину ================= */

/* Отступ сверху был у колонки контента, и между шапкой и тёмным экраном
   оставалась белая полоса. Отдаём этот отступ самому экрану. */
.u26 .ef-uslugi-body { padding-top: 0; }

.u26 .ef-u-hero {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px) clamp(56px, 8vw, 104px);
  margin-bottom: clamp(40px, 6vw, 78px);
  color: #fff;
  align-items: center;
}
/* Тёмная подложка шире колонки текста: раздел начинается как экран курса.
   100vw от центра — страница уже с overflow-x: clip, вбок не поедет. */
.u26 .ef-u-hero::before {
  content: ""; position: absolute; z-index: 0;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: radial-gradient(120% 140% at 18% 0%, #16233a 0%, #0b0b0d 58%, #000 100%);
}
.u26 .ef-u-hero > * { position: relative; z-index: 1; }

/* Цветное свечение за заголовком — тот же приём, что на лендингах. */
.u26 .ef-u-hero__text::before {
  content: ""; position: absolute; z-index: -1;
  left: -8%; top: -18%; width: 78%; aspect-ratio: 1.6;
  background: var(--grad-btn);
  filter: blur(120px); opacity: .3; pointer-events: none;
}
.u26 .ef-u-hero__text { position: relative; }

.u26 .ef-u-hero__text h1,
.u26 .ef-u-hero__text h2 {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
  background-image: var(--grad-title);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.u26 .ef-u-hero__text p { color: rgba(255,255,255,.68); font-size: clamp(1.02rem, 1.5vw, 1.12rem); }
.u26 .ef-u-hero__text .ef-u-eyebrow {
  color: var(--acc-lt);
  display: inline-flex; align-items: center; gap: 9px;
  border-bottom: 0; padding-bottom: 0;
}
.u26 .ef-u-hero__text .ef-u-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .8;
}
.u26 .ef-u-hero__text .ef-u-eyebrow::after { content: none; }
.u26 .ef-u-hero__photo img {
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

/* ================= Услуги: крупные строки вместо мелких плашек ========= */

.u26 .ef-u-acc { display: grid; gap: 0; border-top: 1px solid rgba(0,0,0,.1); }
.u26 .ef-u-acc__item {
  background: none;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 0;
  box-shadow: none !important;
  transition: background-color .3s;
}
.u26 .ef-u-acc__item:hover { transform: none; box-shadow: none !important; background: rgba(0,0,0,.02); }
.u26 .ef-u-acc__item.is-open { background: rgba(0,0,0,.02); }

.u26 .ef-u-acc__head {
  gap: clamp(16px, 2.4vw, 30px);
  padding: clamp(22px, 2.8vw, 32px) clamp(8px, 1.4vw, 16px);
  align-items: center;
}
/* Номер — сплошной цвет раздела, без плашки и градиента. */
.u26 .ef-u-acc__num,
.u26 .ef-u-acc__item:nth-child(2) .ef-u-acc__num,
.u26 .ef-u-acc__item:nth-child(3) .ef-u-acc__num,
.u26 .ef-u-acc__item:nth-child(4) .ef-u-acc__num {
  width: auto; height: auto; border-radius: 0;
  background: none !important; border: 0;
  color: var(--acc);
  font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.u26 .ef-u-acc__title,
.u26 .ef-u-acc__title * {
  font-size: clamp(1.25rem, 2.8vw, 1.95rem);
  line-height: 1.14; font-weight: 650; letter-spacing: -.028em;
  color: #1d1d1f;
}
.u26 .ef-u-acc__toggle {
  border: 1px solid rgba(0,0,0,.16);
  background: transparent;
}
.u26 .ef-u-acc__item.is-open .ef-u-acc__toggle {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
}
.u26 .ef-u-acc__inner p,
.u26 .ef-u-acc__inner li { font-size: clamp(1rem, 1.5vw, 1.08rem); }
.u26 .ef-u-acc__inner li::before { background: var(--acc) !important; }

/* ================= «Почему со мной»: тёмная панель ==================== */

.u26 .ef-u-trust {
  position: relative;
  background: #0b0b0d;
  border-radius: clamp(24px, 3vw, 34px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(48px, 7vw, 92px);
}
.u26 .ef-u-trust::before {
  content: ""; position: absolute; z-index: -1;
  width: 60%; aspect-ratio: 1; right: -12%; top: -36%;
  background: var(--grad-btn);
  filter: blur(90px); opacity: .34;
}
.u26 .ef-u-trust h2,
.u26 .ef-u-trust h3,
.u26 .ef-u-trust .ef-u-trust__title { color: #fff; }
.u26 .ef-u-trust p { color: rgba(255,255,255,.72); font-size: clamp(1.02rem, 1.6vw, 1.14rem); }
.u26 .ef-u-trust em { color: rgba(255,255,255,.5); }

/* ================= Вопросы: крупнее и спокойнее ====================== */

.u26 .ef-u-faq h3:not(.ef-u-faq__title),
.u26 .ef-u-faq h4 { font-size: clamp(1.12rem, 2vw, 1.35rem); }
.u26 .ef-u-faq h3:not(.ef-u-faq__title) + p,
.u26 .ef-u-faq h4 + p { font-size: 1.06rem; }

/* ================= Заявка ============================================ */

.u26 .ef-uslugi-cta__intro .ef-u-eyebrow {
  color: var(--acc);
  display: inline-flex; align-items: center; gap: 9px;
  border-bottom: 0; padding-bottom: 0;
}
.u26 .ef-uslugi-cta__intro .ef-u-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .8;
}
.u26 .ef-uslugi-cta__intro .ef-u-eyebrow::after { content: none; }
.u26 .ef-uslugi-cta__form input[type="submit"],
.u26 .ef-uslugi-cta__form button[type="submit"] {
  background: var(--grad-btn) !important;
  box-shadow: 0 10px 34px rgba(23,21,15,.3);
  font-weight: 550;
}
.u26 .ef-uslugi-cta__form input[type="submit"]:hover {
  filter: brightness(1.08);
  background: var(--grad-btn) !important;
}
.u26 .ef-uslugi-cta__form input:focus,
.u26 .ef-uslugi-cta__form select:focus,
.u26 .ef-uslugi-cta__form textarea:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 4px var(--acc-tint) !important;
}
.u26 .ef-u-contact--tg { background: #1d1d1f; }

/* ================= Телефон =========================================== */

@media (max-width: 860px) {
  .u26 .ef-u-hero { padding-block: clamp(40px, 9vw, 64px); }
  .u26 .ef-u-hero__photo img { border-radius: 20px; }
  /* Прежнее оформление поднимало фото над заголовком. На тёмном экране
     первым должен идти заголовок — как на лендингах курса. */
  .u26 .ef-u-hero__photo { order: 0; }
  .u26 .ef-u-acc__head { gap: 14px; padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .u26 .ef-u-acc__item { transition: none; }
}