/* Главная: манифест, стопка ролей, причины, Faust, пути */
.manifest { padding: clamp(90px, 18vh, 220px) var(--gutter); position: relative; z-index: 2; overflow: hidden; }
.manifest > p, .manifest > .sig { position: relative; z-index: 2; }
.mf-bg { position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; }
.mf-bg img { position: absolute; right: 0; top: 0; width: min(62vw, 980px); height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.5); opacity: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); will-change: opacity, transform; }
.mf-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,.6) 0 1.1px, transparent 1.6px) 0 0 / 6px 6px; opacity: .55; }
.manifest p { font-family: var(--classic); font-size: clamp(2rem, 5.2vw, 5.4rem); line-height: 1.06; letter-spacing: -.01em; max-width: 17em; }
.manifest .w { opacity: .16; transition: opacity .45s ease; }
.manifest .w.on { opacity: 1; }
.manifest .hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--spray) 80%, transparent) 58% 90%, transparent 90%); }
.manifest .sig { margin-top: 38px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* стопка ролей: панели накрывают друг друга */
.rolestack { position: relative; z-index: 2; }
.role { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; padding: 0 var(--gutter); }
.role-in { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.role .lab { opacity: .7; margin-bottom: 18px; }
.role h2 { font-family: var(--classic); font-weight: 400; font-size: clamp(3rem, 7.4vw, 7.6rem); line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.role .lead { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; margin: 22px 0 20px; max-width: 30em; opacity: .9; }
.role .facts { list-style: none; display: grid; gap: 10px; margin: 0 0 28px; max-width: 32em; }
.role .facts li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.role .facts li::before { content: ''; flex: none; width: 8px; height: 8px; background: currentColor; transform: translateY(-1px) rotate(45deg); opacity: .8; }
.rvis { position: relative; height: min(64vh, 560px); }
.r-gold { background: #0a0604; color: var(--paper); }
.r-arb { background: var(--paper); color: var(--asphalt); }
.r-law { background: #0c0606; color: var(--paper); }
.r-faust { background: #050303; color: var(--paper); }
.r-gold .lab { color: var(--gold); }
.r-gold .btn { border-color: var(--gold); }

/* золото: две картины в золотом тоне */
.gold-vis .p1, .gold-vis .p2 { position: absolute; box-shadow: 0 28px 70px rgba(0,0,0,.7); overflow: hidden; background: #1a1409; }
.gold-vis .p1 { left: 0; top: 2%; width: 66%; height: 78%; transform: rotate(-2deg); }
.gold-vis .p2 { right: 0; bottom: 0; width: 46%; height: 52%; transform: rotate(2.4deg); }
.gold-vis img { width: 100%; height: 118%; object-fit: cover; display: block; filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.95) contrast(1.15); }
.gold-vis::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 30% 20%, rgba(255,220,130,.22), transparent 55%); mix-blend-mode: screen; }
.gold-vis .sh { position: absolute; z-index: 2; left: 4%; bottom: 4%; font-family: var(--street); font-size: clamp(2.2rem, 5vw, 5rem); color: var(--gold); transform: rotate(-4deg); line-height: .9; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
/* арбитраж: картина проясняется */
.arb-vis .big { position: absolute; inset: 0 0 0 8%; box-shadow: 0 30px 70px rgba(0,0,0,.4); overflow: hidden; background: var(--paper); }
.arb-vis .big img { width: 100%; height: 118%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.5) brightness(1.08); mix-blend-mode: multiply; }
.arb-vis .big::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,.7) 0 1.1px, transparent 1.5px) 0 0 / 5px 5px; mix-blend-mode: multiply; opacity: var(--ht, .5); pointer-events: none; }
.arb-vis .tagc { position: absolute; left: 0; top: 10%; z-index: 2; background: var(--spray); color: var(--paper); padding: 8px 12px; transform: rotate(-3deg); }
.arb-vis .sm { position: absolute; left: 0; bottom: 6%; width: 34%; height: 34%; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.4); transform: rotate(-3deg); z-index: 2; background: var(--paper); }
.arb-vis .sm img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.4); }
/* право: правки в договоре */
.law-vis .doc { position: absolute; inset: 4% 0 4% 6%; background: var(--paper); color: var(--asphalt); padding: clamp(18px, 2.4vw, 36px); box-shadow: 0 30px 70px rgba(0,0,0,.7); transform: rotate(1.2deg); font-family: var(--classic); font-size: clamp(.95rem, 1.35vw, 1.25rem); line-height: 1.55; overflow: hidden; }
.law-vis .doc h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #77776f; margin-bottom: 14px; font-weight: 400; }
.law-vis .del { position: relative; color: #77776f; } .law-vis .del::after { content: ''; position: absolute; left: 0; top: 54%; height: 2px; width: var(--w, 0%); background: var(--spray); }
.law-vis .ins { color: var(--spray); background: rgba(158,29,42,.08); opacity: 0; }
.law-vis .note { position: absolute; right: 4%; bottom: 6%; font-family: var(--hand); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--spray); transform: rotate(-4deg); opacity: 0; }

/* причины */
.why { padding: clamp(90px, 16vh, 190px) var(--gutter); position: relative; z-index: 2; }
.why h2, .paths h2, .ft h2 { font-family: var(--classic); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 6.4rem); line-height: .94; text-transform: uppercase; max-width: 12em; margin-bottom: clamp(36px, 6vh, 70px); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.why-card { background: var(--paper); color: var(--asphalt); padding: 26px 26px 30px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: transform .6s var(--ease), background .4s, color .4s; }
.why-card:nth-child(2) { margin-top: 44px; } .why-card:nth-child(5) { margin-top: 44px; }
.why-card:hover { transform: translateY(-8px) rotate(-.6deg); background: var(--spray); color: var(--paper); }
.why-card h3, .why-card p, .why-card .no { position: relative; z-index: 2; }
.why-card .wimg { position: absolute; right: -8%; bottom: -8%; width: 60%; height: 62%; z-index: 1; opacity: .3; transform: rotate(5deg); transition: opacity .6s, transform .9s var(--ease); overflow: hidden; background: var(--paper); clip-path: polygon(0 6%, 12% 0, 30% 5%, 52% 0, 76% 6%, 100% 0, 100% 100%, 0 100%); }
.why-card .wimg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.5); mix-blend-mode: multiply; transition: filter .6s; }
.why-card:hover .wimg { opacity: .95; transform: rotate(0) scale(1.07); }
.why-card:hover .wimg img { filter: none; mix-blend-mode: normal; }
.why-card h3 { font-family: var(--classic); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.05; }
.why-card p { margin-top: 18px; font-size: 15px; line-height: 1.55; opacity: .85; }
.why-card .no { font-family: var(--street); color: var(--spray); font-size: 1.6rem; transform: rotate(-4deg); display: inline-block; transition: color .4s; }
.why-card:hover .no { color: var(--paper); }

/* Faust на главной */
.ft { background: #050303; color: var(--paper); padding: clamp(70px, 12vh, 150px) var(--gutter); position: relative; z-index: 2; --accent: var(--violet); }
.ft > .key { margin-bottom: clamp(36px, 7vh, 80px); background-image: var(--key-light); opacity: .8; }
.ft-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 36px; }
.ft-head h2 { margin-bottom: 0; font-size: clamp(3.4rem, 10vw, 10rem); }
.ft .lede { font-family: var(--hand); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.5rem); color: var(--accent); transform: rotate(-1.5deg); transition: color .4s; }
.ft .copy { color: #b9b9b4; max-width: 30em; margin-top: 10px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.bento .m-term { grid-column: span 8; grid-row: span 2; }
.bento .m-rooms { grid-column: span 4; } .bento .m-num { grid-column: span 4; } .bento .m-mode { grid-column: span 5; } .bento .m-cta { grid-column: span 7; }
.m-mode p { color: #8d8d92; margin-top: 14px; font-size: 14px; }
.m-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--accent); color: var(--asphalt); border-color: var(--accent); transition: background .4s; }
.m-cta h3 { font-family: var(--classic); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 3.2rem); line-height: 1; text-transform: uppercase; }
.m-cta .mono { border-bottom: 2px solid var(--asphalt); padding-bottom: 4px; white-space: nowrap; }

/* пути работы */
.paths { padding: clamp(90px, 16vh, 190px) var(--gutter); position: relative; z-index: 2; }
.path-list { border-top: 2px solid var(--onwall); }
.path { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 24px 48px; align-items: baseline; padding: 34px 0; border-bottom: 2px solid var(--onwall); transition: padding .5s var(--ease), background .4s, color .4s; }
.path:hover { padding-left: 22px; padding-right: 22px; background: var(--paper); color: var(--asphalt); }
.path .go { position: relative; z-index: 2; }
.role h2.imgfill { font-size: clamp(3.4rem, 9vw, 9.4rem); }
.path h3 { font-family: var(--classic); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1; text-transform: uppercase; }
.path p { max-width: 34em; opacity: .85; }
.path .go { font-family: var(--hand); font-weight: 700; font-size: 2rem; color: var(--spray); white-space: nowrap; }

@media (max-width: 860px) {
  .role { height: auto; min-height: 100vh; padding-top: 70px; padding-bottom: 50px; position: relative; }
  .role-in, .ft-head { grid-template-columns: 1fr; } .rvis { height: 340px; }
  .why-grid { grid-template-columns: 1fr; } .why-card:nth-child(n) { margin-top: 0; min-height: 0; }
  .bento > .mod { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .path { grid-template-columns: 1fr; gap: 10px; }
}