/* P1: путь к расчёту для платного трафика. Порядок меняется визуально,
   чтобы не ломать существующие якоря и обработчики форм. */
#top{display:flex;flex-direction:column}
#top>.hero{order:1}
#solutions{order:2}
#turnkey-path{order:3}
#formats{order:4}
#before-after{order:5}
#prices{order:6}
#cost-factors{order:7}
#quiz{order:8}
#compare{order:9}
#only-glazing-or-turnkey{order:10}
#turnkey{order:11}
#trust{order:12}
#process{order:13}
#reviews{order:14}
#faq{order:15}
#final-form{order:16}

/* These two sections repeat information that is now present before the quiz
   or in the order process, so the visitor is not sent through a long loop. */
#construction,#measurement{display:none}

/* One compact zone with examples of complex solutions. */
#turnkey-path{padding-bottom:56px}
#formats{padding-top:46px}
#formats .formats-intro .title{max-width:960px}
#formats .formats-intro+.types{margin-top:28px}
#formats .type,#formats .type img{min-height:232px;height:232px}
#formats .type:after{inset:48% 0 0}
#formats .type__content{padding:16px 18px}
#formats .type__content p{display:none}
#formats .type__content h3{font-size:19px}
#formats .type__content>span:not(.type__badge){display:inline-block;margin-top:5px;font-size:13px}
#before-after{padding-top:48px}
#before-after .before-after__note{text-transform:none;letter-spacing:0;line-height:1.45}

/* Price is the decision point immediately before the quiz. */
#prices{padding-bottom:42px}
#cost-factors{padding-top:42px;padding-bottom:58px}
#cost-factors .notice{margin-top:22px}

/* The service list remains readable without nine equally prominent cards. */
#turnkey .services{gap:12px}
#turnkey .service{min-height:0;padding:17px}
#turnkey .service p{font-size:13px;line-height:1.4}
#turnkey .services-bridge{margin-top:20px}
#turnkey .notice{display:none}

/* The price heading has enough room on a wide desktop. Other long headings
   intentionally keep their natural wrap instead of becoming tiny. */
@media (min-width:1180px){
  #prices .title{max-width:none;white-space:nowrap;font-size:clamp(40px,3.4vw,52px)}
}

/* FAQ is faster to scan in two equal columns on desktop. */
@media (min-width:981px){
  #faq .faq{grid-template-columns:1fr;gap:30px}
  #faq .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:42px}
  #faq .faq-list details:nth-child(-n+2){border-top:1px solid var(--line)}
}

/* Actionable cards reveal that the whole area opens the relevant next step. */
.card--interactive{cursor:pointer;outline:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card--interactive:hover,.card--interactive:focus-visible{transform:translateY(-3px);border-color:#72c5ef;box-shadow:0 16px 30px rgba(8,82,143,.18)}
#prices .price.card--interactive{position:relative}
#prices .price.card--interactive:after{position:absolute;top:16px;right:16px;content:'→';color:var(--blue);font-size:22px;font-weight:900;opacity:0;transition:opacity .2s ease}
#prices .price.card--interactive:hover:after,#prices .price.card--interactive:focus-visible:after{opacity:1}

/* A subtle product image adds depth without reducing contrast on blue blocks. */
#compare,.quiz-section,.final{position:relative;isolation:isolate;overflow:hidden}
#compare:before,.quiz-section:before,.final:before{position:absolute;z-index:0;inset:0;content:'';background-image:linear-gradient(90deg,rgba(6,43,86,.96),rgba(6,43,86,.76)),url('../images/hero-balcony-v3.png');background-repeat:no-repeat;background-position:center,right center;background-size:cover;opacity:.38}
#compare .container,.quiz-section .quiz-layout,.final .final__layout{position:relative;z-index:1}

/* Contact details and map in the footer. */
.footer__inner--contacts{display:grid;grid-template-columns:.8fr .95fr 1.35fr;gap:30px;align-items:start}
.footer__about,.footer__address{display:grid;gap:8px;font-style:normal}
.footer__about b,.footer__address b{color:#fff;font-size:16px}
.footer__about span,.footer__address span{line-height:1.45}
.footer__about a,.footer__address a{width:max-content;max-width:100%;color:#9fdbff;font-weight:800}
.footer__map{min-height:150px;overflow:hidden;border:1px solid rgba(159,219,255,.25);border-radius:10px;background:#0d3156}
.footer__map iframe{display:block;width:100%;height:150px;border:0;filter:saturate(.75) brightness(.88)}

@media (max-width:620px){
  #turnkey-path{padding-bottom:46px}
  #formats{padding-top:38px}
  #formats .type,#formats .type img{height:205px}
  #before-after{padding-top:42px}
  #prices{padding-bottom:34px}
  #cost-factors{padding-top:34px;padding-bottom:48px}
  #faq .faq-list{display:block}
  .footer__inner--contacts{grid-template-columns:1fr;gap:22px;text-align:left}
  .footer__inner--contacts a{margin-top:0}
  .footer__map,.footer__map iframe{height:205px}
}