:root {
  --blue: #0033A0;
  --red: #E1000F;
  --cut: 50%;
  --cut-b: 0%;
  --ink: #111111;
  --paper: #F4F1EA;
  --muted: #6B6B6B;
  --ease: cubic-bezier(.7, 0, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: 'Jost', sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vh, 64px);
  padding: clamp(20px, 3.4vh, 40px) clamp(20px, 4.5vw, 72px);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bar nav { display: flex; gap: clamp(14px, 2vw, 28px); }
.bar a { transition: color .25s; }
.bar a:hover { color: var(--red); }
.bar .brand-link { color: var(--blue); }
.bar .current { color: var(--red); }

/* Разрез слова цветной полосой */
.cut { position: relative; display: inline-block; }
.cut > .t { display: block; }
.cut > .ov {
  position: absolute;
  inset: 0;
  bottom: var(--cut-b);
  color: #FFFFFF;
  background: var(--c);
  transition: clip-path .42s var(--ease) 0s;
}
.cut > .band {
  position: absolute;
  top: var(--cut);
  bottom: var(--cut-b);
  width: 100vw;
  background: var(--c);
  transform: scaleX(0);
  transition: transform .38s var(--ease) .2s;
}
.cut.blue { --c: var(--blue); }
.cut.red { --c: var(--red); }
.cut.r > .ov { clip-path: inset(var(--cut) 0 0 100%); }
.cut.r > .band { left: 100%; transform-origin: 100% 50%; }
.cut.l > .ov { clip-path: inset(var(--cut) 100% 0 0); }
.cut.l > .band { right: 100%; transform-origin: 0 50%; }
.cut.on > .ov { clip-path: inset(var(--cut) 0 0 0); transition-delay: .16s; }
.cut.on > .band { transform: scaleX(1); transition-delay: 0s; }
.cut.intro > .band { animation: bandIn .9s var(--ease) backwards; }
.cut.intro > .ov { animation: cutIn .7s var(--ease) .8s backwards; }

@keyframes bandIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cutIn { from { clip-path: inset(var(--cut) 100% 0 0); } to { clip-path: inset(var(--cut) 0 0 0); } }

.fade { animation: fade .8s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards; }
/* Списки появляются целиком, все пункты одновременно */
.appear { animation: appear .6s ease backwards; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Главная */
.home-main {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(48px, 6vw, 96px) 48px;
}
.logo {
  margin: 0;
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-weight: 700;
  font-size: clamp(56px, 9.2vw, 156px);
  line-height: .86;
  letter-spacing: -.01em;
  color: var(--blue);
}
.logo .line { display: block; }
.logo .cut, .logo .cut > .ov { padding-right: .12em; }

.menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 1.2vh, 14px);
  margin-left: auto;
}
.menu .cut {
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.02;
}
.menu .cut, .menu .cut > .ov { padding-left: .16em; }
/* Курсив со строчными: полоса начинается с середины строчных букв и опускается ниже хвостов j, p, g */
.menu .cut, .dirs .cut, .p-next .cut, .send { --cut: .635em; --cut-b: -.17em; }

/* Проекты */
.proj-main {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  gap: 56px 48px;
  padding-top: clamp(8px, 4vh, 48px);
}
.dirs {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.4vh, 16px);
}
.dirs .cut {
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.04;
}
.dirs .cut, .dirs .cut > .ov { padding-right: .5em; }
.dirs sup {
  font-family: 'Jost', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .1em;
  margin-left: 6px;
}
.plist {
  flex: 3 1 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(18px, 3vh, 34px);
  text-align: right;
}
.pitem { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.plink {
  display: inline-block;
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 74px);
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-align: right;
}
.plink .line { display: block; }
.pitem .cut, .pitem .cut > .ov { padding-left: .14em; }
.meta { font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #555555; }

/* Внутренние страницы: проект, о нас, контакты */
.p-head { display: flex; flex-direction: column; gap: clamp(22px, 4vh, 40px); }
.p-title {
  margin: 0;
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 112px);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--blue);
}
.p-title .line { display: block; }
.p-title .cut, .p-title .cut > .ov { padding-right: .12em; }
.p-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 40px; }
.p-meta div { display: flex; flex-direction: column; gap: 8px; }
/* Контакты: блоки друг под другом */
.p-meta.stack { grid-template-columns: 1fr; gap: 24px; }
.label { font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.value { font-size: 17px; line-height: 1.4; }
a.value { transition: color .25s; }
a.value:hover { color: var(--red); }
.p-desc { margin: 0; max-width: 760px; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.5; }
.p-done { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.p-done .row { display: flex; gap: 20px; align-items: baseline; font-size: 17px; line-height: 1.45; }
.num { flex: 0 0 auto; font-weight: 500; font-size: 12px; letter-spacing: .12em; color: var(--blue); }
.p-next {
  margin-top: auto;
  padding-top: clamp(24px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.p-next .caption { font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.p-next .cut, .send {
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.02;
}
.p-next .cut, .p-next .cut > .ov, .send, .send > .ov { padding-left: .16em; }

/* О нас */
.svc { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 28px); }
.svc-row {
  display: grid;
  grid-template-columns: 40px minmax(180px, 1fr) minmax(220px, 1.4fr);
  gap: 8px 32px;
  align-items: baseline;
}
.svc-name {
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.05;
}
.svc-desc { font-size: 17px; line-height: 1.45; }
.founder { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.founder-name {
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.05;
  color: var(--blue);
  text-transform: uppercase;
}

/* Контакты */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; max-width: 980px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field input, .field textarea {
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  background: #E9E4D8;
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
  outline: none;
  transition: background .25s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { background: #E2E1DC; box-shadow: inset 3px 0 0 var(--blue); }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

@media (max-width: 640px) {
  .svc-row { grid-template-columns: 32px 1fr; }
  .svc-desc { grid-column: 2; }
  .form { grid-template-columns: 1fr; }
}

/* Прелоадер: лягушка на canvas, название с полосой загрузки */
#loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
#loader.gone { display: none; }
#ld-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ld-wrap { position: relative; width: min(1040px, 78vw); display: flex; flex-direction: column; gap: clamp(40px, 9vh, 96px); }
.ld-track {
  height: calc(clamp(56px, 10vw, 160px) + clamp(40px, 5.2vw, 86px) * 1.3 + clamp(66px, 13vw, 210px) / 3.2 * 1.4);
}

.ld-title {
  font-family: 'Bodoni Moda', serif;
  font-variation-settings: 'opsz' 24;
  font-weight: 700;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: .86;
  letter-spacing: -.01em;
  color: var(--blue);
  opacity: 0;
  transition: opacity .5s;
}
.ld-title.ready { opacity: 1; }
.ld-title .line { display: block; }
.ld-cut { position: relative; display: inline-block; padding-right: .12em; }
.ld-cut .t { display: block; }
.ld-cut .ov {
  position: absolute;
  inset: 0;
  padding-right: .12em;
  color: #FFFFFF;
  background: var(--blue);
  clip-path: inset(var(--cut) 100% 0 0);
}
.ld-cut .band {
  position: absolute;
  right: 100%;
  top: var(--cut);
  bottom: 0;
  width: 0;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Шторка перехода */
#wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .52s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Текстура бумаги поверх всего: зерно, волокна, лёгкая виньетка */
#paper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
  pointer-events: none;
  mix-blend-mode: multiply;
}