/* Реконструкция сада — премиальная страница (26.09.2026). Токены и шрифты сайта; сторителлинг по прокрутке. */
.recon-page{--rc-keep:#9fd3a6;--rc-change:#e7c46a;--rc-remove:#ef9a86;--rc-glass:#0e251c99}
.recon-page .service-nav{position:relative;z-index:3}

/* 1. Первый экран: сад меняется при прокрутке */
.rc-hero{position:relative;height:320vh;background:var(--forest-deep);color:var(--paper)}
.rc-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.rc-canvas,.rc-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-canvas{opacity:0;transition:opacity .6s var(--ease)}
.rc-hero.is-ready .rc-canvas{opacity:1}
.rc-hero.is-ready .rc-poster{opacity:0}
.rc-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0e251ce6 0%,#0e251c99 38%,#0e251c00 70%),linear-gradient(0deg,#0e251ccc 0%,#0e251c00 30%)}
.rc-hero-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:40px}
.rc-hero-copy .breadcrumbs{position:absolute;top:28px;left:var(--gutter);margin:0}
.rc-hero-copy .kicker{color:var(--on-dark-soft)}
.rc-hero h1{font-size:clamp(58px,8.4vw,132px);line-height:.92;letter-spacing:-.01em;margin:14px 0 26px;max-width:9ch}
.rc-hero h1 em{font-style:italic;color:#dbe7d3}
.rc-lede{max-width:44ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:#e3e9e0}
.rc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:34px}
.rc-scroll{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:var(--on-dark-soft)}
.rc-scroll span{width:22px;height:36px;border:1px solid currentColor;border-radius:12px;position:relative}
.rc-scroll span:after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;background:currentColor;border-radius:2px;animation:rc-wheel 1.8s var(--ease) infinite}
@keyframes rc-wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.rc-meter{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(64px,9vh,96px);display:flex;align-items:center;gap:14px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.rc-meter i{display:block;width:clamp(120px,14vw,220px);height:1px;background:#f3f0e74d;position:relative}
.rc-meter b{position:absolute;inset:0;background:var(--paper);transform-origin:left;transform:scaleX(var(--p,0))}
.rc-ai-note{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:20px;font-size:11px;color:#f3f0e7a6;margin:0}

/* 2. Крупная мысль: слова проявляются при прокрутке */
.rc-statement{padding-block:clamp(90px,12vw,170px) clamp(60px,8vw,110px);display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,70px)}
.rc-big{font:400 clamp(36px,4.6vw,74px)/1.08 var(--serif);max-width:20ch;margin:0}
.rc-big .w{opacity:.14;transition:opacity .5s var(--ease)}
.rc-big .w.on{opacity:1}
.rc-answer{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;border-top:1px solid var(--line);padding-top:30px}
.rc-answer h2{font-size:clamp(26px,2.4vw,36px);margin:0}
.rc-answer p{font-size:17px;line-height:1.75;color:var(--soft);max-width:60ch;margin:0}

/* 3. Сохранить / Изменить / Убрать */
.rc-layers{background:var(--forest-deep);color:var(--paper);padding-block:clamp(80px,10vw,140px)}
.rc-layers-head{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.rc-layers-head .kicker{grid-column:1/-1;color:var(--on-dark-soft);margin:0}
.rc-layers-head h2{font-size:clamp(42px,5vw,80px);line-height:1;margin:0}
.rc-layers-head h2 em{font-style:italic;color:var(--rc-remove)}
.rc-layers-head p{color:var(--on-dark-soft);font-size:15px;line-height:1.7;max-width:46ch;margin:0}
.rc-layers-grid{display:grid;grid-template-columns:minmax(260px,.32fr) 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.rc-tabs{display:grid;gap:10px}
.rc-layer{display:grid;grid-template-columns:16px 1fr;gap:4px 14px;align-items:center;text-align:left;padding:20px 22px;border:1px solid #f3f0e729;background:#f3f0e708;color:var(--paper);cursor:pointer;border-radius:14px;transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.rc-layer strong{font:500 clamp(24px,2vw,30px)/1.1 var(--serif)}
.rc-layer small{grid-column:2;font-size:13px;line-height:1.45;color:var(--on-dark-soft)}
.rc-layer:hover{border-color:#f3f0e766;transform:translateX(4px)}
.rc-layer[aria-pressed=true]{background:#f3f0e71a;border-color:#f3f0e7a6}
.rc-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 4px #ffffff14}
.rc-dot.keep{background:var(--rc-keep)}.rc-dot.change{background:var(--rc-change)}.rc-dot.remove{background:var(--rc-remove)}
.rc-map{position:relative;margin:0;border:1px solid #f3f0e733;padding:10px;background:#0a1d16}
.rc-map img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:saturate(.9)}
.rc-map figcaption{font-size:11px;color:#f3f0e780;margin-top:10px}
.rc-marks{list-style:none;margin:0;padding:0;position:absolute;inset:10px 10px 34px}
.rc-mark{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);opacity:.18;transition:opacity .45s var(--ease);outline:none}
.rc-pin{display:block;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 0 var(--c)}
.rc-mark.keep{--c:var(--rc-keep)}.rc-mark.change{--c:var(--rc-change)}.rc-mark.remove{--c:var(--rc-remove)}
.rc-tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);white-space:nowrap;background:#0e251ceb;color:var(--paper);font-size:12px;padding:8px 11px;border-radius:8px;border:1px solid #f3f0e733;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rc-map[data-active=keep] .rc-mark.keep,.rc-map[data-active=change] .rc-mark.change,.rc-map[data-active=remove] .rc-mark.remove{opacity:1}
.rc-map[data-active=keep] .rc-mark.keep .rc-pin,.rc-map[data-active=change] .rc-mark.change .rc-pin,.rc-map[data-active=remove] .rc-mark.remove .rc-pin{animation:rc-pulse 2.2s var(--ease) infinite}
.rc-map[data-active=keep] .rc-mark.keep .rc-tip,.rc-map[data-active=change] .rc-mark.change .rc-tip,.rc-map[data-active=remove] .rc-mark.remove .rc-tip{opacity:1;transform:translate(-50%,0)}
.rc-mark:hover .rc-tip,.rc-mark:focus-visible .rc-tip{opacity:1;transform:translate(-50%,0);z-index:3}
.rc-mark:focus-visible .rc-pin{outline:3px solid var(--paper);outline-offset:3px}
@keyframes rc-pulse{0%{box-shadow:0 0 0 0 var(--c)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* 4. Признаки */
.rc-signs{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start}
.rc-signs-head{position:sticky;top:120px}
.rc-signs-head h2{font-size:clamp(40px,4.4vw,68px);line-height:1;margin:12px 0 22px}
.rc-signs-head p{color:var(--soft);font-size:15px;line-height:1.7;max-width:36ch}
.rc-sign-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rc-sign{position:relative;padding:30px 28px 32px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#ffffff70,#ffffff00 60%);overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.rc-sign:first-child{grid-column:1/-1}
.rc-sign:before{content:"";position:absolute;inset:auto -20% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#173b2b1f,#173b2b00 70%);transition:transform .8s var(--ease)}
.rc-sign:hover{transform:translateY(-4px);border-color:#173b2b55;box-shadow:0 24px 50px -30px #0e251c66}
.rc-sign:hover:before{transform:scale(1.6)}
.rc-num{display:block;font:400 clamp(44px,4vw,60px)/1 var(--serif);color:var(--forest);opacity:.32;margin-bottom:18px}
.rc-sign h3{font-size:clamp(24px,2vw,30px);margin:0 0 10px}
.rc-sign p{font-size:15px;line-height:1.65;color:var(--soft);margin:0;max-width:36ch}

/* 5. Этапы: линия заполняется по прокрутке */
.rc-stages{background:var(--forest);color:var(--paper);padding-block:clamp(90px,11vw,150px)}
.rc-stages-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start}
.rc-stages-head{position:sticky;top:120px}
.rc-stages-head .kicker{color:var(--on-dark-soft)}
.rc-stages-head h2{font-size:clamp(40px,4.4vw,68px);line-height:1.02;margin:12px 0 34px}
.rc-stages-head h2 em{font-style:italic;color:#cfe0c9;font-size:.72em;display:block;margin-top:8px}
.rc-timeline{list-style:none;margin:0;padding:0 0 0 56px;position:relative;--fill:0}
.rc-timeline:before,.rc-timeline:after{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:1px}
.rc-timeline:before{background:#f3f0e733}
.rc-timeline:after{background:var(--paper);transform-origin:top;transform:scaleY(var(--fill))}
.rc-stage{position:relative;padding:0 0 clamp(38px,5vw,60px)}
.rc-stage:last-child{padding-bottom:0}
.rc-stage-n{position:absolute;left:-56px;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 11px/1 var(--sans);background:var(--forest);border:1px solid #f3f0e766;color:var(--on-dark-soft);z-index:1;transition:background-color .4s,color .4s,border-color .4s}
.rc-stage.on .rc-stage-n{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.rc-stage h3{font-size:clamp(26px,2.2vw,34px);margin:2px 0 12px}
.rc-stage p{font-size:15px;line-height:1.75;color:var(--on-dark-soft);max-width:56ch;margin:0}

/* 6. Цитата на фото */
.rc-quote{position:relative;min-height:min(92svh,860px);display:flex;align-items:flex-end;color:var(--paper);overflow:hidden;isolation:isolate}
.rc-quote>img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2;transform:translateY(var(--shift,0));will-change:transform}
.rc-quote-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0e251cf2 0%,#0e251c8c 45%,#0e251c33 100%)}
.rc-quote .wrap{padding-block:clamp(70px,10vw,140px)}
.rc-quote blockquote{margin:0}
.rc-quote blockquote p{font:400 clamp(40px,5.6vw,92px)/1.02 var(--serif);max-width:16ch;margin:0}
.rc-quote-note{max-width:62ch;font-size:15px;line-height:1.75;color:#e3e9e0;margin:30px 0 0}
.rc-quote-note a{color:inherit;text-decoration:underline;text-underline-offset:4px}

/* Появление блоков */
.js .rc-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .rc-reveal.in{opacity:1;transform:none}

@media(max-width:900px){
 .rc-layers-head,.rc-answer,.rc-signs,.rc-stages-grid{grid-template-columns:1fr}
 .rc-signs-head,.rc-stages-head{position:static}
 .rc-layers-grid{grid-template-columns:1fr}
 .rc-tabs{grid-template-columns:repeat(3,1fr)}
 .rc-layer small{display:none}
 .rc-layer{padding:14px}
}
@media(max-width:700px){
 .rc-hero{height:240vh}
 .rc-shade{background:linear-gradient(0deg,#0e251cf2 0%,#0e251cb3 55%,#0e251c4d 100%)}
 .rc-hero-copy{justify-content:flex-end;padding-bottom:120px}
 .rc-hero h1{font-size:clamp(50px,15vw,70px)}
 .rc-meter{left:var(--gutter);right:auto;bottom:62px}
 .rc-ai-note{bottom:16px}
 .rc-sign-list{grid-template-columns:1fr}
 .rc-tabs{grid-template-columns:1fr}
 .rc-layer{grid-template-columns:14px 1fr}
 .rc-tip{white-space:normal;width:170px;font-size:11px}
 .rc-mark:nth-child(n){}
 .rc-timeline{padding-left:48px}
 .rc-stage-n{left:-48px}
}
@media(prefers-reduced-motion:reduce){
 .rc-hero{height:auto}
 .rc-sticky{position:relative;height:88svh}
 .rc-canvas,.rc-meter,.rc-scroll span:after{display:none}
 .rc-poster{content:url(recon/f-036.webp)}
 .rc-big .w{opacity:1}
 .js .rc-reveal{opacity:1;transform:none}
 .rc-quote>img{transform:none}
 .rc-map .rc-pin{animation:none!important}
}
/* доработки после проверки */
.rc-hero-copy .breadcrumbs,.rc-hero-copy .breadcrumbs a,.rc-hero-copy .breadcrumbs span{color:#e3e9e0}
.rc-hero-copy .breadcrumbs a{text-decoration-color:#e3e9e080}
.rc-mark.at-right .rc-tip{left:auto;right:-8px;transform:translate(0,6px)}
.rc-mark.at-left .rc-tip{left:-8px;transform:translate(0,6px)}
.rc-map[data-active] .rc-mark.at-right .rc-tip,.rc-map[data-active] .rc-mark.at-left .rc-tip{transform:translate(0,6px)}
.rc-map[data-active=keep] .rc-mark.keep.at-right .rc-tip,.rc-map[data-active=change] .rc-mark.change.at-right .rc-tip,.rc-map[data-active=remove] .rc-mark.remove.at-right .rc-tip,.rc-map[data-active=keep] .rc-mark.keep.at-left .rc-tip,.rc-map[data-active=change] .rc-mark.change.at-left .rc-tip,.rc-map[data-active=remove] .rc-mark.remove.at-left .rc-tip,.rc-mark.at-right:hover .rc-tip,.rc-mark.at-left:hover .rc-tip{transform:translate(0,0)}
.rc-map{overflow:visible}
.rc-layers{overflow:hidden}
@media(max-width:700px){.rc-tip{width:150px}.rc-meter i{width:90px}}
.rc-quote .wrap{width:100%}
.rc-legend{display:none;list-style:none;margin:14px 0 0;padding:0;gap:8px}
.rc-legend li{display:none;align-items:center;gap:10px;font-size:13px;line-height:1.4;color:#e3e9e0}
@media(max-width:700px){
 .rc-tip{display:none}
 .rc-legend{display:grid}
 .rc-map[data-active=keep] .rc-legend .keep,.rc-map[data-active=change] .rc-legend .change,.rc-map[data-active=remove] .rc-legend .remove{display:flex}
 .rc-marks{inset:10px}
 .rc-map{padding-bottom:12px}
}
.rc-quote-veil{background:linear-gradient(90deg,#0e251ce0 0%,#0e251ca6 42%,#0e251c33 75%),linear-gradient(0deg,#0e251cf2 0%,#0e251c4d 55%)}
/* Размытый фон под картинкой на высоких экранах (27.09): отдельный канвас с CSS-размытием вместо растянутых пикселей */
.rc-canvas-bg{position:absolute;inset:-6%;width:112%;height:112%;filter:blur(26px) saturate(1.05) brightness(.8);opacity:0;transition:opacity .6s var(--ease)}
.rc-hero.is-ready.is-letterbox .rc-canvas-bg{opacity:1}
@media(prefers-reduced-motion:reduce){.rc-canvas-bg{display:none}}