/* Первый экран: интерьер уходит к краю страницы, как в прототипе. */
.header{position:relative;z-index:3;border-bottom:0}
.hero{position:relative;display:block;min-height:570px;padding:66px 0 65px;isolation:isolate}
.hero-copy{position:relative;z-index:2;width:49%;max-width:600px}
.hero h1{font-size:clamp(40px,4.1vw,59px)}
.studio.finished-portrait{position:absolute;z-index:0;top:-125px;right:calc((100% - 100vw)/2);width:min(65vw,900px);height:710px;max-width:none;min-height:0;padding:0;margin:0;pointer-events:none}
.finished-portrait .portrait{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 11%,#000 29%),linear-gradient(174deg,#000 0%,#000 76%,rgba(0,0,0,.75) 83%,transparent 97%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 11%,#000 29%),linear-gradient(174deg,#000 0%,#000 76%,rgba(0,0,0,.75) 83%,transparent 97%);-webkit-mask-composite:source-in}
.finished-portrait .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.12);transform-origin:57% 51%}
#rates{padding-top:42px}
@media(min-width:1500px){.hero{min-height:630px;padding-top:80px}.studio.finished-portrait{height:770px;width:min(65vw,1050px)}}
@media(min-width:761px) and (max-width:1050px){.hero{min-height:530px;padding-top:48px}.hero-copy{width:53%}.hero h1{font-size:43px}.studio.finished-portrait{width:65vw;height:650px;top:-120px}.finished-portrait .portrait{mask-image:linear-gradient(to right,transparent,#000 35%),linear-gradient(174deg,#000 73%,transparent 98%);-webkit-mask-image:linear-gradient(to right,transparent,#000 35%),linear-gradient(174deg,#000 73%,transparent 98%)}}
@media(max-width:760px){.hero{display:flex;flex-direction:column;min-height:0;padding:32px 0 0;gap:0}.hero-copy{width:100%;max-width:none}.hero h1{font-size:clamp(35px,8vw,52px)}.studio.finished-portrait{position:relative;top:auto;right:auto;width:100vw;height:auto;aspect-ratio:1.08;margin:8px calc((100% - 100vw)/2) -12px;align-self:center}.finished-portrait .portrait{mask-image:linear-gradient(to bottom,transparent 0%,#000 15%),linear-gradient(174deg,#000 75%,transparent 99%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 15%),linear-gradient(174deg,#000 75%,transparent 99%)}.finished-portrait .portrait img{transform:scale(1.05);object-position:center 48%}#rates{padding-top:35px}}
body{overflow-x:clip}.header:before{content:'';position:absolute;z-index:-1;inset:0 calc((100% - 100vw)/2) -12px;background:linear-gradient(to bottom,rgba(247,244,237,.98),rgba(247,244,237,.87) 62%,rgba(247,244,237,0));pointer-events:none}.header nav{position:relative}.header nav a{text-shadow:0 0 8px #f7f4ed}@media(max-width:760px){.header:before{display:none}}
/* Мягкий переход по краям без рамки вокруг фотографии. */
@media(min-width:761px){.finished-portrait .portrait{mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.8) 26%,#000 36%),linear-gradient(174deg,#000 0%,#000 72%,rgba(0,0,0,.65) 84%,transparent 98%);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.8) 26%,#000 36%),linear-gradient(174deg,#000 0%,#000 72%,rgba(0,0,0,.65) 84%,transparent 98%)}}
@media(max-width:760px){.hero{padding-top:24px}.studio.finished-portrait{aspect-ratio:1;margin-top:0}.finished-portrait .portrait img{transform:scale(1);object-position:center}.finished-portrait .portrait{mask-image:linear-gradient(to bottom,transparent,#000 18%),linear-gradient(174deg,#000 70%,transparent 99%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%),linear-gradient(174deg,#000 70%,transparent 99%)}}

/* Keep the portrait lettering clear; navigation retains its own text shadow. */
.header:before{display:none}