/* ===================================================================== ARLINE GROUP — единая дизайн-система v8 («espresso, смелее») Раскатывается на ВСЕ страницы: главная (лендинг) + внутренние. Шрифты в : Playfair Display + Jost (+ Prata для совместимости). ===================================================================== */ :root{ --bg:#161310; --panel:#1F1B16; --panel-2:#28231D; --panel-3:#332C24; --brass:#C2724E; --brass-soft:#DDA07E; --cream:#ECE6DA; --muted:#9C9384; --line:rgba(194,163,107,.2); --line-soft:rgba(236,230,218,.07); --shadow:0 30px 80px -30px rgba(0,0,0,.7); --maxw:1360px; --f-d:'Playfair Display',Georgia,serif; --f-disp:'Playfair Display',Georgia,serif; --gold-2:var(--brass); --ease:cubic-bezier(.19,.78,.2,1); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} body{ background:var(--bg);color:var(--cream); font-family:'Jost',system-ui,sans-serif;font-weight:300;line-height:1.6;font-size:17px; overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--f-d);font-weight:500;line-height:1.04;letter-spacing:-.02em} .serif,.disp{font-family:var(--f-d);font-weight:500} em,.it{font-style:italic;color:var(--brass);font-family:var(--f-d);font-weight:500} .muted{color:var(--muted)} ::selection{background:var(--brass);color:#1a1410} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;width:100%} .eyebrow,.lbl{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);font-weight:500;display:inline-flex;align-items:center;gap:14px} .eyebrow::before{content:"";width:40px;height:1px;background:var(--brass);opacity:.7} .lbl{letter-spacing:.24em} .sub{color:var(--muted);font-size:18px;line-height:1.7} .hairline{height:1px;background:var(--line-soft);width:100%} .grain,.curtain{display:none!important} /* ===== BUTTONS (pills) ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px; min-height:60px;padding:0 38px;border-radius:60px; font-family:'Jost',sans-serif;font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase; cursor:pointer;border:1px solid transparent;transition:.5s var(--ease);white-space:nowrap;background:none; } .btn svg{width:17px;height:17px} .btn-brass,.btn-gold{background:var(--brass);color:#1a1410;font-weight:600} .btn-brass:hover,.btn-gold:hover{background:var(--brass-soft);transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(194,114,78,.55)} .btn-ghost,.btn-line{background:transparent;color:var(--cream);border-color:var(--line)} .btn-ghost:hover,.btn-line:hover{border-color:var(--brass);color:var(--brass-soft);background:rgba(194,114,78,.06)} .btn-gold span,.btn-line span,.btn-brass span,.btn-ghost span{display:inline-flex;align-items:center;gap:10px} /* ===== CURSOR ===== */ .cursor{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--brass);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .4s var(--ease),height .4s var(--ease),background .4s,opacity .3s;mix-blend-mode:difference;will-change:transform} .cursor.is-hover{width:74px;height:74px;background:var(--cream)} .cursor.is-hidden{opacity:0} .cur-label{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#1a1410;background:var(--brass);padding:8px 15px;border-radius:40px;white-space:nowrap;opacity:0;transition:opacity .3s var(--ease)} .cur-label.show{opacity:1} @media(hover:none),(max-width:900px){.cursor,.cur-label{display:none}} /* ===== PRELOADER ===== */ .pre{position:fixed;inset:0;z-index:9998;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden} .pre-mark{font-family:var(--f-d);font-size:clamp(40px,9vw,120px);letter-spacing:.02em;color:var(--cream);overflow:hidden;display:flex;gap:.16em} .pre-mark span{display:inline-block;transform:translateY(110%)} .pre-mark b{color:var(--brass);font-weight:500} .pre-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--brass);width:0} .pre.done{transform:translateY(-100%);transition:transform 1.1s var(--ease)} /* ===== NAV (sticky capsule) ===== */ header.nav{position:sticky;top:0;z-index:200;background:rgba(18,15,12,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:.45s var(--ease)} header.nav.scrolled{background:rgba(18,15,12,.86);border-bottom-color:var(--line-soft)} .nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:24px} header.nav.scrolled .nav-inner{min-height:70px} .brand{display:flex;flex-direction:column;line-height:1;flex-shrink:0} .brand .mark{font-family:var(--f-d);font-size:23px;letter-spacing:.06em;color:var(--cream);font-weight:500} .brand .mark b{color:var(--brass);font-weight:500} .brand .tag{font-size:9.5px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;margin-top:6px} .nav-links{display:flex;gap:32px;align-items:center} .nav-links a{font-size:13.5px;letter-spacing:.04em;color:var(--muted);transition:.25s;position:relative;padding:6px 0} .nav-links a:hover,.nav-links a.cur{color:var(--cream)} .nav-links a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--brass);transition:.3s var(--ease)} .nav-links a:hover::after,.nav-links a.cur::after{width:100%} .nav-right{display:flex;align-items:center;gap:22px;flex-shrink:0} .nav-phone{font-size:15px;color:var(--cream);letter-spacing:.03em;white-space:nowrap} .nav-phone span{color:var(--brass)} .nav-right .btn{min-height:48px;padding:0 26px} .burger{display:none;flex-direction:column;gap:5px;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50px;background:transparent;cursor:pointer;flex-shrink:0} .burger span{width:20px;height:1.6px;background:var(--cream);display:block;transition:.3s} /* drawer */ .drawer{position:fixed;inset:0;z-index:190;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 48px;transform:translateY(-100%);transition:transform .6s var(--ease);pointer-events:none} .drawer.open{transform:translateY(0);pointer-events:auto} .drawer a{font-family:var(--f-d);font-size:clamp(26px,5vw,40px);color:var(--cream);padding:10px 0;border-bottom:1px solid var(--line-soft);transition:.25s} .drawer a:hover{color:var(--brass);padding-left:10px} .drawer .dph{font-family:'Jost',sans-serif;font-size:20px;color:var(--brass);border:none;margin-top:24px} .drawer-back{display:none} /* ===== SECTION SCAFFOLD ===== */ section{position:relative;padding:clamp(70px,11vh,120px) 0} .sec{padding:clamp(70px,11vh,120px) 0} .sec.escrow,.escrow{background:var(--panel);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .sec-head{max-width:760px;margin-bottom:clamp(44px,7vh,72px)} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head.center .eyebrow{justify-content:center} .sec-head h2{font-size:clamp(34px,4.6vw,64px);color:var(--cream);margin-top:20px;line-height:1.02} .sec-head h2 em{font-style:italic;color:var(--brass)} .sec-head p{color:var(--muted);margin-top:18px;font-size:17px;line-height:1.7} .chap{display:flex;align-items:baseline;gap:24px;margin-bottom:clamp(36px,5vh,52px)} .chap .no{font-family:var(--f-d);font-size:18px;color:var(--brass);letter-spacing:.1em;flex-shrink:0} .chap .no.arr{align-self:center;display:inline-flex} .chap .no.arr svg{width:30px;height:30px;display:block} .chap h2{font-size:clamp(30px,4vw,54px);color:var(--cream)} .chap h2 .it{font-style:italic;color:var(--brass)} /* shared section-head (home + inner) */ .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:clamp(46px,7vh,84px);flex-wrap:wrap} .shead h2{font-size:clamp(30px,4vw,56px);font-weight:500;letter-spacing:-.02em;line-height:1.05} .shead h2 em{font-style:italic;color:var(--brass)} .shead .sub{max-width:38ch;color:var(--muted);font-size:17px;padding-bottom:10px} /* reveal */ .rv{opacity:0;transform:translateY(46px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s} .reveal-on [data-rv]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*70ms)} .reveal-on [data-rv].is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal-on [data-rv],.rv{opacity:1;transform:none;transition:none}} /* image clip-reveal */ .reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)} .reveal-img.shown{clip-path:inset(0 0 0 0)} .reveal-img img{transform:scale(1.2);transition:transform 1.7s var(--ease)} .reveal-img.shown img{transform:scale(1)} /* ===================================================================== ГЛАВНАЯ — лендинг v8 ===================================================================== */ .hero{height:100vh;min-height:660px;position:relative;overflow:hidden;display:flex;align-items:flex-end} .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:38% 64%;filter:brightness(.52) saturate(.95);will-change:transform} .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,12,.55) 0%,rgba(18,15,12,.12) 30%,rgba(18,15,12,.46) 62%,var(--bg) 100%),linear-gradient(90deg,rgba(18,15,12,.8) 0%,rgba(18,15,12,.34) 42%,transparent 68%),radial-gradient(115% 85% at 100% 0%,rgba(18,15,12,.62) 0%,rgba(18,15,12,.18) 32%,transparent 52%)} .hero .wrap{position:relative;z-index:3;padding-bottom:6vh} .hero-top{position:absolute;top:16vh;right:max(48px,calc((100% - var(--maxw))/2 + 48px));z-index:3;text-align:right} .hero-top .n{font-family:var(--f-d);font-size:clamp(54px,8vw,120px);color:var(--brass);line-height:.9} .hero-top .l{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);opacity:.7} .hero-top .n{text-shadow:0 2px 24px rgba(8,6,4,.6),0 0 2px rgba(8,6,4,.5)} .hero-top .l{text-shadow:0 1px 10px rgba(8,6,4,.7)} .hero .eyebrow{color:var(--cream);font-weight:600;text-shadow:0 1px 14px rgba(8,6,4,.92),0 1px 3px rgba(8,6,4,.8)} .hero .eyebrow::before{background:var(--brass);opacity:1;box-shadow:0 0 6px rgba(8,6,4,.5)} .hero h1{font-size:clamp(50px,8.4vw,140px);font-weight:500;letter-spacing:-.03em;line-height:.96;max-width:14ch} .lm{display:block;overflow:hidden;padding-bottom:.02em} .lm>span{display:block;transform:translateY(110%);will-change:transform} .hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:38px;flex-wrap:wrap} .hero-sub{font-size:clamp(16px,1.4vw,20px);max-width:46ch;color:var(--cream);opacity:0} .hero-cta{display:flex;gap:14px;opacity:0;flex-wrap:wrap} .scrollcue{position:absolute;left:48px;bottom:5vh;z-index:3;display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)} .scrollcue i{width:50px;height:1px;background:var(--line);position:relative;overflow:hidden} .scrollcue i::after{content:"";position:absolute;inset:0;background:var(--brass);animation:cue 2s var(--ease) infinite} @keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} .mq{padding:30px 0;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line-soft)} .mq-track{display:inline-flex;will-change:transform} .mq-track span{font-family:var(--f-d);font-size:clamp(30px,4vw,58px);padding:0 40px;color:var(--cream);opacity:.9;font-style:italic} .mq-track .s{color:var(--brass);font-style:normal;opacity:.55} .manifest{padding:clamp(100px,16vh,200px) 0} .manifest .big{font-family:var(--f-d);font-size:clamp(30px,4.2vw,62px);line-height:1.12;letter-spacing:-.02em;max-width:24ch;font-weight:500} .manifest .big .w{display:inline-block;overflow:hidden} .manifest .big .w>span{display:inline-block;transform:translateY(110%)} .manifest-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:clamp(56px,9vh,120px);border-top:1px solid var(--line-soft);padding-top:54px} .mf .n{font-family:var(--f-d);font-size:clamp(40px,5vw,76px);color:var(--brass);line-height:1} .mf .l{font-size:15px;color:var(--muted);margin-top:12px;max-width:24ch} /* projects asymmetric gallery */ .gallery{padding:0 0 clamp(100px,15vh,200px)} .gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(36px,4vw,64px) clamp(36px,4vw,60px)} .gal-item{display:block;position:relative} .gal-fig{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:4/3.2} .gal-fig img{width:100%;height:100%;object-fit:cover;will-change:transform} .gal-item:hover .gal-fig.shown img{transform:scale(1.06)} .gal-fig::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,15,12,.15) 0%,transparent 24%,transparent 38%,rgba(18,15,12,.64) 66%,rgba(18,15,12,.95) 100%)} .gal-fig::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);z-index:3} .gal-item:hover .gal-fig::after{transform:scaleX(1)} .gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:clamp(26px,3vw,42px)} .gal-cap .pcat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-soft);display:block;margin-bottom:12px} .gal-cap h3{font-size:clamp(28px,2.8vw,46px);font-weight:500;line-height:1} .gal-cap .meta{font-size:14px;color:var(--cream);opacity:.92;margin-top:10px;text-shadow:0 1px 8px rgba(8,6,4,.6)} .gal-cap .price{font-family:var(--f-d);font-size:clamp(24px,2.1vw,34px);color:var(--cream);text-align:right;white-space:nowrap} .gal-cap .price small{display:block;font-family:'Jost';font-size:11px;letter-spacing:.1em;color:var(--brass-soft);margin-top:2px} .gal-tile .gal-fig{background:var(--panel-2);display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line-soft)} .gal-tile .gal-fig::before{display:none} .gal-tile .tile-in{padding:clamp(28px,3vw,48px)} .gal-tile .tile-in .pcat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-soft);display:block;margin-bottom:14px} .gal-tile .tile-in h3{font-size:clamp(24px,2.4vw,36px);font-weight:500;line-height:1.06;margin-bottom:16px;color:var(--cream)} .gal-tile .tile-in .go{color:var(--brass);font-size:15px;letter-spacing:.02em} .gal-tile:hover .tile-in .go{text-decoration:underline} .gal-tile-wide{grid-column:1/-1} .gal-tile-wide .gal-fig{aspect-ratio:auto;min-height:clamp(150px,19vh,210px)} .gal-more{text-align:center;margin-top:clamp(56px,9vh,110px)} /* stacking cards */ .stack{padding:clamp(70px,12vh,140px) 0 clamp(56px,8vh,100px)} .stack-list{position:relative} .stack-card{position:sticky;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:var(--panel);will-change:transform;transform-origin:top center} .stack-card .sc-in{display:grid;grid-template-columns:1.1fr .9fr;min-height:clamp(360px,52vh,520px)} .sc-text{padding:clamp(36px,4.5vw,64px);display:flex;flex-direction:column;justify-content:space-between} .sc-num{font-family:var(--f-d);font-size:15px;color:var(--brass);letter-spacing:.1em} .sc-text h3{font-size:clamp(30px,3.6vw,58px);font-weight:500;margin:24px 0 18px;line-height:1.02} .sc-text p{color:var(--muted);font-size:16px;max-width:38ch} .sc-media{position:relative;overflow:hidden} .sc-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.82)} .stack-card:nth-child(1){background:var(--panel)} .stack-card:nth-child(2){background:var(--panel-2)} .stack-card:nth-child(3){background:var(--panel-3)} .stack-card:nth-child(4){background:#3D342A} /* editorial materials list */ .mats{padding:clamp(80px,14vh,180px) 0} .mat-list{margin-top:0} .mat-row{display:grid;grid-template-columns:.7fr 1.6fr .9fr;gap:30px;align-items:center;padding:clamp(28px,3.6vh,46px) 0;border-top:1px solid var(--line-soft);transition:.5s var(--ease)} .mat-row:last-child{border-bottom:1px solid var(--line-soft)} .mat-row:hover{padding-left:18px;padding-right:18px;background:linear-gradient(90deg,rgba(194,114,78,.05),transparent)} .mat-row .mname{font-family:var(--f-d);font-size:clamp(26px,3vw,46px);font-weight:500;display:flex;align-items:baseline;gap:18px} .mat-row .mname i{font-family:'Jost';font-style:normal;font-size:14px;color:var(--brass);letter-spacing:.1em} .mat-row .mdesc{color:var(--muted);font-size:16px;max-width:46ch} .mat-row .mprice{font-family:var(--f-d);font-size:clamp(20px,1.8vw,28px);color:var(--brass-soft);text-align:right} .mat-row .mprice small{display:block;font-family:'Jost';font-size:12px;color:var(--muted);letter-spacing:.06em} /* configurator (home) */ .calc.cfg-wrap,.calc-section{padding:0 0 clamp(80px,14vh,180px)} .cfg-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px} .cfg,.mort{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:clamp(34px,4vw,56px)} .cfg h3,.mort h3{font-size:clamp(24px,2.2vw,32px);margin-bottom:8px;font-weight:500} .cfg .sub,.mort .sub{color:var(--muted);font-size:14px;margin-bottom:36px} .cfg-row{margin-bottom:30px} .cfg-row .top{display:flex;justify-content:space-between;margin-bottom:14px;font-size:15px} .cfg-row .val{color:var(--brass-soft)} .cfg .track{height:3px;background:var(--line-soft);border-radius:3px;position:relative;cursor:pointer} .cfg .track .fill{position:absolute;left:0;top:0;height:100%;background:var(--brass);border-radius:3px} .cfg .track .knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--cream);transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(194,114,78,.22)} .mat-pills{display:flex;gap:8px;flex-wrap:wrap} .cpill{font-size:13px;padding:9px 18px;border:1px solid var(--line);border-radius:40px;color:var(--muted);cursor:pointer;transition:.3s} .cpill.on{background:var(--brass);color:#1a1410;border-color:var(--brass)} .cfg-result{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:38px;padding-top:32px;border-top:1px solid var(--line-soft);flex-wrap:wrap} .cfg-result .lbl{font-size:13px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase} .cfg-result .big{font-family:var(--f-d);font-size:clamp(30px,3vw,42px);color:var(--cream);margin:8px 0} .cfg-result .note{font-size:13px;color:var(--muted)} .mort .mort-list{display:flex;flex-direction:column;margin-bottom:30px} .mort .mort-item{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-soft)} .mort .mort-item .pct{font-family:var(--f-d);font-size:30px;color:var(--brass);width:62px;flex:none} .mort .mort-item h4{font-size:17px;font-weight:500} .mort .mort-item p{font-size:13px;color:var(--muted)} /* process (home sticky rail) */ .proc{background:var(--panel);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:clamp(80px,14vh,180px) 0} .proc-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:start} .proc-rail{position:sticky;top:14vh} .proc-rail h2{font-size:clamp(28px,3.6vw,52px);margin:22px 0;font-weight:500;line-height:1.05} .proc-rail p{color:var(--muted);max-width:34ch} .proc-prog{margin-top:40px;height:2px;background:var(--line-soft);position:relative;overflow:hidden} .proc-prog i{position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left} .pstep{display:grid;grid-template-columns:70px 1fr;gap:26px;padding:34px 0;border-bottom:1px solid var(--line-soft)} .pstep:first-child{padding-top:0} .pstep .pn{font-family:var(--f-d);font-size:32px;color:var(--brass)} .pstep h3{font-size:clamp(22px,2.2vw,30px);margin-bottom:10px;font-weight:500} .pstep p{color:var(--muted);font-size:15px} /* final full-bleed (home + inner) */ .final{position:relative;overflow:hidden;min-height:84vh;display:flex;align-items:center;padding:0} .final-media{position:absolute;inset:0;z-index:0;overflow:hidden} .final-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.4);will-change:transform} .final-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,15,12,.9),rgba(18,15,12,.35) 70%)} .final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .final .sh{position:absolute;inset:0;background:linear-gradient(105deg,rgba(18,15,12,.92) 30%,rgba(18,15,12,.55) 70%,rgba(18,15,12,.35) 100%);z-index:1} .final .wrap{position:relative;z-index:2} .final h2{font-size:clamp(30px,3.6vw,54px);font-weight:500;letter-spacing:-.02em;line-height:1.07;max-width:24ch} .final h2 .it,.final h2 em{font-style:italic;color:var(--brass)} .final p{color:var(--cream);font-size:19px;margin:26px 0 40px;max-width:48ch;opacity:.9} .final-cta,.final-c .final-cta{display:flex;gap:16px;flex-wrap:wrap} .final-c,.final-content{position:relative;z-index:2;max-width:760px} /* отступ-контейнер только когда .final-c лежит прямо в .final (без .wrap); внутри .wrap контейнер уже задан */ .final>.final-c,.final>.final-content{margin-left:max(48px,calc((100% - var(--maxw))/2 + 48px));margin-right:24px} .final-c h2,.final-content h2{font-size:clamp(30px,3.6vw,54px);color:var(--cream);margin-bottom:22px;line-height:1.07;max-width:24ch} .final-c h2 .it,.final-content h2 em{font-style:italic;color:var(--brass)} .final-c p,.final-content p{color:var(--cream);opacity:.9;font-size:19px;margin-bottom:36px;line-height:1.6;max-width:48ch} @media(max-width:680px){.final>.final-c,.final>.final-content{margin-left:22px;margin-right:22px}} /* ===================================================================== ВНУТРЕННИЕ СТРАНИЦЫ — словарь v5, перекрашенный в v8 ===================================================================== */ /* page hero (no image) */ .page-top{padding:clamp(48px,8vh,90px) 0 0} .page-top .crumbs{margin-bottom:24px} .page-top h1{font-size:clamp(30px,4.4vw,60px);color:var(--cream);margin:0;line-height:1.04;letter-spacing:-.02em;max-width:22ch} .page-top h1 .it,.page-top h1 span{font-style:italic;color:var(--brass)} .page-top .sub{max-width:680px;margin-top:24px} .crumbs{font-size:13px;letter-spacing:.04em;color:var(--muted)} .crumbs a{color:var(--muted);transition:.2s} .crumbs a:hover{color:var(--brass)} .crumbs span{color:var(--brass)} /* topic hero (bg image) */ .topic-hero{position:relative;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end;overflow:hidden} .topic-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.5)} .topic-hero .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,12,.5) 0%,rgba(18,15,12,.14) 26%,rgba(18,15,12,.62) 66%,var(--bg) 100%),linear-gradient(90deg,rgba(18,15,12,.72) 0%,rgba(18,15,12,.26) 46%,transparent 74%);z-index:1} .topic-hero .inner{position:relative;z-index:2;width:100%;padding:clamp(48px,8vh,90px) 0} .topic-hero .crumbs{margin-bottom:18px} .topic-hero h1{font-size:clamp(30px,4.4vw,60px);color:var(--cream);max-width:24ch;line-height:1.04;letter-spacing:-.02em} .topic-hero h1 .it{font-style:italic;color:var(--brass)} .topic-hero .sub{margin-top:20px;max-width:640px} /* stat band */ .stat-band{background:var(--panel);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:0} .stat-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:0;padding-bottom:0} .stat{padding:54px 28px;border-right:1px solid var(--line-soft);text-align:center} .stat:last-child{border-right:none} .stat .n{font-family:var(--f-d);font-size:clamp(38px,4.4vw,64px);color:var(--brass);line-height:1} .stat .l{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px} /* why / utp */ .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .why-card{background:linear-gradient(160deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line-soft);border-radius:14px;padding:clamp(34px,3vw,46px);position:relative;overflow:hidden;transition:.4s var(--ease)} .why-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--brass),transparent);opacity:0;transition:.4s} .why-card:hover{border-color:var(--line);transform:translateY(-4px)} .why-card:hover::before{opacity:1} .why-card .num{font-family:var(--f-d);font-size:15px;color:var(--brass);letter-spacing:.1em} .why-card h3{font-size:clamp(24px,2.2vw,32px);color:var(--cream);margin:18px 0 14px;font-weight:500} .why-card p{color:var(--muted);font-size:15.5px;line-height:1.7} /* project / catalog cards */ .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .proj,.cat-card{position:relative;border-radius:10px;overflow:hidden;background:var(--panel);border:1px solid var(--line-soft);transition:.45s var(--ease);display:block;color:inherit} .proj:hover,.cat-card:hover{transform:translateY(-5px);border-color:var(--line)} .proj-img,.cat-card .ci{aspect-ratio:4/3;overflow:hidden;position:relative} .proj-img::after,.cat-card .ci::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,12,0) 50%,rgba(18,15,12,.45) 100%)} .proj-img img,.cat-card .ci img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)} .proj:hover .proj-img img,.cat-card:hover .ci img{transform:scale(1.06)} .cat-card .badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:rgba(18,15,12,.78);border:1px solid var(--line);color:var(--brass-soft);padding:6px 14px;border-radius:40px;backdrop-filter:blur(6px)} .proj-body,.cat-card .cb{padding:26px 28px 30px} .proj-body .pcat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)} .proj-body h3,.cat-card .cb h3{font-size:clamp(22px,1.8vw,28px);color:var(--cream);margin:10px 0 16px;font-weight:500} .cat-card .cm{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--muted);margin-bottom:16px} .cat-card .cm span{position:relative;padding-right:16px} .cat-card .cm span:not(:last-child)::after{content:"·";position:absolute;right:4px;color:var(--line)} .proj-meta,.cat-card .cp{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line-soft);padding-top:16px;gap:12px} .proj-meta .area{font-size:14px;color:var(--muted)} .proj-meta .price,.cat-card .cp .pr{font-family:var(--f-d);color:var(--brass);font-size:20px;white-space:nowrap} .proj-meta .price small,.cat-card .cp .pr small{font-size:11px;color:var(--muted);font-family:'Jost';display:block;letter-spacing:.08em;text-transform:uppercase} .cat-card .cp .mo{font-size:13px;color:var(--muted);align-self:flex-end} .filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px} .chip{font-size:13px;letter-spacing:.05em;padding:11px 22px;border-radius:40px;border:1px solid var(--line-soft);color:var(--muted);background:transparent;cursor:pointer;transition:.28s} .chip:hover{border-color:var(--line);color:var(--cream)} .chip.act{border-color:var(--brass);color:#1a1410;background:var(--brass)} .proj-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:40px} /* materials cards (inner) */ .mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .mat-grid .mat{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:34px 28px;transition:.35s var(--ease)} .mat-grid .mat:hover{border-color:var(--line);background:var(--panel-2)} .mat-grid .mat .ico{width:48px;height:48px;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brass);margin-bottom:22px} .mat-grid .mat .ico svg{width:24px;height:24px} .mat-grid .mat h3{font-size:21px;color:var(--cream);margin-bottom:10px;font-weight:500} .mat-grid .mat p{font-size:14px;color:var(--muted);line-height:1.6} /* config/mortgage teaser (legacy home, kept for any reuse) */ .config-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:stretch} .config{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(34px,3vw,46px)} .config h3{font-size:28px;color:var(--cream);margin-bottom:6px;font-weight:500} .config .sub{color:var(--muted);font-size:14.5px;margin-bottom:30px} .config-row{margin-bottom:26px} .config-row .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px} .config-row .top label{font-size:14px;color:var(--muted)} .config-row .top .val{font-family:var(--f-d);color:var(--brass);font-size:18px} .config .track{height:5px;background:#15120f;border-radius:4px;position:relative;border:1px solid var(--line-soft)} .config .track .fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--brass-soft),var(--brass));border-radius:4px} .config .track .knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--brass);transform:translate(-50%,-50%);border:3px solid #15120f} .pill{font-size:12.5px;padding:9px 16px;border-radius:30px;border:1px solid var(--line-soft);color:var(--muted);background:transparent} .pill.on{border-color:var(--brass);color:var(--brass);background:rgba(194,114,78,.08)} .config-result{margin-top:34px;border-top:1px solid var(--line);padding-top:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap} .config-result .lbl{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .config-result .big{font-family:var(--f-d);font-size:clamp(32px,4vw,46px);color:var(--brass);line-height:1;margin-top:6px} .config-result .note{font-size:12px;color:var(--muted);margin-top:6px} .mortgage{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:clamp(32px,3vw,40px);display:flex;flex-direction:column} .mortgage h3{font-size:24px;color:var(--cream);margin-bottom:8px;font-weight:500} .mortgage .sub{color:var(--muted);font-size:14.5px;margin-bottom:26px} .mortgage .mort-list{display:flex;flex-direction:column;gap:2px;margin-bottom:auto} .mortgage .mort-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-soft)} .mortgage .mort-item:last-child{border-bottom:none} .mortgage .mort-item .pct{font-family:var(--f-d);font-size:24px;color:var(--brass);min-width:62px} .mortgage .mort-item .txt h4{font-size:16px;color:var(--cream);font-weight:500} .mortgage .mort-item .txt p{font-size:13px;color:var(--muted);margin-top:2px} .mortgage .btn{margin-top:28px;width:100%} /* process (inner 3-col) */ .proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .step{padding:44px 34px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);position:relative} .step .st-num{font-family:var(--f-d);font-size:48px;color:rgba(194,114,78,.3);line-height:1} .step h3{font-size:20px;color:var(--cream);margin:14px 0 10px;font-weight:500} .step p{font-size:14px;color:var(--muted);line-height:1.65} /* promo */ .promo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px} .promo-card{position:relative;border-radius:12px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;border:1px solid var(--line-soft)} .promo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .promo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,12,.2) 0%,rgba(18,15,12,.92) 100%);z-index:1} .promo-body{position:relative;z-index:2;padding:38px 36px} .promo-tag{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#1a1410;background:var(--brass);padding:6px 14px;border-radius:30px;font-weight:600;margin-bottom:18px} .promo-body h3{font-size:28px;color:var(--cream);margin-bottom:12px;font-weight:500} .promo-body p{color:var(--cream);opacity:.82;font-size:15px;max-width:380px} /* price table */ .ptable{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:var(--panel)} .pr-row{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center;gap:20px;padding:26px 32px;border-bottom:1px solid var(--line-soft)} .pr-row:last-child{border-bottom:none} .pr-row.head{background:var(--panel-2);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .pr-row h4{font-size:20px;color:var(--cream);margin-bottom:4px;font-weight:500} .pr-row .from{font-family:var(--f-d);color:var(--cream);font-size:19px} .pr-row:not(.head) .from.hl{color:var(--brass)} .pr-row .from .pl{display:none;font-family:'Jost';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} /* quiz calculator (ceny) */ .calc:not(.cfg-wrap){display:grid;grid-template-columns:1.3fr .7fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)} .calc-main{background:var(--panel);padding:clamp(34px,3.5vw,48px)} .qp{height:3px;background:#15120f;border-radius:3px;overflow:hidden;margin-bottom:14px} .qp i{display:block;height:100%;width:14%;background:linear-gradient(90deg,var(--brass-soft),var(--brass));transition:width .45s var(--ease)} .qno{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:26px} .qstep{display:none;animation:fade .4s ease} .qstep.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .qstep h3{font-size:26px;color:var(--cream);margin-bottom:8px;font-weight:500} .qstep .hint{font-size:14px;color:var(--muted);margin-bottom:24px} .opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .opt{border:1px solid var(--line-soft);border-radius:10px;padding:18px 20px;cursor:pointer;transition:.25s;font-size:16px;color:var(--cream);display:flex;flex-direction:column;gap:4px;background:transparent} .opt small{font-size:12.5px;color:var(--muted);font-weight:300} .opt:hover{border-color:var(--line);background:rgba(194,114,78,.04)} .opt.sel{border-color:var(--brass);background:rgba(194,114,78,.1);color:var(--brass)} .opt.sel small{color:var(--brass-soft)} .sval{font-family:var(--f-d);font-size:34px;color:var(--brass);margin-bottom:18px} .sval span:last-child{font-size:18px;color:var(--muted);font-family:'Jost'} .crow{display:flex;flex-direction:column;gap:14px} .crow input{background:#15120f;border:1px solid var(--line-soft);border-radius:8px;padding:15px 18px;color:var(--cream);font-family:'Jost';font-size:16px;width:100%} .crow input:focus{outline:none;border-color:var(--brass)} .crow input::placeholder{color:var(--muted)} .mpick{display:flex;gap:10px;flex-wrap:wrap} .mpick .opt{flex:1;min-width:120px;align-items:center;text-align:center} .qnav{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:16px} .qback{background:none;border:none;color:var(--muted);font-family:'Jost';font-size:14px;cursor:pointer;transition:.2s} .qback:hover{color:var(--cream)} .calc-aside{background:#15120f;padding:clamp(32px,3vw,42px) 36px;display:flex;flex-direction:column;border-left:1px solid var(--line)} .calc-aside .alab{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .calc-aside .aprice,.aprice{font-family:var(--f-d);font-size:clamp(30px,3.4vw,42px);color:var(--brass);line-height:1.05} .calc-aside .aprice small,.aprice small{display:block;font-size:15px;color:var(--muted);font-family:'Jost';margin-top:4px} .amo{margin:26px 0;padding:20px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .amo .alab{margin-bottom:6px} .amo b{font-family:var(--f-d);font-size:22px;color:var(--cream);font-weight:400} .calc-aside ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:auto} .calc-aside li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--muted);line-height:1.5} .calc-aside li svg{width:18px;height:18px;flex-shrink:0;stroke:var(--brass);fill:none;stroke-width:2.4;margin-top:2px} /* mortgage calculator (ceny) */ .mort-grid{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:start;background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:clamp(34px,3.5vw,44px)} .mfield{margin-bottom:28px} .mfield label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted);margin-bottom:14px;gap:12px} .mfield label b{font-family:var(--f-d);font-size:17px;color:var(--brass);font-weight:400} .mprog{display:flex;flex-wrap:wrap;gap:10px} .mprog button{flex:1;min-width:120px;background:transparent;border:1px solid var(--line-soft);border-radius:8px;padding:13px 12px;color:var(--muted);font-family:'Jost';font-size:13.5px;cursor:pointer;transition:.25s} .mprog button:hover{border-color:var(--line);color:var(--cream)} .mprog button.act{border-color:var(--brass);color:var(--brass);background:rgba(194,114,78,.1)} .mres{background:#15120f;border:1px solid var(--line);border-radius:12px;padding:36px 32px;text-align:center;align-self:stretch;display:flex;flex-direction:column;justify-content:center} .mres .alab{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .mres .big{font-family:var(--f-d);font-size:clamp(34px,4.4vw,52px);color:var(--brass);line-height:1;margin:12px 0 8px} .mres .sub{font-size:13px;color:var(--muted);margin-bottom:24px} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;background:#15120f;border:1px solid var(--line-soft);border-radius:6px;outline:none;cursor:pointer;margin:6px 0} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--brass);border:3px solid #15120f;cursor:pointer;transition:.15s} input[type=range]::-webkit-slider-thumb:hover{background:var(--brass-soft)} input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brass);border:3px solid #15120f;cursor:pointer} /* FAQ */ .faq-in{max-width:860px;margin:0 auto} .fi{border-bottom:1px solid var(--line-soft)} .fq{width:100%;background:none;border:none;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;font-family:var(--f-d);font-size:clamp(19px,1.8vw,24px);color:var(--cream);transition:.25s;font-weight:500} .fq:hover{color:var(--brass)} .fq .pm{font-family:'Jost';font-size:28px;color:var(--brass);font-weight:300;flex-shrink:0;transition:.3s var(--ease)} .fi.open .fq .pm{transform:rotate(45deg)} .fa{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;color:var(--muted);font-size:15.5px;line-height:1.7} .fi.open .fa{max-height:360px;padding:0 0 28px} .fa a{color:var(--brass);border-bottom:1px solid var(--line)} /* project detail */ .pd-hero{position:relative;min-height:560px;display:flex;align-items:flex-end;overflow:hidden} .pd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.62)} .pd-hero .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,12,.4) 0%,rgba(18,15,12,.92) 100%);z-index:1} .pd-hero .pdc{position:relative;z-index:2;width:100%;padding:60px 0} .pd-hero .crumbs{margin-bottom:18px} .pd-hero h1{font-size:clamp(30px,4.2vw,56px);color:var(--cream);line-height:1.04;letter-spacing:-.02em} .pd-key{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;margin-top:-40px;position:relative;z-index:5} .pd-key>div{background:var(--panel);padding:30px 28px} .pd-key .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .pd-key .v{font-family:var(--f-d);font-size:26px;color:var(--brass)} .pd-body{display:grid;grid-template-columns:1.5fr .9fr;gap:50px;align-items:start} .pd-body p{color:var(--muted)} .pd-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:380px} .pd-gallery .g{border-radius:8px;overflow:hidden;background:var(--panel-2)} .pd-gallery .g:first-child{grid-row:span 2} .pd-gallery .g img{width:100%;height:100%;object-fit:cover} .mlist{display:flex;flex-direction:column;gap:16px} .mlist .y{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:var(--cream)} .mlist .y svg{width:20px;height:20px;flex-shrink:0;stroke:var(--brass);fill:none;stroke-width:2.4;margin-top:3px} .pd-side{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:36px 34px;position:sticky;top:110px} .pd-side .pr{font-family:var(--f-d);font-size:32px;color:var(--brass);margin:6px 0} .pd-side .mo{font-size:13.5px;color:var(--muted);margin-bottom:22px} .pd-side .spec{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px} .pd-side .spec b{color:var(--cream);font-weight:500} .proj-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .pc{position:relative;border-radius:12px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;border:1px solid var(--line-soft)} .pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:.6s} .pc:hover img{transform:scale(1.05)} .pc-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,12,.1) 30%,rgba(18,15,12,.92) 100%);z-index:1} .pc-c{position:relative;z-index:2;padding:30px} .pc-c h4{font-size:24px;color:var(--cream);margin-bottom:6px;font-weight:500} .pc-c .m{font-size:13px;color:var(--muted);margin-bottom:8px} .pc-c .pr{font-family:var(--f-d);font-size:18px;color:var(--brass)} /* prose / long-form */ .lead{font-size:19px;color:var(--muted);line-height:1.75;max-width:780px} .lead.center{margin:0 auto;text-align:center} .prose{max-width:800px;color:var(--muted);font-size:17px;line-height:1.8} .prose.wide{max-width:none} .prose>*+*{margin-top:20px} .prose h2{font-family:var(--f-d);font-size:clamp(28px,3.2vw,42px);color:var(--cream);margin-top:52px;margin-bottom:4px;letter-spacing:-.02em;font-weight:500} .prose h3{font-family:var(--f-d);font-size:23px;color:var(--cream);margin-top:34px;font-weight:500} .prose h2 em,.prose h3 em,.prose .it{font-style:italic;color:var(--brass)} .prose strong,.prose b{color:var(--cream);font-weight:600} .prose a{color:var(--brass);border-bottom:1px solid var(--line);transition:.2s} .prose a:hover{color:var(--brass-soft);border-color:var(--brass)} .prose ul,.prose ol{padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:12px} .prose ul li{position:relative;padding-left:28px} .prose ul li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;background:var(--brass);border-radius:50%} .prose ol{counter-reset:n} .prose ol li{position:relative;padding-left:40px;counter-increment:n} .prose ol li::before{content:counter(n);position:absolute;left:0;top:-2px;font-family:var(--f-d);color:var(--brass);font-size:18px} .prose blockquote{border-left:2px solid var(--brass);padding:6px 0 6px 26px;color:var(--cream);font-family:var(--f-d);font-style:italic;font-size:22px;line-height:1.5} .prose img{border-radius:10px;margin:12px 0} .prose figure{margin:24px 0} .prose figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center} .prose hr{border:none;border-top:1px solid var(--line-soft);margin:40px 0} /* generic split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,70px);align-items:center} .split.rev .split-media{order:-1} .split-media{border-radius:12px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);position:relative} .split-media img{width:100%;height:100%;object-fit:cover} .split-copy h2{font-size:clamp(28px,3.4vw,52px);color:var(--cream);margin:14px 0 16px;line-height:1.02;font-weight:500} .split-copy h2 em,.split-copy h2 .it{font-style:italic;color:var(--brass)} .split-copy p{color:var(--muted);line-height:1.75} .split-copy p+p{margin-top:14px} /* services grid */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .svc{display:block;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:36px 32px;transition:.35s var(--ease);color:inherit} .svc:hover{border-color:var(--line);transform:translateY(-4px);background:var(--panel-2)} .svc .ico{width:46px;height:46px;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brass);margin-bottom:20px} .svc .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6} .svc h3{font-size:21px;color:var(--cream);margin-bottom:10px;font-weight:500} .svc p{font-size:14.5px;color:var(--muted);line-height:1.6} .svc .more{display:inline-block;margin-top:16px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)} /* blog */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .post{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;transition:.35s var(--ease);color:inherit} .post:hover{border-color:var(--line);transform:translateY(-4px)} .post .pimg{aspect-ratio:16/10;overflow:hidden} .post .pimg img{width:100%;height:100%;object-fit:cover;transition:.6s} .post:hover .pimg img{transform:scale(1.05)} .post .pbody{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1} .post .pmeta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-bottom:12px} .post h3{font-size:21px;color:var(--cream);line-height:1.25;margin-bottom:12px;font-weight:500} .post p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px} .post .more{margin-top:auto;font-size:13px;letter-spacing:.06em;color:var(--brass)} /* contacts */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start} .cinfo .crow2{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-soft)} .cinfo .crow2 .ico{width:42px;height:42px;flex-shrink:0;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brass)} .cinfo .crow2 .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6} .cinfo .crow2 .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .cinfo .crow2 .v{font-size:17px;color:var(--cream)} .cinfo .crow2 .v a{color:var(--cream)} .cinfo .crow2 .v a:hover{color:var(--brass)} .req{margin-top:26px;padding:24px;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;font-size:13.5px;color:var(--muted);line-height:1.8} .req b{color:var(--cream);font-weight:500} .map{border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);margin-top:40px;min-height:340px} .map iframe{width:100%;height:420px;border:0;filter:grayscale(.4) contrast(1.05) brightness(.85)} /* lead form */ .form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(34px,3.5vw,42px);box-shadow:var(--shadow)} .form h3{font-size:26px;color:var(--cream);margin-bottom:8px;font-weight:500} .form .fsub{color:var(--muted);font-size:14.5px;margin-bottom:26px} .form .field{margin-bottom:16px} .form label{display:block;font-size:13px;letter-spacing:.04em;color:var(--muted);margin-bottom:8px} .form input,.form textarea,.form select{width:100%;background:#15120f;border:1px solid var(--line-soft);border-radius:8px;padding:15px 18px;color:var(--cream);font-family:'Jost';font-size:16px} .form textarea{min-height:110px;resize:vertical} .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brass)} .form input::placeholder,.form textarea::placeholder{color:var(--muted)} .form .btn{width:100%;margin-top:8px} .form .agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5} .form .agree input{width:auto;margin-top:3px} .form .ok{display:none;text-align:center;padding:24px 10px} .form.sent .ok{display:block} .form.sent .fbody{display:none} .form .ok .big{font-family:var(--f-d);font-size:28px;color:var(--brass);margin-bottom:10px} /* mid-page CTA band */ .cta-band{background:linear-gradient(120deg,var(--panel) 0%,var(--panel-2) 100%);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap} .cta-band h2{font-size:clamp(28px,3.4vw,48px);color:var(--cream);max-width:20ch;line-height:1.02;font-weight:500} .cta-band h2 .it{font-style:italic;color:var(--brass)} .cta-band p{color:var(--muted);margin-top:10px;max-width:46ch} .cta-band .btns{display:flex;gap:14px;flex-wrap:wrap} /* ===== FOOTER ===== */ footer{background:#13100D;border-top:1px solid var(--line-soft);padding:clamp(72px,11vh,120px) 0 40px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:54px;border-bottom:1px solid var(--line-soft)} .foot-grid.mega{grid-template-columns:1.6fr 1fr 1.1fr 1fr 1fr;gap:34px} .foot-brand .mark{font-family:var(--f-d);font-size:26px;letter-spacing:.04em;color:var(--cream)} .foot-brand .mark b{color:var(--brass);font-weight:500} .foot-brand .tag{font-size:10px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;margin-top:6px} .foot-brand p{color:var(--muted);font-size:14px;margin-top:20px;line-height:1.7;max-width:320px} .foot-col h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:20px;font-weight:500} .foot-col a,.foot-col p{display:block;color:var(--muted);font-size:14.5px;margin-bottom:12px;transition:.25s;line-height:1.5} .foot-col a:hover{color:var(--cream)} .foot-soc{display:flex;gap:12px;margin-top:18px} .foot-soc a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brass-soft);margin:0;transition:.3s var(--ease)} .foot-soc a:hover{background:var(--brass);color:#1a1410;border-color:var(--brass)} .foot-soc a svg{width:19px;height:19px} .foot-bottom{display:flex;flex-direction:column;gap:8px;padding-top:30px} .foot-bottom p{font-size:12.5px;color:var(--muted);line-height:1.7} /* ===== FLOAT + MOBAR ===== */ .float{position:fixed;right:26px;bottom:26px;z-index:120;display:flex;flex-direction:column;gap:12px} .float .fb{width:56px;height:56px;border-radius:50%;border:1px solid transparent;background:var(--brass);color:#1a1410;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.4s var(--ease);box-shadow:0 12px 32px -10px rgba(0,0,0,.65)} .float .fb:hover{background:var(--brass-soft);transform:translateY(-3px)} .float .fb svg{width:24px;height:24px;fill:currentColor} .mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:130;background:rgba(18,15,12,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);grid-template-columns:1fr 1fr 1fr} .mobar a{padding:16px 4px;text-align:center;font-size:13px;letter-spacing:.04em;border-right:1px solid var(--line-soft);text-transform:uppercase;font-weight:500} .mobar a:last-child{border-right:none} .mobar .m1{color:var(--brass)} /* no-anim failsafe */ .no-anim .rv,.no-anim .hero-sub,.no-anim .hero-cta,.no-anim .reveal-on [data-rv]{opacity:1!important;transform:none!important} .no-anim .lm>span,.no-anim .manifest .big .w>span,.no-anim .pre-mark span{transform:none!important} .no-anim .reveal-img{clip-path:none!important} .no-anim .reveal-img img{transform:none!important} .no-anim .pre{display:none} /* ===================================================================== RESPONSIVE ===================================================================== */ @media(max-width:1180px){ .wrap{padding:0 36px} .hero-top{right:36px} .scrollcue{left:36px} .drawer{padding:0 36px} } @media(max-width:1040px){ .nav-links{gap:22px}.nav-right{gap:16px}.nav-links a{font-size:13px} .why-grid,.mat-grid{grid-template-columns:repeat(2,1fr)} .mat-grid>:last-child:nth-child(odd){grid-column:1/-1} .proj-grid,.cat-grid,.svc-grid,.post-grid{grid-template-columns:repeat(2,1fr)} .config-grid,.mort-grid,.cfg-grid{grid-template-columns:1fr} .calc{grid-template-columns:1fr} .calc-aside{border-left:none;border-top:1px solid var(--line)} .pd-body{grid-template-columns:1fr;gap:40px} .pd-side{position:static} .foot-grid,.foot-grid.mega{grid-template-columns:1fr 1fr;gap:34px} .proc-grid{grid-template-columns:repeat(2,1fr)} .proc-wrap{grid-template-columns:1fr;gap:40px} .proc-rail{position:static} .contact-grid,.split{grid-template-columns:1fr;gap:34px} .split.rev .split-media{order:0} } @media(max-width:980px){ .nav-links,.nav-right{display:none} .burger{display:flex} .nav-inner{min-height:72px} .hero-top{display:none} .scrollcue{display:none} .gal{grid-template-columns:1fr;gap:28px} .stack-card .sc-in{grid-template-columns:1fr} .sc-media{min-height:240px;order:-1} .mat-row{grid-template-columns:1fr;gap:10px} .mat-row .mprice{text-align:left} .manifest-foot{grid-template-columns:1fr} } @media(max-width:1024px){.float{display:none}.mobar{display:grid}body{padding-bottom:54px}} @media(max-width:860px){.promo .wrap{grid-template-columns:1fr}.promo-card{min-height:240px}} @media(max-width:680px){ body{font-size:16px} .wrap{padding:0 22px} .hero h1{font-size:clamp(40px,12vw,68px)} .why-grid,.mat-grid,.proj-grid,.proc-grid,.cat-grid,.svc-grid,.post-grid{grid-template-columns:1fr} .why-card{padding:30px 26px} .step{border-right:none} .opts{grid-template-columns:1fr} .stat-band .wrap{grid-template-columns:1fr 1fr} .stat{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:36px 18px} .stat:nth-child(2n){border-right:none} .stat:nth-child(n+3){border-bottom:none} .pr-row{grid-template-columns:1fr;gap:6px;padding:22px} .pr-row.head{display:none} .pr-row .from{display:flex;justify-content:space-between;align-items:baseline;font-size:16px} .pr-row .from .pl{display:block;margin-bottom:0} .pd-key{grid-template-columns:1fr 1fr;margin-top:0} .pd-gallery{grid-template-columns:1fr;height:auto;grid-template-rows:none} .pd-gallery .g{height:220px} .pd-gallery .g:first-child{grid-row:auto} .proj-2{grid-template-columns:1fr} .foot-grid,.foot-grid.mega{grid-template-columns:1fr;gap:30px} .cta-band .wrap{flex-direction:column;align-items:flex-start} .cta-band .btns{width:100%}.cta-band .btns .btn{flex:1} .final-cta{flex-direction:column}.final-cta .btn{width:100%} .map iframe{height:300px} .btn{white-space:normal;text-align:center} } @media(max-width:400px){ .wrap{padding:0 16px} .brand .mark{font-size:19px} .pd-key{grid-template-columns:1fr} } /* ---------- COOKIE CONSENT ---------- */ .cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:300;transform:translateY(120%);transition:transform .5s var(--ease);background:rgba(20,17,14,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)} .cookie-bar.show{transform:none} .cookie-in{max-width:var(--maxw);margin:0 auto;padding:18px 48px;display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap} .cookie-in p{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:74ch;margin:0} .cookie-in a{color:var(--brass);text-decoration:underline} .cookie-btns{display:flex;gap:12px;flex-shrink:0} .cookie-btns .btn{min-height:42px;padding:0 24px;font-size:14px} @media(max-width:760px){.cookie-in{padding:16px 22px;gap:14px}.cookie-btns{width:100%}.cookie-btns .btn{flex:1}} /* ---------- LEGAL / ПОЛИТИКА ---------- */ .legal{max-width:860px;margin:0 auto;padding:clamp(18px,4vh,48px) 0 clamp(60px,10vh,120px)} .legal h2{font-size:clamp(21px,2.3vw,29px);font-weight:500;color:var(--cream);margin:40px 0 14px;line-height:1.15} .legal h2:first-of-type{margin-top:0} .legal p,.legal li{font-size:15px;line-height:1.78;color:var(--muted);margin:0 0 12px} .legal ul{margin:0 0 16px;padding-left:20px} .legal a{color:var(--brass);text-decoration:underline} .legal strong{color:var(--cream);font-weight:500} .legal .upd{font-size:13px;opacity:.7;margin-bottom:34px} /* ---------- MODALS (написать / калькулятор) ---------- */ .amodal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,8,6,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s} .amodal.open{opacity:1;visibility:visible} .amodal-card{position:relative;width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(28px,4vw,44px);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);transform:translateY(16px) scale(.98);transition:transform .4s var(--ease);max-height:90vh;overflow:auto} .amodal.open .amodal-card{transform:none} .amodal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s var(--ease)} .amodal-x:hover{background:var(--brass);color:#1a1410;border-color:var(--brass)} .amodal-x svg{width:18px;height:18px} .amodal-h{font-size:clamp(23px,3vw,31px);font-weight:500;color:var(--cream);line-height:1.12;margin:0 34px 8px 0} .amodal-sub{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0 0 26px} .msg-opts{display:flex;flex-direction:column;gap:12px} .msg-opt{display:flex;align-items:center;gap:16px;padding:14px 20px;border:1px solid var(--line);border-radius:12px;color:var(--cream);font-size:17px;font-weight:500;transition:.3s var(--ease)} .msg-opt:hover{border-color:var(--brass);background:rgba(194,114,78,.08);transform:translateY(-1px)} .msg-opt .ic{width:42px;height:42px;border-radius:50%;background:var(--brass);color:#1a1410;display:flex;align-items:center;justify-content:center;flex:none} .msg-opt .ic svg{width:22px;height:22px} .mcalc-row{margin-bottom:22px} .mcalc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:15px} .mcalc-top label{color:var(--cream)} .mcalc-top span{color:var(--brass-soft)} .mcalc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:var(--line-soft);outline:none;cursor:pointer} .mcalc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 5px rgba(194,114,78,.22);cursor:pointer} .mcalc input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--cream);box-shadow:0 0 0 5px rgba(194,114,78,.22);cursor:pointer} .mcalc .mat-pills{display:flex;flex-wrap:wrap;gap:8px} .mcalc-out{margin:26px 0 22px;padding-top:22px;border-top:1px solid var(--line-soft)} .mcalc-out .lbl{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .mcalc-out .big{font-family:var(--f-d);font-size:clamp(30px,4vw,40px);color:var(--cream);margin:8px 0} .mcalc-out .note{font-size:13px;color:var(--muted)} .lead-form{display:flex;flex-direction:column;gap:10px} .lead-form input{width:100%;background:var(--panel-2,#1c1815);border:1px solid var(--line);border-radius:10px;padding:13px 16px;color:var(--cream);font-size:15px;font-family:inherit;transition:border-color .25s} .lead-form input:focus{outline:none;border-color:var(--brass)} .lead-form input::placeholder{color:var(--muted)} .lead-note{font-size:12px;color:var(--muted);line-height:1.5;margin:4px 0 0;text-align:center} .lead-note a{color:var(--brass-soft);text-decoration:underline} .lead-ok{text-align:center;padding:14px 0 4px} .lead-ok-ic{width:54px;height:54px;border-radius:50%;background:var(--brass);color:#1a1410;font-size:28px;line-height:54px;margin:0 auto 14px} .lead-ok b{display:block;font-size:20px;color:var(--cream);margin-bottom:6px} .lead-ok span{font-size:14.5px;color:var(--muted)} /* ---------- PROJECT VIEW MODAL (просмотр проекта) ---------- */ .cat-card,.gal-item{cursor:pointer} .amodal-card.proj-modal{max-width:920px;padding:0;overflow:hidden} .proj-modal .amodal-x{background:rgba(18,15,12,.72);border-color:rgba(236,230,218,.2);backdrop-filter:blur(6px);z-index:4} .pm-grid{display:grid;grid-template-columns:1.15fr .85fr;min-height:clamp(360px,56vh,560px)} .pm-media{position:relative;background:#0f0c0a;display:flex;flex-direction:column} .pm-media .pm-main{flex:1;position:relative;overflow:hidden;min-height:260px} .pm-media .pm-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pm-thumbs{display:flex;gap:8px;padding:10px;background:#0f0c0a;border-top:1px solid var(--line-soft);overflow-x:auto} .pm-thumbs button{flex:0 0 auto;width:74px;height:54px;border-radius:6px;overflow:hidden;border:1px solid var(--line-soft);background:none;cursor:pointer;padding:0;opacity:.6;transition:.25s} .pm-thumbs button.on,.pm-thumbs button:hover{opacity:1;border-color:var(--brass)} .pm-thumbs img{width:100%;height:100%;object-fit:cover} .pm-info{padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;overflow:auto} .pm-cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:14px} .pm-info .amodal-h{margin:0 30px 18px 0} .pm-specs{display:flex;flex-direction:column;gap:0;margin-bottom:20px} .pm-specs .sr{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px} .pm-specs .sr .k{color:var(--muted)} .pm-specs .sr .v{color:var(--cream);font-weight:500;text-align:right} .pm-note{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:22px} .pm-price{margin:auto 0 22px;padding-top:18px;border-top:1px solid var(--line)} .pm-price .pm-pl{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .pm-price b{font-family:var(--f-d);font-size:clamp(26px,3vw,34px);color:var(--brass);font-weight:500} .pm-cta{display:flex;gap:12px;flex-wrap:wrap} .pm-cta .btn{flex:1;min-width:160px;min-height:54px;padding:0 22px} @media(max-width:760px){ .amodal-card.proj-modal{max-width:520px;max-height:92vh;overflow:auto} .pm-grid{grid-template-columns:1fr;min-height:0} .pm-media .pm-main{min-height:240px;aspect-ratio:4/3} .pm-cta .btn{flex:1 1 100%} }