/* MONOCASO — "4 принципи" interactive section (homepage, standalone block). */
*{box-sizing:border-box}
.why{background:#fff;color:#000;padding:clamp(80px,14vh,150px) clamp(20px,4vw,56px);font-family:"Montserrat",-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.why[data-compact="true"]{padding:clamp(60px,9vh,100px) clamp(20px,4vw,56px)}
.why__inner{max-width:1440px;margin:0 auto}
.why img{display:block}
.why a{color:inherit;text-decoration:none}

.why__head{margin-bottom:clamp(30px,4.5vh,56px)}
.why__eyebrow{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- wide ---------- */
.why__wide{display:none}
.why.is-wide .why__wide{display:grid;grid-template-columns:1.32fr 1fr;
  gap:clamp(30px,4.5vw,78px);align-items:stretch}

.why__stage{position:relative;overflow:hidden;background:#f3f3f3;height:min(76vh,720px)}
.why[data-compact="true"] .why__stage{height:min(60vh,520px)}
.why__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);
  transition:opacity .8s cubic-bezier(.2,0,.1,1),transform 1.4s cubic-bezier(.2,0,.1,1)}
.why__stage img.is-on{opacity:1;transform:scale(1.02)}

.why__rows{display:flex;flex-direction:column;justify-content:center}
.why__row{all:unset;cursor:pointer;display:block;box-sizing:border-box;width:100%;
  padding:clamp(18px,3vh,30px) 0;border-top:1px solid rgba(0,0,0,.12)}
.why[data-compact="true"] .why__row{padding:clamp(14px,2vh,22px) 0}
.why__rowhead{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px)}
.why__panel,.why__panelin,.why__track,.why__fill{display:block}
.why__title{margin:0;font-size:clamp(21px,2.5vw,40px);font-weight:600;letter-spacing:-.03em;
  line-height:1.08;opacity:.22;transition:opacity .4s ease}
.why__row.is-on .why__title{opacity:1}

.why__panel{display:block;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .7s cubic-bezier(.2,0,.1,1),opacity .5s ease}
.why__row.is-on .why__panel{max-height:260px;opacity:1}
.why__panelin{padding-left:0;padding-top:14px}
.why__lead{margin:0;max-width:44ch;font-size:15px;font-weight:400;
  line-height:1.62;opacity:.58}

/* ---------- narrow ---------- */
.why__narrow{display:none}
.why.is-narrow .why__narrow{display:block}

.why__frame{position:relative;overflow:hidden;background:#f0f0ef;aspect-ratio:4/5;
  touch-action:pan-y}
.why__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s ease}
.why__frame img.is-on{opacity:1}
.why__bars{display:none}

.why__chips{display:flex;gap:6px;margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.why__chips::-webkit-scrollbar{display:none}
.why__chip{all:unset;cursor:pointer;flex:0 0 auto;white-space:nowrap;text-align:center;
  padding:9px 14px;border-radius:8px;background:rgba(0,0,0,.05);
  transition:background .35s ease}
.why__chip.is-on{background:#000}
.why__chip span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  line-height:1.25;opacity:.4;transition:opacity .35s ease,color .35s ease}
.why__chip.is-on span{opacity:1;color:#fff}

.why__mtitle{margin:0 0 12px;font-size:clamp(20px,5vw,26px);font-weight:600;
  letter-spacing:-.03em;line-height:1.1}
.why__mcopy{padding-top:26px}
.why__mlead{margin:0;font-size:15px;font-weight:400;line-height:1.62;opacity:.6}

.why :focus-visible{outline:2px solid #000;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.why *{transition-duration:.01ms!important}}