:root {
  --text: #f1efe9;
  --muted: rgba(241, 239, 233, 0.62);
  --line: rgba(241, 239, 233, 0.14);
  --accent: #ff6a3d;
  --bg: #07070a;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --pad: clamp(16px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
::selection { background: var(--accent); color: var(--bg); }

/* Сцена закреплена на весь экран, текст едет поверх */
.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity 0.7s ease; }
.stage.ready { opacity: 1; }

.header {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  mix-blend-mode: difference;
}
.logo { font-weight: 600; }
.logo span { opacity: 0.55; font-weight: 400; }
.nav { display: flex; gap: 28px; font-size: 15px; }

main { position: relative; z-index: 1; }

/* ---------- История ---------- */
.chapter {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--pad);
  pointer-events: none;
}
.chapter a { pointer-events: auto; }
.side-left { align-items: flex-start; }
.side-right { align-items: flex-end; text-align: right; }
.side-center { align-items: center; text-align: center; justify-content: flex-end; padding-bottom: 16vh; }
.side-left > *, .side-right > * { max-width: min(46vw, 640px); }
.side-center > * { max-width: 900px; }

.kicker { color: var(--muted); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.title {
  font-size: clamp(40px, min(5.6vw, 10vh), 104px);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.04em;
}
.big {
  font-size: clamp(52px, 8.6vw, 168px);
  font-weight: 700; line-height: 0.9; letter-spacing: -0.055em;
}
.big--long { font-size: clamp(40px, 5.4vw, 104px); }
/* слова не рвём: перенос только между словами */
.split .word { white-space: nowrap; }
.title em, .big em { font-size: 1.08em; font-weight: 500; letter-spacing: -0.02em; }
.lead, .text { color: var(--muted); font-size: clamp(17px, 1.35vw, 21px); margin-top: 26px; max-width: 30em; }
.side-right .text { margin-left: auto; }

.scroll-hint {
  position: absolute; left: var(--pad); bottom: 36px;
  width: 1px; height: 64px; background: linear-gradient(var(--text), transparent);
  animation: hint 2.2s ease-in-out infinite; transform-origin: top;
}
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.chapter--hero { position: relative; }

/* SplitText: строки и буквы за маской */
.split .line-mask, .split [class*="mask"] { padding-bottom: 0.06em; margin-bottom: -0.06em; }

/* ---------- Работы: лента, листать по желанию ---------- */
.works { position: relative; padding: 110px 0 90px; }
.works__head {
  display: grid; grid-template-columns: 1fr minmax(0, 420px); align-items: end; gap: 0 40px;
  padding: 0 var(--pad); margin-bottom: 44px;
}
.works__head .kicker, .works__head .big { grid-column: 1; }
.works__head .text { grid-column: 2; grid-row: 2; margin: 0 0 0.6em; text-align: right; justify-self: end; }

.works__track {
  display: flex; gap: 3vw; padding: 0 var(--pad) 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 var(--pad);
  scrollbar-width: none; cursor: grab;
}
.works__track::-webkit-scrollbar { display: none; }
.works__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.works__track.is-dragging .card { pointer-events: none; }

.card { --h: min(42vh, 28vw); width: calc(var(--h) * 1.6); flex: none; scroll-snap-align: start; }
.card__shot {
  position: relative; display: block; height: var(--h); overflow: hidden;
  border-radius: 6px; background: #121216;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* маска раскрытия включается только при работающем скрипте — без него карточки просто видны */
.works__track.is-js .card__shot { clip-path: inset(10% 16% 10% 16% round 6px); transition: clip-path 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.works__track.is-js .card.is-in .card__shot { clip-path: inset(0 0 0 0 round 6px); }
.card__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: filter 0.6s; -webkit-user-drag: none; }
/* «что сделал» всплывает поверх скриншота при наведении */
.card__did {
  position: absolute; inset: auto 0 0; padding: 60px 24px 22px;
  background: linear-gradient(transparent, rgba(5, 5, 8, 0.92));
  font-size: 16px; line-height: 1.45; color: var(--text);
  transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card__shot:hover .card__did { transform: none; }
.card__shot:hover img { filter: brightness(0.8); }
.card__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 4px 32px; margin-top: 18px; }
.card__tag { grid-column: 1 / -1; color: var(--accent); font-size: 14px; font-weight: 500; }
.card__info h3 { font-size: clamp(24px, 2.3vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.card__kind { color: var(--muted); font-size: 14px; align-self: center; text-align: right; }
.card__task { color: var(--muted); font-size: 15px; max-width: 34em; }
.card__link { align-self: end; justify-self: end; white-space: nowrap; font-weight: 500; border-bottom: 1px solid var(--accent); padding-bottom: 3px; transition: color 0.25s; }
.card__link:hover { color: var(--accent); }
.card__link--off { color: var(--muted); border-color: var(--line); }

.card--cta .card__shot { display: grid; place-items: center; background: var(--accent); color: #140b07; box-shadow: none; }
.cta__text { font-size: clamp(40px, 5vw, 88px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; text-align: center; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card--cta .card__shot:hover .cta__text { transform: scale(1.05); }

.works__controls { display: flex; align-items: center; gap: 18px; margin: 28px var(--pad) 0; }
.works__progress { flex: 1; height: 1px; background: var(--line); }
.works__progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.works__hint { color: var(--muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.works__prev, .works__next {
  width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 2px;
  background: none; color: var(--text); font-size: 20px; cursor: pointer; transition: border-color 0.25s, color 0.25s;
}
.works__prev:hover, .works__next:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Цены, как бывает, контакты: поверх сцены, но плотнее ---------- */
.prices, .approach, .faq, .footer { position: relative; background: var(--bg); }
/* контакты проявляются из сплошного фона: сверху цвет фона, ниже прозрачно — там снова видна клавиатура */
.contact { position: relative; background: linear-gradient(var(--bg), rgba(7, 7, 10, 0) 45%); }
.contact > * { max-width: min(52vw, 760px); }
.prices, .approach, .contact { padding: 120px var(--pad); }
.approach { padding-top: 40px; }
.prices .big { margin-bottom: 56px; }
.prices__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 220px; gap: 24px; align-items: baseline;
  padding: 30px 0; border-top: 1px solid var(--line); list-style: none;
}
.prices__list li:last-child { border-bottom: 1px solid var(--line); }
.prices__list h3 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.02em; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.prices__list p { color: var(--muted); }
.prices__list span { text-align: right; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 0.3s; }
.prices__list li:hover h3 { transform: translateX(14px); }
.prices__list li:hover span { color: var(--accent); }
.prices > .text { margin-top: 32px; }

.approach__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 6vw, 96px); }
.approach__grid > div { border-top: 1px solid var(--line); padding: 30px 0 52px; }
.approach__grid h3 { font-size: clamp(26px, 2.8vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 14px; }
.approach__grid p { color: var(--muted); font-size: 18px; max-width: 30em; }

.faq { padding: 40px var(--pad) 120px; }
.faq__list { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none;
  font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15;
}
.faq summary::-webkit-details-marker { display: none; }
/* плюс поворачивается в крестик у открытого вопроса */
.faq summary::after { content: '+'; flex: none; font-weight: 300; color: var(--muted); transition: transform 0.35s, color 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq summary:hover::after { color: var(--accent); }
.faq summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.faq details p { color: var(--muted); font-size: 18px; max-width: 40em; padding-bottom: 30px; }
.faq details a { color: var(--text); border-bottom: 1px solid var(--accent); }

.contact { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.contact em { color: var(--accent); }
.contact__links { display: flex; gap: 12px 40px; flex-wrap: wrap; margin-top: 40px; }
.contact__links a { font-size: clamp(22px, 2.6vw, 36px); font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.contact__links a:hover { color: var(--accent); border-color: var(--accent); }

.footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px var(--pad); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* Вертикальное окно (телефон, планшет стоя): клавиатура сверху по центру, текст снизу на всю ширину.
   Условие то же, что в scene.js: при соотношении сторон меньше 1.1 сцена центрирует модель. */
@media (max-width: 760px), (max-aspect-ratio: 11/10) {
  .chapter { justify-content: flex-end; padding-bottom: 72px; }
  .side-left > *, .side-right > * { max-width: 100%; }
  .side-right { align-items: flex-start; text-align: left; }
  .side-right .text { margin-left: 0; }
  .chapter--hero { justify-content: flex-end; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { gap: 18px; }
  .works__head { grid-template-columns: 1fr; }
  .works__head .text { grid-column: 1; grid-row: auto; text-align: left; justify-self: start; margin-top: 18px; }
  .card { --h: auto; width: 82vw; }
  .card__shot { height: auto; aspect-ratio: 16 / 10; }
  .works__hint, .works__prev, .works__next { display: none; }
  .card__info { grid-template-columns: 1fr; }
  .card__kind, .card__link { text-align: left; justify-self: start; }
  .prices__list li { grid-template-columns: 1fr; gap: 6px; }
  .prices__list span { text-align: left; color: var(--accent); }
  .approach__grid { grid-template-columns: 1fr; }
}

/* ссылки внутри текста и документы в подвале */
.text a, .footer__docs a { color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.text a:hover, .footer__docs a:hover { color: var(--accent); }