:root{--paper:#eeebe4;--ink:#211e1a;--line:#c6bdb0;--muted:#62584d;--accent:#815d3c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.wrap{width:min(1280px,calc(100% - 100px));margin:auto}.top{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px;border-bottom:1px solid var(--line);font-size:14px}.brand img{display:block;width:110px;height:auto}.label{letter-spacing:.16em;font-size:11px;font-weight:700}.label{color:var(--muted);margin:0 0 26px}header.top{justify-content:center}.top a:hover{color:var(--accent)}.intro{padding-block:25px}h1,h2,h3,p,figure{margin:0}h1,h2{font-family:inherit;font-weight:550;letter-spacing:-.045em;line-height:1.08}h1{font-size:clamp(38px,5.1vw,78px)}h2{font-size:clamp(32px,4vw,56px);margin-bottom:32px}.lead{max-width:390px;margin:27px 0;color:var(--muted);font-size:17px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--ink);color:white;padding:15px 20px}.button:hover{background:#4f3c2e}.block{padding-block:72px;border-top:1px solid var(--line)}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.services article{padding:24px 16px 12px 0;border-top:1px solid var(--line)}h3{font-size:22px;margin:0 0 9px}.services p,.contact p{max-width:360px;color:var(--muted)}.process{background:#292520;color:var(--paper)}.process .label,.process p{color:#d4c9ba}.process .block{border:0}.split{display:grid;grid-template-columns:1fr 1fr;gap:40px}.process ol{margin:0;padding-left:2em}.process li{padding:13px 0 15px 10px;border-bottom:1px solid #665a4b}.process strong{font-size:19px}.contact-note{margin-top:16px}footer.top{border-top:1px solid var(--line);border-bottom:0}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.top{min-height:64px;gap:12px}.brand img{width:85px}.split{grid-template-columns:1fr;gap:24px}.intro{padding-block:12px}.block{padding-block:45px}.services{grid-template-columns:1fr;gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero {
  color: #fff;
  background: #352d26;
  background-image: linear-gradient(90deg, rgba(23, 19, 15, .82), rgba(23, 19, 15, .52) 42%, transparent 78%), url("apartment-render-ufa.jpg");
  background-position: center;
  background-size: cover;
}
.hero-content {
  display: grid;
  align-content: center;
  position: relative;
  min-height: clamp(520px, 49vw, 740px);
  padding-block: 64px;
}
.hero .label, .hero .lead { color: #f3ebe2; }
.hero .button { background: #f1ece3; color: var(--ink); }
.hero .button:hover { background: #ded3c3; }
.process {
  background-image: linear-gradient(90deg, rgba(25, 20, 17, .59), rgba(25, 20, 17, .76)), url("process-renovation.jpg");
  background-position: center;
  background-size: cover;
}
.process p { color: #f2ece4; }
footer.top { justify-content: flex-end; }
@media (max-width: 760px) {
  .top { gap: 8px; }
  footer.top a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand img { width: clamp(68px, 20vw, 85px); }
  .process {
    background-image: linear-gradient(rgba(25, 20, 17, .68), rgba(25, 20, 17, .83)), url("process-renovation.jpg");
    background-position: 23% center;
  }
  .hero {
    background-image: linear-gradient(90deg, rgba(23, 19, 15, .84), rgba(23, 19, 15, .58)), url("apartment-render-ufa.jpg");
    background-position: 72% center;
  }
  .hero-content { min-height: 440px; padding-block: 36px; }
  .intro { padding: 0; }
  h1 { font-size: clamp(30px, 9vw, 50px); }
  h2 { margin-bottom: 20px; }
  .lead { margin-block: 16px 20px; font-size: 16px; }
  .process h2 { margin-bottom: 0; }
  .process .split { gap: 12px; }
  .process ol { padding-left: 1.5em; }
}


.hero { position: relative; }
.stage-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.renovation-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.renovation-video.is-visible { opacity: 1; }
.hero:has(.renovation-video.is-visible) .stage-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 19, 15, .82), rgba(23, 19, 15, .52) 42%, transparent 78%);
}
@media (max-width: 760px) {
  .renovation-video { object-position: 72% center; }
  .hero:has(.renovation-video.is-visible) .stage-backdrop::after {
    background: linear-gradient(90deg, rgba(23, 19, 15, .84), rgba(23, 19, 15, .58));
  }
}