/* ============================================================
   AVANZATO — Editorial / Premium-Minimal design system
   ============================================================ */

:root {
  --bg:         #f4f1ea;
  --bg-2:       #efebe1;
  --surface:    #eee9df;
  --ink:        #232118;
  --ink-2:      rgba(10, 10, 10, 0.62);
  --ink-3:      rgba(10, 10, 10, 0.40);
  --hairline:   rgba(10, 10, 10, 0.14);
  --hairline-2: rgba(10, 10, 10, 0.07);
  --tint:       rgba(10, 10, 10, 0.035);
  --accent:     #6b6453;
  --accent-2:   #847c68;
  --accent-ink: #4a4536;

  --radius:    4px;
  --radius-lg: 8px;
  --maxw:      1240px;
  --gutter:    32px;

  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* Rubik и Jost здесь оставались от прежней темы и никогда не подключались —
     до браузера доходил системный фолбэк. theme.css всё равно переопределяет
     оба токена на Onest; выравниваем, чтобы значения не расходились. */
  --font-display: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip;
  /* скрываем штатный скроллбар — навигацию заменяет dot-rail справа;
     прокрутка колёсиком, тачпадом, клавишами и тач-жестами сохраняется */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* старый Edge / IE */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome, Safari */
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  line-height: 1.5;
}

/* ---------- page transition curtain (mobile-safe) ---------- */
.page-curtain {
  position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  background: var(--bg); opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.page-curtain.show { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }

/* встречная шторка: страница, открытая по внутренней ссылке, стартует
   под фоном-занавесом и мягко проявляется — без белой вспышки */
html.arriving body::before {
  content: ""; position: fixed; inset: 0; z-index: 3000;
  background: var(--bg); pointer-events: none;
}
html.arriving.arrived body::before { opacity: 0; transition: opacity .45s ease; }

/* ============================================================
   Анимированный фон Aurora — для всех страниц (форсированный)
   ============================================================ */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg);
}
/* аврора-блобы убраны — чистый бумажный фон (японский минимализм) */
.ambient::before,
.ambient::after { content: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(10, 10, 10, 0.14); color: var(--ink); }

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent); margin: 0;
}
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.02; }
.display {
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 110px);
  font-weight: 400; letter-spacing: -0.015em; line-height: 1.0;
  font-optical-sizing: auto;
}
.display em { font-style: italic; color: var(--accent-ink); font-weight: 500; }
.h-section {
  font-family: var(--font-display);
  font-size: clamp(29px, 4.4vw, 54px);
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.06;
}
.h-section em { font-style: italic; color: var(--accent-ink); }
.lede {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6;
  color: var(--ink-2); font-weight: 300; letter-spacing: 0;
}
.muted { color: var(--ink-2); }

/* ---------- word-by-word reveal ---------- */
/* до пословной обёртки заголовок скрыт с первого кадра — убирает мигание
   на первой загрузке (класс js ставит инлайн-скрипт в <head>);
   предохранитель проявляет текст, если скрипт не отработал */
html.js [data-anim="words"]:not(.words-ready) { opacity: 0; animation: wordsSafety .3s ease 2.5s forwards; }
@keyframes wordsSafety { to { opacity: 1; } }

[data-anim="words"] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
[data-anim="words"] .w > span { display: inline-block; transform: translateY(115%); transition: transform .85s var(--ease); }
[data-anim="words"].in .w > span { transform: translateY(0); }

/* ---------- scroll progress ---------- */
/* полоса прогресса скролла отключена — ориентир по странице даёт dot-rail */
.scrollbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1000;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  display: none;
}

/* ---------- navigation ---------- */
.navwrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 960;
  display: flex; justify-content: center; pointer-events: none;
  padding: 18px var(--gutter);
  transition: padding .4s var(--ease);
}
.nav {
  pointer-events: auto; width: 100%; max-width: var(--maxw);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 14px 0;
  position: relative; z-index: 1;
  transition: padding .4s var(--ease);
}
/* шапка при скролле: аккуратный фон + уплотнение */
.navwrap::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: rgba(244,241,234,.7);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: opacity .4s var(--ease);
}
.navwrap.scrolled::before { opacity: 1; }
.navwrap.scrolled { padding-top: 8px; padding-bottom: 8px; }
.navwrap.scrolled .nav { padding: 7px 0; }
.navwrap.scrolled .brand-logo { height: 17px; }
.nav .brand {
  display: inline-flex; align-items: center;
}
.brand-logo {
  height: 20px; width: auto; display: block;
  transition: opacity .3s var(--ease), height .4s var(--ease);
}
.nav .brand:hover .brand-logo { opacity: .65; }

/* ---------- nav links — дзен: тихий текст + киноварная точка 朱 ---------- */
.nav .nav-links { display: flex; align-items: center; gap: clamp(6px, 1.6vw, 26px); position: relative; }
.nav-ind { display: none; }
.nav a.link {
  font-size: 14px; font-weight: 400; color: var(--ink-2);
  letter-spacing: 0.04em; padding: 8px 2px;
  position: relative; z-index: 1;
  transition: color .55s var(--ease);
}
.nav a.link:hover { color: var(--ink); }
.nav a.link.active { color: var(--ink); }
/* 朱 — едва заметная печать-точка под активным/наведённым разделом
   (эхо ханко и Ensō, единственный цветовой акцент) */
.nav a.link::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--seal); transform: scale(0); transform-origin: center;
  transition: transform .55s var(--ease);
}
.nav a.link.active::after,
.nav a.link:hover::after { transform: scale(1); }

/* ---------- burger + mobile menu ---------- */
.burger {
  display: none; width: 46px; height: 46px; margin-right: -8px;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: rgba(10, 10, 10, 0.02); cursor: pointer; position: relative;
  z-index: 1001; flex: 0 0 auto; -webkit-tap-highlight-color: transparent;
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .5s var(--ease);
}
.burger:hover { border-color: rgba(255, 77, 0, 0.5); background: rgba(255, 77, 0, 0.05); }
.burger:active { transform: scale(.92); }
.burger span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1.8px;
  background: var(--ink); border-radius: 2px;
  transform: translate(-50%, -50%) translateY(var(--y, 0));
  transition: transform .5s var(--ease), opacity .25s var(--ease-soft), width .45s var(--ease), background .45s var(--ease);
}
.burger span:nth-child(1) { --y: -5px; }
.burger span:nth-child(2) { --y: 0px; width: 18px; }
.burger span:nth-child(3) { --y: 5px; width: 11px; }
.burger:hover span:nth-child(3) { width: 18px; }
body.nav-open .burger { border-color: rgba(255, 77, 0, 0.6); background: rgba(255, 77, 0, 0.07); }
body.nav-open .burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); width: 19px; background: var(--accent-ink); }
body.nav-open .burger span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.3); }
body.nav-open .burger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); width: 19px; background: var(--accent-ink); }

.mobnav {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: center;
  background:
    radial-gradient(80vmax 60vmax at 92% 4%, rgba(10, 10, 10,0.16), transparent 58%),
    radial-gradient(70vmax 70vmax at 0% 100%, rgba(10, 10, 10,0.10), transparent 60%),
    var(--bg);
  clip-path: circle(0% at calc(100% - 38px) 38px);
  opacity: 0; visibility: hidden;
  transition: clip-path .65s var(--ease), opacity .4s ease, visibility 0s linear .65s;
}
body.nav-open .mobnav {
  clip-path: circle(155% at calc(100% - 38px) 38px);
  opacity: 1; visibility: visible;
  transition: clip-path .8s var(--ease), opacity .3s ease, visibility 0s;
}
.mobnav-inner { width: 100%; padding: 0 var(--gutter); display: flex; flex-direction: column; }
.mobnav-eyebrow {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 26px;
  display: inline-flex; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .6s var(--ease);
}
.mobnav-eyebrow::after { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
body.nav-open .mobnav-eyebrow { opacity: 1; transform: none; transition-delay: .15s; }

.mobnav-links { display: flex; flex-direction: column; }
.mlink {
  position: relative; display: flex; align-items: center; gap: 16px;
  width: fit-content; padding: 7px 0; text-decoration: none;
  transition: transform .45s var(--ease);
}
/* 朱 — тихая печать-точка у активного раздела (как в десктоп-меню) */
.mlink::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--seal); transform: scale(0); transform-origin: center;
  transition: transform .5s var(--ease);
}
.mlink.active::before { transform: scale(1); }
.mlink-t {
  display: inline-block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(36px, 12.5vw, 58px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0; transform: translateY(30px); filter: blur(6px);
  transition: opacity .5s ease, transform .6s var(--ease), filter .5s var(--ease-soft), color .35s var(--ease);
}
body.nav-open .mlink-t {
  opacity: 1; transform: none; filter: blur(0);
  transition-delay: calc(.24s + var(--i) * .07s);
}
/* убираем синюю системную рамку при программном/тач-фокусе,
   аккуратный золотой контур оставляем только для навигации с клавиатуры */
.mobnav:focus, .mlink:focus, .mobnav-cta:focus, .mobnav-soc a:focus, .burger:focus { outline: none; }
.mlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }
.mobnav-cta:focus-visible, .mobnav-soc a:focus-visible, .burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) {
  .mlink:hover { transform: translateX(12px); }
  .mlink:hover::before { transform: scale(1); }
}

.mobnav-foot {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .6s var(--ease);
}
body.nav-open .mobnav-foot { opacity: 1; transform: none; transition-delay: calc(.3s + var(--i) * .07s); }
.mobnav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 500; font-size: 16px;
  color: var(--bg); background: linear-gradient(135deg, var(--accent-2), var(--accent));
  padding: 13px 22px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(10, 10, 10,.7);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.mobnav-cta svg { transition: transform .4s var(--ease); }
.mobnav-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(10, 10, 10,.85); }
.mobnav-cta:hover svg { transform: translateX(4px); }
.mobnav-soc { display: inline-flex; gap: 22px; }
.mobnav-soc a {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-2);
  text-decoration: none; letter-spacing: .02em; transition: color .35s var(--ease);
}
.mobnav-soc a:hover { color: var(--accent-ink); }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 880px; }
.block { padding: clamp(56px, 8vw, 110px) 0 0; }

.section-label {
  display: flex; align-items: center; gap: 16px; margin-bottom: 36px;
}
.section-label .num {
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; color: var(--accent); letter-spacing: 0;
}
.section-label .line { flex: 1; height: 1px; background: var(--hairline); }

/* ---------- background photo ---------- */
.bg-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bg-photo image-slot, .bg-photo .photo-fill {
  width: 100%; height: 100%;
  filter: saturate(100%) brightness(1.02) contrast(0.98);
  transform: scale(1.12); will-change: transform;
}
.bg-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(244,241,234,0.55) 0%,
    rgba(244,241,234,0.30) 32%,
    rgba(244,241,234,0.62) 72%,
    rgba(244,241,234,0.94) 90%,
    var(--bg) 100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 15px 28px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; letter-spacing: 0.01em;
  transition: gap .35s var(--ease), background .35s, color .35s, border-color .35s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { border-color: var(--hairline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--tint); }

/* ---------- surfaces / cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .4s, background .4s, transform .5s var(--ease);
}
.card:hover { border-color: rgba(10, 10, 10,0.22); }

/* ---------- reveal ---------- */
/* блоки «вылетают» из правой полоски с точками и въезжают влево на место */
.reveal {
  opacity: 0; transform: translateX(110px) scale(.965);
  transform-origin: right center;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-soft), transform .95s var(--ease);
}
.reveal[data-d="1"].in { transition-delay: .10s; }
.reveal[data-d="2"].in { transition-delay: .20s; }
.reveal[data-d="3"].in { transition-delay: .30s; }
.reveal[data-d="4"].in { transition-delay: .40s; }

.reveal[data-anim="mask"] { clip-path: inset(0 0 100% 0); opacity: 1; filter: none; transform: none; }
.reveal[data-anim="mask"].in {
  clip-path: inset(0 0 -8% 0);
  transition: clip-path 1.1s var(--ease);
}

/* Первый экран (герои страниц, тарифы, блок контактов) показывается
   мгновенно и статично — без вступительной анимации и ожидания шрифта.
   Эффектные появления остаются для контента, приходящего при скролле. */
.hero .reveal, .p-hero .reveal, .c-wrap .reveal, .tiers .reveal {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
  animation: none !important;
}

.section-label .line { transform: scaleX(0); transform-origin: 0 50%; }
.section-label.in .line,
.reveal.in .section-label .line { transform: scaleX(1); transition: transform 1.1s var(--ease) .15s; }

/* ---------- footer ---------- */
.footer {
  margin-top: clamp(90px, 12vw, 150px);
  padding: 44px 0 50px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: center; justify-content: space-between;
  color: var(--ink-2); font-size: 13.5px;
}
.footer .brand { display: inline-flex; align-items: center; }
.footer .brand img { height: 26px; width: auto; display: block; }
.footer nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer nav a { color: var(--ink-2); transition: color .3s; }
.footer nav a:hover { color: var(--accent); }

image-slot { --is-bg: rgba(10, 10, 10,0.05); background: var(--is-bg); }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .nav .nav-links { display: none; }
  .burger { display: block; }
  .nav { border-bottom: 0; }
  .footer { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (min-width: 721px) {
  .mobnav { display: none; }
}
/* фон Aurora: на мобильных анимация работает, лишь чуть мягче для слабых GPU */
@media (max-width: 720px) {
  .ambient::before { filter: blur(55px); }
  .ambient::after  { filter: blur(65px); }
}
@media (prefers-reduced-motion: reduce) {
  .page-curtain { display: none; }
  .ambient::before, .ambient::after { animation: none !important; }
  [data-anim="words"] .w > span { transform: none; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .m-frame::after { display: none !important; }
}

/* ============================================================
   Стили страницы: Главная (home)
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-start; padding:124px 0 72px; overflow:hidden; }
.hero-inner { width:100%; }
.hero-eb { opacity:0; animation:fadeUp .8s var(--ease-soft) .15s forwards; }
.hero-title { margin:22px 0 0; }
.hero-title .line { display:block; overflow:hidden; padding-bottom:.02em; }
.hero-title .line > span { display:block; }
.hero-lede { max-width:540px; margin:30px 0 0; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.hero-meta { display:flex; gap:clamp(28px,6vw,90px); margin-top:clamp(40px,6vh,68px); padding-top:clamp(28px,4vh,40px); border-top:1px solid var(--hairline); }
.hero-meta .stat { display:flex; flex-direction:column; gap:5px; }
.hero-meta .stat b { font-family:var(--font-display); font-size:clamp(30px,3.4vw,42px); font-weight:350; letter-spacing:-0.02em; }
.hero-meta .stat span { font-size:12.5px; color:var(--ink-2); letter-spacing:0.01em; }
.scroll-hint { position:absolute; bottom:52px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-3); }
@keyframes hintFade { to { opacity:1; } }
.scroll-hint i { display:block; width:1px; height:42px; background:linear-gradient(var(--accent),transparent); position:relative; overflow:hidden; }
.scroll-hint i::after { content:""; position:absolute; top:0; left:0; right:0; height:12px; background:var(--accent); animation:hintMove 1.9s var(--ease-soft) infinite; }
@keyframes hintMove { 0%{transform:translateY(-12px)} 100%{transform:translateY(42px)} }

.intro-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,6vw,90px); align-items:start; }
.intro-grid a { color:var(--accent-ink); text-decoration:none; border-bottom:1px solid rgba(10, 10, 10,.35); transition:border-color .3s var(--ease), color .3s var(--ease); }
.intro-grid a:hover { color:var(--accent); border-color:var(--accent); }
.seo-tags { list-style:none; margin:clamp(40px,5vw,64px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.seo-tags li { font-family:var(--font-sans); font-size:13px; color:var(--ink-2); padding:9px 16px; border:1px solid var(--hairline); border-radius:100px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.seo-tags li:hover { color:var(--ink); border-color:rgba(10, 10, 10,.4); }
.do-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(48px,7vw,90px); border-top:1px solid var(--hairline); }
.do-card { padding:34px 30px 38px; border-right:1px solid var(--hairline); }
.do-card:last-child { border-right:0; }
.do-n { font-family:var(--font-display); font-style:italic; color:var(--accent); font-size:14px; }
.do-card h3 { font-family:var(--font-display); font-weight:380; font-size:23px; margin:18px 0 10px; }
.do-card p { font-size:14.5px; line-height:1.55; margin:0; }

.work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(38px,4.5vw,58px); }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,46px) clamp(18px,1.8vw,26px); }
.m-item { display:block; }
.m-frame { position:relative; display:block; overflow:hidden; border-radius:var(--radius-lg); aspect-ratio:16/9; background:var(--bg-2); }
.m-frame img { width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(100%) brightness(.92) contrast(1.02); transform:scale(1.16); transition:transform 1.6s var(--ease), filter .6s var(--ease-soft); }
.m-item.in .m-frame img { transform:scale(1); }
.m-item:hover .m-frame img { transform:scale(1.05); filter:grayscale(0%) brightness(1); }
.m-frame::after { content:""; position:absolute; inset:0; background:var(--bg); transform-origin:top; transform:scaleY(1); transition:transform 1.1s var(--ease); }
.m-item.in .m-frame::after { transform:scaleY(0); }
/* тонкая рамка-линия, мягко проявляется при наведении */
.m-frame::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .5s var(--ease-soft); }
.m-item:hover .m-frame::before { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.m-arr { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--bg); color:var(--ink); opacity:0; transform:scale(.55) translateY(-8px) rotate(-12deg); transition:opacity .45s var(--ease), transform .55s var(--ease); z-index:2; }
.m-item:hover .m-arr { opacity:1; transform:none; }
.m-meta { display:flex; align-items:baseline; gap:16px; padding:20px 2px 0; opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease-soft) .28s, transform .9s var(--ease) .28s; }
.m-item.in .m-meta { opacity:1; transform:none; }
.m-num { font-family:var(--font-display); font-size:13px; color:var(--accent); letter-spacing:.04em; padding-top:4px; }
.m-txt { display:flex; flex-direction:column; flex:1; }
.m-txt b { font-family:var(--font-display); font-weight:500; font-size:clamp(16px,1.3vw,19px); letter-spacing:-.01em; position:relative; width:fit-content; }
.m-txt b::after { content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--ease); }
.m-item:hover .m-txt b::after { transform:scaleX(1); }
.m-txt i { font-size:13.5px; color:var(--ink-2); font-style:normal; margin-top:5px; }

/* приглашающий блок «Смотреть все работы» на главной */
.work-more {
  margin-top: clamp(28px,3vw,46px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(24px,3vw,38px) clamp(26px,3vw,44px);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  position: relative; overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.work-more-t { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.work-more-t b { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,3vw,34px); }
.work-more-t i { font-style: normal; color: var(--ink-2); font-size: 14.5px; }
.work-more-arr {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--accent);
  transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
@media (hover: hover) {
  .work-more:hover { border-color: rgba(10, 10, 10,.4); transform: translateY(-3px); }
  .work-more:hover .work-more-arr { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--bg); transform: translateX(4px); }
}
/* бегущий блик убран — спокойная статичная карточка */
@media (max-width: 480px) {
  .work-more { padding: 22px; gap: 16px; }
  .work-more-arr { width: 46px; height: 46px; }
}

.cta { border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:clamp(48px,7vw,90px) var(--gutter); text-align:center; background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.cta-inner { max-width:640px; margin:0 auto; }
.cta .eyebrow { margin-bottom:20px; }
.cta .h-section { margin-bottom:18px; }
.cta .lede { margin:0 auto 30px; max-width:480px; }
.cta .hero-cta { justify-content:center; animation:none; opacity:1; margin-top:0; }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes lineUp { to{transform:none} }
@media(prefers-reduced-motion:reduce){.hero-eb,.hero-lede,.hero-cta,.hero-meta,.scroll-hint{opacity:1!important;animation:none!important}.hero-title .line>span{transform:none!important;animation:none!important}}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr;gap:24px}.do-grid{grid-template-columns:1fr}.do-card{border-right:0;border-bottom:1px solid var(--hairline)}.do-card:last-child{border-bottom:0}.gallery{grid-template-columns:repeat(2,1fr)}.work-head{flex-direction:column;align-items:flex-start;gap:16px}}



/* ============================================================
   Стили страницы: Цены (pricing)
   ============================================================ */
.p-hero{display:flex;align-items:flex-end;padding:clamp(120px,14vh,168px) 0 0;min-height:42vh}
.p-hero .display{margin-top:16px}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.tier{padding:clamp(32px,3.4vw,48px) clamp(28px,3vw,42px);display:flex;flex-direction:column;position:relative;border-right:1px solid var(--hairline)}
.tier:last-child{border-right:0}
.tier.featured{background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.tier-badge{position:absolute;top:clamp(28px,3vw,40px);right:clamp(28px,3vw,42px);background:var(--ink);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:0.02em;padding:6px 13px;border-radius:999px;white-space:nowrap}
/* резервируем место под бейдж, чтобы он не наезжал на заголовок */
.tier.featured .tier-h{padding-right:150px}
.tier-h h3{font-family:var(--font-display);font-size:clamp(24px,2.8vw,34px);margin:8px 0 12px;font-weight:380}
.tier-h h3 .muted{font-weight:380}
.tier-desc{font-size:14.5px;line-height:1.55;margin:0 0 30px}
.price{display:flex;align-items:flex-end;gap:8px;margin-top:auto}
.price .from{font-size:14px;color:var(--ink-2);margin-bottom:14px}
.price b{font-family:var(--font-display);font-size:clamp(44px,5.4vw,64px);font-weight:350;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}
.price .cur{font-size:26px;font-weight:350;color:var(--accent);margin-bottom:8px;font-family:var(--font-display)}
.price-note{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);margin:16px 0 28px}
.price-note .dot-ic{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tier-btn{justify-content:center;width:100%}
.tiers-foot{text-align:center;margin-top:30px;color:var(--ink-2);font-size:15px}
.tiers-foot a{color:var(--accent);font-weight:500}
.tiers-foot a:hover{text-decoration:underline}
.tiers-rev{margin:14px auto 0;max-width:600px;color:var(--ink-2);font-size:14px;line-height:1.55;text-align:center}
.tiers-rev b{color:var(--ink);font-weight:500;white-space:nowrap}

.incl-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,80px);align-items:start}
.incl-note{font-size:13px;line-height:1.5;font-style:italic;margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline)}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.check-list li{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--hairline)}
.check-list .ck{width:20px;height:20px;margin-top:2px;border-radius:50%;border:1px solid var(--accent);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23232118' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat}
.check-list b{display:block;font-size:15.5px;margin-bottom:3px;font-weight:500}
.check-list i{font-size:13.5px;color:var(--ink-2);font-style:normal;line-height:1.45}

.faq{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.acc{border-bottom:1px solid var(--hairline);overflow:hidden}
.acc-q{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font:inherit;font-size:clamp(15.5px,1.6vw,18px);font-weight:400;color:var(--ink);padding:24px 8px;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .3s}
.acc-q:hover{color:var(--accent-ink)}
.acc-num{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--accent);margin-right:14px}
.acc-ic{position:relative;width:15px;height:15px;flex:0 0 auto}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;background:var(--accent);border-radius:2px;transition:transform .35s var(--ease)}
.acc-ic::before{top:7px;left:0;width:15px;height:1.5px}
.acc-ic::after{left:7px;top:0;width:1.5px;height:15px}
.acc.open .acc-ic::after{transform:scaleY(0)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-soft)}
.acc-a>*{overflow:hidden;min-height:0}
[data-acc].open .acc-a{grid-template-rows:1fr}
.acc-a-inner{padding:0 8px 26px;font-size:15px;line-height:1.65;color:var(--ink-2);transition:padding-bottom .5s var(--ease-soft)}
[data-acc]:not(.open) .acc-a-inner{padding-bottom:0}
.acc-a-inner ul{margin:10px 0 0;padding-left:20px}
.acc-a-inner li{margin-bottom:7px}
.acc-a-inner strong{color:var(--ink);font-weight:500}

@media(max-width:980px){.tier.featured .tier-h{padding-right:130px}}
@media(max-width:860px){.incl-grid{grid-template-columns:1fr}}
@media(max-width:680px){
  .tiers{grid-template-columns:1fr}
  .tier{border-right:0;border-bottom:1px solid var(--hairline)}
  .tier:last-child{border-bottom:0}
  .tier.featured{order:-1}
  /* на мобильных бейдж в потоке, над текстом — без наезда */
  .tier.featured .tier-badge{position:static;display:inline-block;margin-bottom:16px}
  .tier.featured .tier-h{padding-right:0}
}


/* ============================================================
   Стили страницы: Контакты (contacts)
   ============================================================ */
.c-wrap{min-height:100svh;display:flex;align-items:center;padding:clamp(120px,14vh,168px) 0 clamp(56px,7vh,84px)}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.c-left .display{margin-top:16px}
.c-cards{display:flex;flex-direction:column;margin-top:40px;max-width:440px;border-top:1px solid var(--hairline)}
.c-card{display:flex;align-items:center;gap:16px;padding:18px 4px;border-bottom:1px solid var(--hairline);transition:padding-left .3s var(--ease)}
.c-card:hover{padding-left:12px}
.c-ic{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;border:1px solid var(--hairline)}
.c-ic svg{width:20px;height:20px;color:var(--accent)}
.c-meta{display:flex;flex-direction:column;flex:1}
.c-meta b{font-family:var(--font-display);font-weight:400;font-size:17px}
.c-meta i{font-size:13px;color:var(--ink-2);font-style:normal;margin-top:2px}
.c-arr{color:var(--ink-3);transition:transform .3s,color .3s}
.c-card:hover .c-arr{color:var(--accent);transform:translate(2px,-2px)}
.c-loc{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:13.5px;color:var(--ink-2)}
.c-loc svg{color:var(--accent);flex:0 0 auto}

.c-form{padding:clamp(28px,3.4vw,42px);border:1px solid var(--hairline);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.c-form h2{font-family:var(--font-display);font-size:26px;font-weight:380}
.c-form-sub{font-size:14px;margin:8px 0 28px}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.field{position:relative;margin-bottom:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--tint);border:1px solid var(--hairline);border-radius:var(--radius);padding:20px 16px 8px;outline:none;transition:border-color .25s,background .25s;resize:none}
.field textarea{padding-top:24px;min-height:90px}
.field select{padding-top:20px;padding-bottom:8px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23232118' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field select option{background:var(--bg-2);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:rgba(10, 10, 10,0.05)}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#d8654f}
.field label{position:absolute;left:16px;top:17px;font-size:15px;color:var(--ink-3);pointer-events:none;transition:all .2s var(--ease-soft);transform-origin:left}
.field label.lbl-static,.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field select:focus+label,.field select:valid+label{top:8px;font-size:10.5px;color:var(--accent);font-weight:500;letter-spacing:0.06em;text-transform:uppercase}

/* consent checkbox */
.c-consent{display:flex;align-items:flex-start;gap:11px;margin:4px 0 18px;cursor:pointer;font-size:13px;line-height:1.45;color:var(--ink-2);user-select:none}
.c-consent input{position:absolute;opacity:0;width:0;height:0}
.c-consent-box{flex:0 0 auto;width:20px;height:20px;margin-top:1px;display:grid;place-items:center;border:1px solid var(--hairline);border-radius:6px;background:var(--tint);transition:border-color .2s,background .2s}
.c-consent-box svg{width:14px;height:14px;color:var(--bg);opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.c-consent input:checked+.c-consent-box{background:var(--accent);border-color:var(--accent)}
.c-consent input:checked+.c-consent-box svg{opacity:1;transform:scale(1)}
.c-consent input:focus-visible+.c-consent-box{outline:2px solid var(--accent);outline-offset:2px}
.c-consent.invalid .c-consent-box{border-color:#d8654f}
.c-consent-txt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.c-submit{width:100%;justify-content:center;margin-top:8px;position:relative}
.c-submit[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed}
.c-submit .spin{display:none;width:18px;height:18px;border:2px solid rgba(255,255,229,0.32);border-top-color:var(--bg);border-radius:50%;animation:spin .7s linear infinite}
.c-submit.loading{pointer-events:none;opacity:.92}
.c-submit.loading .ic{display:none}
.c-submit.loading .spin{display:block}
.c-submit.loading .lbl::after{content:'';display:inline-block;text-align:left;width:1em;animation:dots 1.4s steps(1,end) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}
.c-form.sent .c-submit{display:none}
.c-ok{display:none;align-items:center;gap:12px;margin-top:8px;padding:17px 18px;border:1px solid rgba(10, 10, 10,0.4);border-radius:var(--radius);background:rgba(10, 10, 10,0.08);color:var(--accent-ink);font-size:14px}
.c-ok svg{color:var(--accent);flex:0 0 auto}
.c-form.sent .c-ok{display:flex;animation:okIn .5s var(--ease)}
@keyframes okIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.c-fine{font-size:11.5px;margin:18px 0 0;line-height:1.45}
@media(max-width:900px){.c-grid{grid-template-columns:1fr;gap:40px}.c-cards{max-width:none}}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

/* ============================================================
   Контакты: премиальные акценты и микро-делайт
   ============================================================ */
.c-form { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .c-form::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg);
    pointer-events: none; box-shadow: 0 0 0 1px rgba(10, 10, 10,0.14);
  }
}
/* иконка контакта заливается золотом при наведении */
.c-ic { position: relative; overflow: hidden; }
.c-ic svg { position: relative; z-index: 1; transition: color .35s var(--ease); }
.c-ic::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 0; transform: scale(.55); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
/* подчёркивание значения контакта */
.c-meta i { align-self: flex-start; position: relative; }
.c-meta i::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .c-card:hover .c-ic::before { opacity: 1; transform: scale(1); }
  .c-card:hover .c-ic svg { color: var(--bg); }
  .c-card:hover .c-meta i::after { transform: scaleX(1); }
}
/* фокус поля — мягкое золотое свечение */
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(10, 10, 10,0.12);
}
/* бумажный самолётик в сообщении об успехе */
.ok-plane { display: inline-flex; color: var(--accent); position: relative; flex: 0 0 auto; }
.c-form.sent .ok-plane svg { animation: planeFly .9s var(--ease) .1s both; }
.c-form.sent .ok-plane::before {
  content: ""; position: absolute; top: 50%; right: 100%; width: 26px; height: 1px; margin-right: 4px;
  background: linear-gradient(90deg, transparent, var(--accent));
  transform-origin: right center; animation: planeTrail .9s var(--ease) .1s both;
}
@keyframes planeFly {
  0%   { transform: translate(-22px, 12px) rotate(-18deg); opacity: 0; }
  60%  { transform: translate(2px, -2px) rotate(4deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes planeTrail {
  0%   { transform: scaleX(0); opacity: 0; }
  55%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .c-form.sent .ok-plane svg, .c-form.sent .ok-plane::before { animation: none; }
}


/* ============================================================
   Стили страницы: Политика (legal)
   ============================================================ */
.legal-wrap{padding:clamp(124px,14vh,168px) 0 clamp(48px,6vh,72px)}
.legal{max-width:820px}
.legal .display{font-size:clamp(32px,5vw,52px);margin-top:14px}
.legal h2{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,2.4vw,26px);margin:42px 0 14px;color:var(--ink)}
.legal p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{font-size:15px;line-height:1.7;color:var(--ink-2);margin-bottom:6px}
.legal b{color:var(--ink);font-weight:500}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-back{margin-top:44px;padding-top:24px;border-top:1px solid var(--hairline)}

/* ============================================================
   Микро-анимации и hover-полировка (только transform/opacity/цвет)
   Скоупим под устройства с настоящим ховером, чтобы не «залипало» на тач
   ============================================================ */
.do-card { position:relative; transition:background .5s var(--ease); }
.do-card::before {
  content:""; position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--ease);
}
.do-card h3, .do-n { transition:color .4s var(--ease), transform .5s var(--ease); }

.tier { transition:transform .55s var(--ease), box-shadow .55s var(--ease), background .5s var(--ease); }

@media (hover:hover) {
  .do-card:hover { background:var(--tint); }
  .do-card:hover::before { transform:scaleX(1); }
  .do-card:hover .do-n { transform:translateY(-2px); color:var(--accent-2); }

  .tier:hover { transform:translateY(-6px); box-shadow:0 24px 60px -28px rgba(10, 10, 10,.12); }
  .tier:not(.featured):hover { background:linear-gradient(180deg,var(--tint),transparent); }

  .btn-primary:hover { box-shadow:0 10px 30px -10px rgba(10, 10, 10,.5); }
  .c-card:hover .c-ic { border-color:var(--accent); transform:scale(1.06); }
}
.c-ic { transition:border-color .35s var(--ease), transform .45s var(--ease); }

/* ============================================================
   Премиальные акценты: золотое мерцание на курсивных словах
   + мягкое свечение выделенной карточки цены
   Только при разрешённой анимации (reduced-motion отключает)
   ============================================================ */
/* мерцание и свечения убраны — спокойные сплошные акценты (японский минимализм) */
.display em, .h-section em { color: var(--accent-ink); }

/* ============================================================
   Цены: интерактивный чек-лист «Что входит» + микро-делайт
   ============================================================ */
.check-list li {
  border-radius: 8px;
  transition: background .4s var(--ease), padding-left .4s var(--ease),
              opacity 1s var(--ease-soft), transform 1.2s var(--ease), filter .9s var(--ease-soft);
}
.check-list .ck { transition: transform .4s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease); }
.price b { display: inline-block; transition: transform .55s var(--ease); transform-origin: left center; }

@media (hover: hover) {
  .check-list li:hover { background: var(--tint); padding-left: 14px; }
  .check-list li:hover .ck {
    transform: scale(1.15); border-color: var(--accent-2);
    box-shadow: 0 0 0 5px rgba(10, 10, 10,0.12);
  }
  .check-list li:hover b { color: var(--accent-ink); }
  .tier:hover .price b { transform: scale(1.05); }
  .tier-btn { transition: transform .5s var(--ease); }
  .tier:hover .tier-btn { transform: translateY(-2px); }
}
.check-list b { transition: color .35s var(--ease); }

/* ============================================================
   Hero: 3D перспективная золотая сетка (ощущение глубины)
   ============================================================ */
/* 3D-сетка убрана — пустое пространство вместо «техно»-декора */
.hero-grid { display: none; }
.hero-grid-disabled {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  z-index: -1; pointer-events: none; overflow: hidden;
  perspective: 360px; perspective-origin: 50% 0%;
  transition: perspective-origin .4s var(--ease-soft);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 32%, #000 60%, transparent 94%);
          mask-image: linear-gradient(to top, transparent 0%, #000 32%, #000 60%, transparent 94%);
}
.hero-grid-plane {
  position: absolute; left: -50%; right: -50%; top: -10%; bottom: 0; width: 200%;
  background-image:
    repeating-linear-gradient(to right,  rgba(10, 10, 10,0.28) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, rgba(10, 10, 10,0.26) 0 1px, transparent 1px 60px);
  transform-origin: 50% 100%;
  transform: rotateX(64deg);
  will-change: background-position;
}
/* свечение на линии горизонта */
.hero-grid::before {
  content: ""; position: absolute; left: 0; right: 0; top: 26%; height: 150px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(10, 10, 10,0.20), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-grid-plane { animation: gridFlow 5.5s linear infinite; }
  @keyframes gridFlow { from { background-position: 0 0; } to { background-position: 0 60px; } }
}
@media (max-width: 640px) {
  /* на телефоне сетка крупнее и выше — заметна под контентом */
  .hero-grid { height: 56%; perspective: 280px; }
  .hero-grid-plane {
    background-image:
      repeating-linear-gradient(to right,  rgba(10, 10, 10,0.30) 0 1px, transparent 1px 48px),
      repeating-linear-gradient(to bottom, rgba(10, 10, 10,0.28) 0 1px, transparent 1px 48px);
    transform: rotateX(68deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes gridFlow { from { background-position: 0 0; } to { background-position: 0 48px; } }
  }
}

/* ============================================================
   Hero: мягкий золотой ореол за заголовком («дышит»)
   ============================================================ */
/* ореол за заголовком убран — спокойный фон */
.hero::before { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: heroGlow 10s ease-in-out infinite alternate; }
  @keyframes heroGlow {
    from { transform: translate(0,0) scale(1);        opacity: .65; }
    to   { transform: translate(46px,-22px) scale(1.18); opacity: 1; }
  }
}

/* Fix: мерцание через background-clip:text ломает курсив внутри пословной
   анимации (текст в дочерних span). Там оставляем сплошное золото. */
[data-anim="words"] em {
  background: none;
  -webkit-text-fill-color: var(--accent-ink);
  color: var(--accent-ink);
  animation: none;
}

/* ============================================================
   Мобильная полировка (основной трафик — телефоны)
   ============================================================ */
@media (max-width: 640px) {
  /* ── Hero ──────────────────────────────────────────── */
  .hero { padding-top: 116px; padding-bottom: 52px; }
  .hero-meta { flex-wrap: wrap; gap: 22px 40px; }
  .scroll-hint { display: none; }

  /* ── CTA-кнопки во всю ширину ──────────────────────── */
  .hero-cta { width: 100%; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; padding-top: 16px; padding-bottom: 16px; }

  /* ── Карточки услуг: золотой акцент всегда виден ───── */
  .do-card { padding: 24px 6px 26px 20px; }
  .do-card::before {
    left: 0; top: 16px; bottom: 16px; height: auto; width: 2px;
    transform: none; border-radius: 2px;
    background: linear-gradient(var(--accent), var(--accent-2));
  }
  .do-n { font-size: 15px; }
  .do-card h3 { margin-top: 14px; }

  /* ── Портфолио: 1 колонка, пропорции 16/9 ──────────── */
  .gallery { grid-template-columns: 1fr; gap: 32px; }
  .m-frame { aspect-ratio: 16/9; }
  .m-meta { padding-top: 14px; gap: 12px; }
  /* название не переносится на несколько строк */
  .m-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
  .m-txt i { margin-top: 3px; }
  /* кнопка «Хочу так же» под заголовком секции */
  .work-head .btn { align-self: flex-start; width: 100%; justify-content: center; }

  /* ── Section label ──────────────────────────────────── */
  .section-label { margin-bottom: 26px; }

  /* ── Форма: кнопка disabled заметнее ───────────────── */
  .c-submit[disabled] { opacity: .36; }
}

/* ============================================================
   Плёночное зерно — тончайшая премиальная текстура по всему сайту
   ============================================================ */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: 0.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ============================================================
   Японская философия — Ma (間), Fukinsei (不均整), Seijaku (静寂),
   Wabi-sabi и одна киноварь 朱 (печать-hanko, эхо кружка логотипа)
   ============================================================ */
:root { --seal: #b7352d; }   /* 朱 — единственный цветовой акцент на всём сайте */
/* 円相 Ensō — круг одним движением кисти, сквозная подпись сайта */
:root { --enso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='19' fill='none' stroke='%23b7352d' stroke-width='2.6' stroke-linecap='round' stroke-dasharray='103 40' transform='rotate(-42 24 24)'/%3E%3C/svg%3E"); }

/* ---- Ma: больше воздуха между секциями и вокруг текста ----
   (только от планшета и выше — мобильные отступы уже выверены) */
@media (min-width: 641px) {
  .block { padding: clamp(84px, 12vw, 176px) 0 0; }
  .section-label { margin-bottom: clamp(44px, 5.5vw, 72px); }
  .intro-grid { gap: clamp(40px, 8vw, 132px); }
  .hero-lede { margin-top: clamp(30px, 4vw, 46px); }
  .do-grid { margin-top: clamp(56px, 8vw, 104px); }
}

/* ---- Seijaku / тишина в типографике: легче и просторнее ---- */
.display   { font-weight: 300; letter-spacing: -0.02em; }
.h-section { font-weight: 300; letter-spacing: -0.008em; line-height: 1.12; }
.lede      { line-height: 1.8; font-weight: 300; }
.muted     { line-height: 1.7; }
.eyebrow   { letter-spacing: 0.28em; }

/* ---- Fukinsei: намеренная асимметрия композиции ---- */
/* ступенчатый сдвиг средней строки заголовка hero */
.hero-title .line:nth-child(2) { padding-left: clamp(26px, 7vw, 116px); }
/* правая колонка вступления чуть опущена — живое равновесие */
@media (min-width: 901px) {
  .intro-grid { grid-template-columns: 1.25fr 1fr; }
  .intro-grid > div:last-child { margin-top: clamp(10px, 3.5vw, 54px); }
}

/* ---- Tate-gaki: вертикальные номера секций (朱-тик сверху) ---- */
.section-label .num {
  writing-mode: vertical-rl; text-orientation: upright;
  font-style: normal; font-size: 15px; line-height: 1;
  letter-spacing: 0.12em; padding: 8px 0 0;
  position: relative;
}
.section-label .num::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--seal);   /* киноварная точка-печать над номером */
}

/* ---- Hanko: киноварное «эхо логотипа» — подпись в подвале ---- */
.footer .brand { position: relative; }
.footer .brand::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 22px; margin-left: 13px;
  background: var(--enso) center / contain no-repeat; opacity: .7;
}

/* 円相 Ensō — тихий круг над подсказкой скролла (эхо подписи) */
.scroll-hint::before {
  content: ""; width: 26px; height: 26px; margin-bottom: 4px;
  background: var(--enso) center / contain no-repeat; opacity: .32;
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.045; }
}

/* ============================================================
   間 Ma v2 — углублённый воздух и спокойный вертикальный ритм
   (планшет и выше; мобильные отступы остаются выверенными)
   ============================================================ */
@media (min-width: 641px) {
  /* шире боковые поля — содержимое дышит внутри кадра */
  .hero { padding: clamp(132px, 17vh, 196px) 0 clamp(84px, 11vh, 128px); }
  .hero-title { margin-top: clamp(26px, 4vw, 44px); }
  .hero-lede  { margin-top: clamp(34px, 4.5vw, 52px); }
  .hero-cta   { margin-top: clamp(38px, 5vw, 58px); }
  .hero-meta  { margin-top: clamp(56px, 8vh, 100px); padding-top: clamp(34px, 4.5vh, 50px); gap: clamp(40px, 6vw, 108px); }

  /* больше тишины между секциями */
  .block { padding-top: clamp(104px, 14vw, 212px); }

  /* CTA-блок и подвал — просторнее */
  .cta { padding: clamp(64px, 9vw, 124px) var(--gutter); }
  .footer { margin-top: clamp(120px, 16vw, 208px); padding: clamp(48px, 6vw, 68px) 0 clamp(54px, 6vw, 76px); }
}

/* на больших экранах — заметно больше воздуха по бокам */
@media (min-width: 1280px) { :root { --gutter: 56px; } }
@media (min-width: 1600px) { :root { --gutter: 80px; } }

/* контролируемая длина строки — текст в окружении пустоты (Ma) */
.lede { max-width: 62ch; }
.do-card p, .acc-a-inner, .legal p, .legal li { max-width: 64ch; }

/* ---------- Cookie notice ---------- */
.cookie-note {
  position: fixed; left: 24px; bottom: 24px; z-index: 900;
  max-width: 420px;
  padding: 26px 28px 24px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -18px rgba(10, 10, 10, 0.28);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.cookie-note.is-in { opacity: 1; transform: none; }
.cookie-note::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0;
  height: 1px; background: linear-gradient(90deg, var(--accent), transparent);
}
.cookie-note .cookie-eyebrow {
  display: block; margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}
.cookie-note .cookie-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 400; line-height: 1.15; color: var(--ink);
}
.cookie-note .cookie-title em { font-style: italic; color: var(--accent-ink); font-weight: 500; }
.cookie-note p {
  margin: 0 0 20px; font-size: 14px; line-height: 1.6;
  color: var(--ink-2); font-weight: 300; letter-spacing: 0;
}
.cookie-note .cookie-link {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--accent);
  transition: color .3s, border-color .3s;
}
.cookie-note .cookie-link:hover { color: var(--accent); border-color: var(--ink); }
.cookie-note .cookie-actions { display: flex; align-items: center; gap: 20px; }
.cookie-note .btn { padding: 12px 24px; font-size: 13.5px; }
.cookie-note .cookie-more {
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color .3s, border-color .3s;
}
.cookie-note .cookie-more:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 560px) {
  .cookie-note { left: 16px; right: 16px; bottom: 16px; max-width: none; padding: 22px 22px 20px; }
  .cookie-note .cookie-actions { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .cookie-note .btn { justify-content: center; }
}

/* ---------- переходы между страницами (cross-document View Transitions) ----------
   Страница не мигает белым при навигации, а плавно перетекает в следующую.
   Работает в Chrome 126+ и Safari 18.2+; в остальных браузерах остаётся
   JS-шторка .page-curtain из site.js. */
@view-transition { navigation: auto; }

/* пилюля-навигации остаётся на месте, пока контент под ней перетекает */
.navwrap { view-transition-name: site-nav; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-leave .26s ease both; }
  ::view-transition-new(root) { animation: vt-enter .36s ease .04s both; }
}
@keyframes vt-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}