/* "Почему мы" from Figma 3:1545: full-bleed ink section, hatch strips, 3x2 ruled grid on 1710. */
.why-us { position:relative; margin:0 0 var(--section-gap); color:var(--color-paper); background:var(--color-ink); scroll-margin-top:var(--topbar-h); }
.why-us-hatch { position:absolute; inset:0; opacity:.11; background:repeating-linear-gradient(135deg,var(--color-hatch) 0 1px,transparent 1px 7px); pointer-events:none; }
.why-us-head { position:relative; display:grid; gap:var(--space-40); padding:var(--space-80) var(--page-gutter) var(--space-48); }
.why-us-head > :not(.why-us-hatch) { position:relative; }
.why-us-title { display:grid; gap:var(--space-16); margin:0; }
.why-us-kicker { display:block; }
.why-us-title h2 { margin:0; font-weight:400; overflow-wrap:break-word; }
.why-us-title h2 br { display:none; }
.why-us-title em { font-style:normal; color:var(--color-accent); }
.why-us-intro { position:relative; max-width:806px; padding:0; }
.why-us-intro::before { content:""; position:absolute; left:0; top:0; width:40px; height:40px; background:var(--color-accent); mask:url('/assets/figma-mm2/accent-square.svg') center/contain no-repeat; }
.why-us-intro p { margin:0; font-weight:400; }
.why-us-intro::before { display:none; }
.why-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1px; margin-inline:var(--page-gutter); border:1px solid var(--color-dark-rule); background:var(--color-dark-rule); container-type:inline-size; }
.why-cell { position:relative; min-width:0; margin:0; background:var(--color-ink); }
.why-cell--text { display:grid; grid-template-rows:80px 1fr; gap:var(--space-48); padding:var(--space-48) var(--space-24); }
.why-cell--text > div:last-child { align-self:end; }
.why-cell--text h3 { margin:0 0 var(--space-20); font-weight:400; }
.why-cell--text p { margin:0; color:var(--color-dark-muted); }
.why-cell--image { min-height:320px; contain:paint; }
/* Absolute image: its intrinsic 4:5 height must not inflate the row; the row follows the text cells. */
.why-cell--image img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.why-us-foot { position:relative; height:80px; }
.why-deco { display:block; flex:none; align-self:flex-start; }
.why-dots,.why-bars { align-content:start; }
.why-dots { display:grid; grid-template-columns:repeat(3,22px); gap:8px; width:max-content; }
.why-dots i { display:block; width:22px; height:22px; border-radius:50%; background:var(--color-steel); }
.why-dots i:last-child { background:var(--color-accent); }
.why-bars { display:grid; gap:9px; width:75px; }
.why-bars i { display:block; width:100%; height:19px; border-radius:1px; background:var(--color-steel); }
.why-bars i:last-child { background:var(--color-accent); }
.why-bars--growing { display:flex; align-items:flex-end; gap:7px; width:auto; height:75px; }
.why-bars--growing i { width:19px; }
.why-bars--growing i:nth-child(1) { height:24px; }
.why-bars--growing i:nth-child(2) { height:41px; }
.why-bars--growing i:nth-child(3) { height:56px; }
.why-bars--growing i:nth-child(4) { height:75px; }
.why-toggle { position:relative; box-sizing:border-box; width:96px; height:49px; border:4.5px solid var(--color-steel); border-radius:33px; }
.why-toggle i { position:absolute; top:4.5px; left:50.5px; width:31px; height:31px; border-radius:50%; background:var(--color-accent); }
@media (max-width:599px) {
  .why-us-intro { padding:0; }
  .why-us-intro::before { width:28px; height:28px; }
  .why-cell--text { grid-template-rows:64px 1fr; min-height:320px; padding:var(--space-32) var(--space-20); gap:var(--space-32); }
  .why-cell--image { min-height:240px; }
  .why-dots { grid-template-columns:repeat(3,16px); gap:6px; }
  .why-dots i { width:16px; height:16px; }
  .why-bars { width:56px; gap:7px; }
  .why-bars i { height:14px; }
  .why-bars--growing { width:auto; height:56px; gap:5px; }
  .why-bars--growing i { width:14px; }
  .why-bars--growing i:nth-child(1) { height:18px; }
  .why-bars--growing i:nth-child(2) { height:31px; }
  .why-bars--growing i:nth-child(3) { height:42px; }
  .why-bars--growing i:nth-child(4) { height:56px; }
  .why-toggle { width:72px; height:37px; border-width:3px; }
  .why-toggle i { top:4px; left:38px; width:23px; height:23px; }
}
@media (min-width:600px) and (max-width:1099px) {
  /* Two columns read as a checkerboard: photo right, then photo left. */
  .why-cell:nth-child(1) { order:1; } .why-cell:nth-child(2) { order:2; } .why-cell:nth-child(3) { order:4; } .why-cell:nth-child(4) { order:3; } .why-cell:nth-child(5) { order:5; } .why-cell:nth-child(6) { order:6; }
}
@media (min-width:600px) {
  .why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why-cell { min-height:calc((100cqw - 1px) / 2 * 545 / 557); }
}
@media (min-width:1100px) {
  .why-us-head { grid-template-columns:minmax(0,749fr) minmax(0,921fr); align-items:start; padding:var(--space-112) var(--page-gutter) var(--space-64); }
  .why-us-title { gap:var(--space-20); }
  .why-us-intro { max-width:none; margin-top:var(--space-40); padding-left:var(--space-64); }
  .why-us-intro::before { width:48px; height:48px; }
  .why-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .why-cell--text { padding:60px 40px; }
  /* Cells keep the 557:545 proportion of the 1710 frame but still stretch to the tallest cell of the row. */
  .why-cell { min-height:calc((100cqw - 2px) / 3 * 545 / 557); }
  .why-us-title h2 br { display:inline; }
  .why-us-foot { height:150px; }
}
@media (min-width:1400px) {
  .why-us-head { padding-top:150px; padding-bottom:70px; }
}