@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("assets/fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("assets/fonts/montserrat-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{

  --n-000: #fff;
  --n-050: #f6f9fb;

  --n-100: #e9f0f5;
  --n-250: #efefef;

  --n-400: #c9d3dc;
  --n-450: #8f9ba6;
  --n-500: #acacac;

  --n-600: #696969;
  --n-800: #484848;
  --n-900: #000;
  --n-950: #0d0d0d;

  --b-950: #001c38;
  --b-900: #012a5c;

  --b-700: #045196;
  --b-550: #0049a6;
  --b-500: #0263bb;
  --b-400: #0171d1;
  --b-200: #81d6f6;
  --b-100: #d2f2ff;
  --b-crumb: #6271b1;

  --a-teal:   #17c7b2;
  --a-check:  #00adaa;

  --a-check-ink: #00807e;
  --a-badge:  #3d8272;
  --a-bullet: #0039c8;
  --a-red:    #c80a0a;
  --a-online: #02ff20;
  --a-danger: #ff9a9a;
  --a-warm:   #fff8ee;
  --a-attach: #45bfd7;

  --text:          var(--n-900);
  --text-body:     var(--n-800);
  --text-mute:     var(--n-600);
  --link:          var(--b-500);

  --text-inv:       var(--n-000);
  --text-inv-soft:  var(--n-250);
  --text-inv-key:   var(--b-100);
  --text-inv-dim:   var(--n-450);
  --text-inv-cap:   var(--n-400);
  --text-inv-note:  #b7cde0;

  --brand:          var(--b-500);
  --surface:        var(--n-050);

  --tint:           var(--n-100);
  --surface-dark:   var(--n-950);

  --num:            var(--n-600);

  --rail:           var(--n-400);

  --veil:         var(--b-950);
  --hero-a:       var(--b-700);
  --hero-b:       var(--b-400);
  --cons-a:       var(--b-700);
  --cons-b:       var(--b-550);

  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --pad: 25px;
  --maxw: 1678px;
  --topbar-h: 76px;

  --subbar-h: 76px;
  --stick-h: var(--topbar-h);

  --usp-h: 212px;
  --usp-gap: clamp(20px, 2.2vw, 38px);

  --c-num:  3.58%;
  --c-logo: 23.48%;
  --c-gap:  12.74%;
  --c-body: 60.2%;

  --col-text: calc(var(--c-num) + var(--c-logo) + var(--c-gap));

  --col-text-n: 0.398;

  --fl: rgba(255,255,255,.18);

  --tick-lift:   122px;

  --tick-h-b: clamp(210px, calc(26vw - 40px), 410px);
  --tick-lift-d: 240px;
  --tick-shift:   50px;

  --tick-x1: calc(var(--guide-1) - var(--tick-shift));
  --tick-x2: calc(var(--col-x)   - var(--tick-shift));

  --steps-h: 154px;
  --step-1: calc(var(--steps-h) * 0.5);
  --step-2: calc(var(--steps-h) * 0.071);
  --rule-gap: 28px;

  --band-focus: 64%;

  --rule-y: 154px;
  --shell-w: min(100% - var(--pad)*2, var(--maxw));
  --shell-x: calc((100% - var(--shell-w)) / 2);
  --col-x:   calc(var(--shell-x) + var(--col-text-n) * var(--shell-w));
  --guide-2: calc(var(--col-x) - var(--rule-gap));
  --guide-1: calc(var(--shell-x) + 0.132 * var(--shell-w));

  --caret-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4' fill='none'%3E%3Cpath d='M0.5 0.5L4 3.5L7.5 0.5' stroke='%23000'/%3E%3C/svg%3E");
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.35 6.98'%3E%3Cpath d='M0.57 3.57L3.57 5.62L7.57 0.62' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm4.03 5.86-4.9 4.9a.8.8 0 0 1-1.13 0L3.97 8.53a.8.8 0 1 1 1.13-1.13l1.46 1.47 4.34-4.34a.8.8 0 0 1 1.13 1.13Z' fill='%23000'/%3E%3C/svg%3E");
  --lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Crect x='4.5' y='9.5' width='13' height='9' rx='1.5' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M7.5 9.5V7a3.5 3.5 0 1 1 7 0v2.5' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");

  --upload-cloud-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M49.8125 28.0117C49.7165 28.0117 49.6202 28.0357 49.5242 28.0357C49.5722 27.5788 49.5962 27.1221 49.5962 26.6652C49.5962 18.8278 43.3673 12.4615 35.5385 12.4615C28.3818 12.4615 22.3634 17.7939 21.4267 24.6942C20.466 24.3817 19.4815 24.1895 18.4488 24.1895C13.0696 24.1895 8.69885 28.5648 8.69885 33.9503C8.69885 33.9983 8.72285 34.0463 8.72285 34.0705C8.29038 33.9985 7.83415 33.9503 7.37792 33.9503C3.53538 33.9501 0.461538 37.0516 0.461538 40.8501C0.461538 44.6485 3.33554 47.5385 7.15385 47.5385H49.6154C54.9948 47.5385 59.5385 43.158 59.5385 37.7728C59.5625 32.3873 55.1917 28.0117 49.8125 28.0117Z' fill='%23000'/%3E%3C/svg%3E");
  --upload-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.3846 47.5385V37.3846H25.3846L33.7068 26.2908L42 37.3846H36V47.5385H31.3846Z' fill='%23000'/%3E%3C/svg%3E");
  --upload-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M49.8125 28.0117C49.7165 28.0117 49.6202 28.0357 49.5242 28.0357C49.5722 27.5788 49.5962 27.1221 49.5962 26.6652C49.5962 18.8278 43.3673 12.4615 35.5385 12.4615C28.3818 12.4615 22.3634 17.7939 21.4267 24.6942C20.466 24.3817 19.4815 24.1895 18.4488 24.1895C13.0696 24.1895 8.69885 28.5648 8.69885 33.9503C8.69885 33.9983 8.72285 34.0463 8.72285 34.0705C8.29038 33.9985 7.83415 33.9503 7.37792 33.9503C3.53538 33.9501 0.461538 37.0516 0.461538 40.8501C0.461538 44.6485 3.33554 47.5385 7.15385 47.5385H31.3846V37.3846H25.3846L33.7068 26.2908L42 37.3846H36V47.5385H49.6154C54.9948 47.5385 59.5385 43.158 59.5385 37.7728C59.5625 32.3873 55.1917 28.0117 49.8125 28.0117Z' fill='%23000'/%3E%3C/svg%3E");
  --seal-mask:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M9.37028 2.03077C10.5625 0.893922 12.4375 0.893923 13.6297 2.03077C14.2529 2.62498 15.0959 2.93183 15.9552 2.8772C17.5993 2.77267 19.0356 3.97787 19.2182 5.61511C19.3136 6.47085 19.7622 7.24782 20.4555 7.75832C21.7822 8.73504 22.1077 10.5815 21.1952 11.9531C20.7182 12.6699 20.5624 13.5535 20.7654 14.3902C21.1539 15.9912 20.2164 17.6149 18.6357 18.079C17.8096 18.3216 17.1223 18.8983 16.7399 19.6698C16.0084 21.1458 14.2466 21.7871 12.7374 21.1266C11.9486 20.7813 11.0514 20.7813 10.2626 21.1266C8.75345 21.7871 6.99157 21.1458 6.26005 19.6698C5.87771 18.8983 5.19044 18.3216 4.36427 18.079C2.78361 17.6149 1.84613 15.9912 2.23455 14.3902C2.43757 13.5535 2.28178 12.6699 1.80481 11.9531C0.892262 10.5815 1.21784 8.73504 2.54446 7.75832C3.23784 7.24782 3.68642 6.47085 3.78184 5.61511C3.9644 3.97787 5.40069 2.77267 7.04476 2.8772C7.90407 2.93183 8.74713 2.62498 9.37028 2.03077Z' fill='%23000'/%3E%3C/svg%3E");

  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.2132 14.7279'%3E%3Cpath d='M1 6.36396H0V8.36396H1V7.36396V6.36396ZM21.9203 8.07107C22.3108 7.68054 22.3108 7.04738 21.9203 6.65685L15.5563 0.292893C15.1658 -0.097631 14.5327 -0.097631 14.1421 0.292893C13.7516 0.683418 13.7516 1.31658 14.1421 1.70711L19.799 7.36396L14.1421 13.0208C13.7516 13.4113 13.7516 14.0445 14.1421 14.435C14.5327 14.8256 15.1658 14.8256 15.5563 14.435L21.9203 8.07107ZM1 7.36396V8.36396H21.2132V7.36396V6.36396H1V7.36396Z' fill='%23000'/%3E%3C/svg%3E");
  --pin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.2 5.3 7.7 5.5 7.85a.9.9 0 0 0 1 0C6.7 13.7 12 10.2 12 6a6 6 0 0 0-6-6Zm0 8.4A2.4 2.4 0 1 1 6 3.6a2.4 2.4 0 0 1 0 4.8Z' fill='%23000'/%3E%3C/svg%3E");
  --seal-tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M8.09285 11.3387L11.338 13.6299L14.9077 8.51874' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;

  scrollbar-gutter:stable;
}

.drawer__sheet,
.sitesearch__inner,
.drop__list{ overscroll-behavior:contain; }

html,
body{ overscroll-behavior-x:none; }
.related__strip,
.cats__row,
.article__table,
.prose-table,
.reg-table,
.breadcrumbs,
.crumbs,
.chips,
.gallery__thumbs,
.shots,
.pcards{ overscroll-behavior-x:contain; }

body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.27;
  color:var(--text-body);
  background:var(--n-000);

  overflow-x:hidden;
  overflow-x:clip;
}
img,svg{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

input, textarea, select{ font:inherit; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--n-000); color:var(--brand); padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:12px; top:12px; }

.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.shell{
  width:min(100% - var(--pad)*2, var(--maxw));
  margin-inline:auto;
}

.rule{ position:absolute; background:rgba(255,255,255,.18); pointer-events:none; }

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;

  color:var(--text-inv);
  transition:background-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.admin-bar .topbar{ top:32px; }

.admin-bar .subbar,
.admin-bar .sitesearch{ top:calc(var(--topbar-h) + 32px); }
@media (max-width:1279px){

  .admin-bar #menu{ top:calc(var(--topbar-h) + 32px); }
}
@media (max-width:782px){

  .admin-bar .topbar{ top:46px; }
  .admin-bar .subbar,
  .admin-bar .sitesearch,
  .admin-bar #menu{ top:calc(var(--topbar-h) + 46px); }
}
@media (max-width:767px){

  .admin-bar .city__panel{ top:calc(var(--topbar-h) + 46px); }
}

@keyframes byte-topbar-in {
  from { opacity:0; transform:translateY(-100%); }
  to   { opacity:1; transform:none; }
}
@keyframes byte-topbar-item {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:none; }
}
@keyframes byte-topbar-fade {
  from { opacity:0; }
  to   { opacity:1; }
}

.topbar{ animation:byte-topbar-in .65s cubic-bezier(.22, .61, .36, 1) backwards; }
.topbar .nav__brand{ animation:byte-topbar-item .5s ease backwards .35s; }

.topbar .nav__list{ animation:byte-topbar-fade .5s ease backwards .45s; }
.topbar .nav__tools{ animation:byte-topbar-item .5s ease backwards .55s; }

@media (prefers-reduced-motion: reduce){
  .topbar,
  .topbar .nav__brand,
  .topbar .nav__list,
  .topbar .nav__tools{ animation:none; }
}

.topbar.is-light{
  color:var(--text);
  background:var(--n-000);
  box-shadow:inset 0 -1px 0 var(--tint);
}

.topbar.is-stuck{
  box-shadow:inset 0 -1px 0 var(--tint), 0 4px 12px rgba(0,0,0,.06);
}

.scrim{
  position:fixed; inset:0; z-index:50;
  background:rgb(0 28 56 / .5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s;
}
.scrim.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.hero{
  position:sticky; top:0; z-index:0;

  min-height:clamp(430px, 40vw, 569px);
  padding-top:var(--topbar-h);
  padding-bottom:46px;
  display:flex; flex-direction:column;
  color:var(--text-inv);
  overflow:hidden;
  background:linear-gradient(190.567deg, var(--hero-a) 28.464%, var(--hero-b) 82.079%);
}
.hero > .shell{ flex:1; display:flex; flex-direction:column; }

.site-main{ position:relative; z-index:1; background:var(--n-000); }

[id]{ scroll-margin-top:calc(var(--stick-h) + 14px); }

.hero__dim{
  position:absolute; inset:0; z-index:2;
  background:var(--veil);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}
.hero__grad,
.hero__glow,
.hero__rules{ position:absolute; z-index:0; pointer-events:none; }

.hero__grad,
.cons__grad{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.hero__grad{
  --g1:linear-gradient(190deg, #004d8f 28%, #0171d1 82%);
  --g2:linear-gradient(145deg, #003f7a  8%, #0263bb 58%, #0b8bb4 100%);
  --g3:linear-gradient( 35deg, #084d8f 12%, #0171d1 52%, #17c7b2 108%);
  --g4:linear-gradient(215deg, #0049a6 18%, #045196 62%, #0097c5 100%);
  --g5:radial-gradient(120% 95% at 22% 108%, #17c7b2 0%, #0171d1 42%, #004d8f 100%);
}
.cons__grad{
  --g1:radial-gradient(130% 100% at 22% 108%, #17c7b2 0%, #0263bb 44%, #012a5c 100%);
  --g2:linear-gradient(150deg, #012f66  0%, #0263bb 55%, #0d86c9 100%);
  --g3:linear-gradient(205deg, #0a2f7a  5%, #0171d1 50%, #16b8c4 106%);
  --g4:linear-gradient( 20deg, #003c78 10%, #045196 45%, #0a8fb8 100%);
  --g5:linear-gradient(176deg, #045196 35%, #0049a6 100%);
}
.hero__grad > i,
.cons__grad > i{
  position:absolute; inset:0;
  display:block;
  opacity:0;
  transition-property:opacity;
  transition-timing-function:linear;
}

.hero__glow{
  inset:0;
  background:
    radial-gradient(120% 78% at 32% 122%, rgba(23,199,178,.62) 0%, rgba(23,199,178,0) 60%),
    radial-gradient( 70% 60% at 88% 118%, rgba(0,158,205,.45) 0%, rgba(0,158,205,0) 65%);
}

.hero__rules{ inset:0; }

.hero > .shell{ position:relative; z-index:1; }

.rule--h1{ left:var(--pad);   width:calc(var(--guide-2) - var(--rule-gap) - var(--pad)); bottom:var(--rule-y); height:1px; overflow:hidden; }
.rule--h2{ left:var(--col-x); right:var(--pad);                                          bottom:var(--rule-y); height:1px; overflow:hidden; }
.rule--v1{ left:var(--guide-2); top:20.6%; bottom:calc(var(--rule-y) + 12px); width:1px; overflow:hidden; }
.rule--v3{ left:var(--guide-2); top:calc(100% - var(--rule-y) + 12px); bottom:0; width:1px; overflow:hidden; }

.spark{ position:absolute; opacity:0; pointer-events:none; }
.spark--h{ top:0;  height:1px; width:26%; }
.spark--v{ left:0; width:1px;  height:34%; }

.spark--ltr{ background:linear-gradient(to right,  rgba(255,255,255,0), var(--n-000)); }
.spark--rtl{ background:linear-gradient(to left,   rgba(255,255,255,0), var(--n-000)); }
.spark--btt{ background:linear-gradient(to top,    rgba(255,255,255,0), var(--n-000)); }
.spark--ttb{ background:linear-gradient(to bottom, rgba(255,255,255,0), var(--n-000)); }

@keyframes spark-h-ltr{
  0%{ left:-26%; opacity:0 } 14%{ opacity:1 } 72%{ opacity:1 } 100%{ left:100%; opacity:0 }
}
@keyframes spark-h-rtl{
  0%{ left:100%; opacity:0 } 14%{ opacity:1 } 72%{ opacity:1 } 100%{ left:-26%; opacity:0 }
}
@keyframes spark-v-btt{
  0%{ top:100%;  opacity:0 } 14%{ opacity:1 } 72%{ opacity:1 } 100%{ top:-34%;  opacity:0 }
}
@keyframes spark-v-ttb{
  0%{ top:-34%;  opacity:0 } 14%{ opacity:1 } 72%{ opacity:1 } 100%{ top:100%;  opacity:0 }
}

.nav{
  position:relative;
  display:grid;
  grid-template-columns:var(--col-text) 1fr auto;
  align-items:center;
  padding:18px 0;
  min-height:76px;
}

.nav__brand{
  display:flex; align-items:center; min-width:0;
  gap:clamp(16px, 2vw, 34px);
}

.nav__logo{ position:relative; top:-2px; display:block; width:clamp(96px, 7vw, 121px); flex:none; }

.nav__logo-img{ display:block; width:100%; transition:opacity .25s ease; }
.nav__logo-img--on-white{
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  opacity:0;
}

.nav__city{
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  white-space:nowrap;
  transition:color .25s ease, opacity .25s ease;
}

.city.is-open > .nav__city{ opacity:.75; }

.nav__pin{
  flex:none; width:12px; height:14px;
  background:var(--n-000);
  -webkit-mask:var(--pin-mask) no-repeat center / contain;
          mask:var(--pin-mask) no-repeat center / contain;
  transition:background-color .25s ease;
}

.city{ position:relative; }

.city{ display:none; }

.city__panel{
  position:absolute; top:calc(100% + 16px); left:0; z-index:45;
  width:320px; max-width:calc(100vw - var(--pad) * 2);
  padding:18px;
  background:var(--n-000);
  border-radius:4px;
  box-shadow:0 18px 40px rgba(0,32,66,.18);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.city.is-open .city__panel{ opacity:1; visibility:visible; transform:translateY(0); }

.city__search{ position:relative; }

.city__search-icon{
  position:absolute; left:14px; top:50%;
  width:14px; height:14px;
  transform:translateY(-50%);
  pointer-events:none;
}
.city__input{
  width:100%; height:40px; padding:0 14px 0 38px;
  border:1px solid var(--tint); border-radius:2px;
  background:var(--surface);
  font-family:inherit; font-size:14px; font-weight:500;
  color:var(--text);
  transition:border-color .18s ease;
}
.city__input::placeholder{ color:var(--n-450); font-weight:500; }

.city__input::-webkit-search-decoration,
.city__input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.city__input:focus{ outline:none; border-color:var(--brand); }

.city__list{
  max-height:264px; margin-top:12px; padding-right:6px;
  overflow-y:auto;

  scrollbar-width:thin;
  scrollbar-color:var(--n-400) transparent;
}
.city__list::-webkit-scrollbar{ width:5px; }
.city__list::-webkit-scrollbar-track{ background:transparent; }
.city__list::-webkit-scrollbar-thumb{
  background:var(--n-400);
  border-radius:99px;
}
.city__list::-webkit-scrollbar-thumb:hover{ background:var(--n-450); }

.city__item{
  display:block; width:100%;
  padding:9px 10px; border-radius:2px;
  font-size:14px; font-weight:500; text-align:left;
  color:var(--text);
  transition:background .15s ease, color .15s ease;
}
.city__item:hover,
.city__item:focus-visible{ background:var(--surface); color:var(--brand); }
.city__item.is-current{ color:var(--brand); font-weight:700; }
.city__item[hidden]{ display:none; }

.city__empty{ margin-top:12px; font-size:13px; color:var(--text-mute); text-align:center; }
.city__empty[hidden]{ display:none; }

.nav__menu{ display:flex; align-items:center; min-width:0; }
.nav__list{
  display:flex; align-items:center;
  gap:clamp(14px, 1.7vw, 30px);
  flex:0 1 auto;
}
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 0;
  font-size:12px; font-weight:700; text-transform:uppercase;
  white-space:nowrap;
  transition:opacity .18s ease;
}
.nav__link:hover{ opacity:.75; }

.nav__caret{
  flex:none; width:8px; height:4px;
  background:currentColor;
  -webkit-mask:var(--caret-mask) no-repeat center / contain;
          mask:var(--caret-mask) no-repeat center / contain;
  transition:transform .2s ease;
}
.nav__item.is-open > .nav__link .nav__caret{ transform:rotate(180deg); }

.mnav__back{ display:none; }

.mnav__back-item{ display:none; }

.mnav__foot{ display:none; }

.submenu{
  position:absolute; top:100%; left:-18px; z-index:20;
  min-width:250px; padding:10px 0;
  background:var(--n-000);
  box-shadow:0 18px 40px rgba(0,32,66,.18);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__item.is-open > .submenu{ opacity:1; visibility:visible; transform:translateY(0); }

.submenu:not(.submenu--mega) a{
  display:block; padding:9px 22px;
  font-size:14px; color:var(--text);
  transition:background .15s ease, color .15s ease;
}
.submenu:not(.submenu--mega) a:hover,
.submenu:not(.submenu--mega) a[aria-current]{ background:var(--surface); color:var(--brand); }

.topbar.is-light .nav__logo-img--on-blue{ opacity:0; }
.topbar.is-light .nav__logo-img--on-white{ opacity:1; }

.topbar.is-light .nav__city{ color:var(--text); }

.topbar.is-light .city.is-open > .nav__city,
.topbar.is-light .nav__city:hover,
.topbar.is-light .nav__city:focus-visible{ color:var(--brand); opacity:1; }
.topbar.is-light .city.is-open > .nav__city .nav__pin,
.topbar.is-light .nav__city:hover .nav__pin{ background:var(--brand); }
.topbar.is-light .nav__pin{ background:var(--n-400); }

.topbar.is-light .nav__link{ color:var(--text); }

.topbar.is-light .nav__item.is-open > .nav__link,
.topbar.is-light .nav__link:hover,
.topbar.is-light .nav__link:focus-visible{ color:var(--brand); opacity:1; }

.topbar.is-light .burger span{ background:var(--text); }

@media (min-width:1280px){
  .topbar.is-light .icon-btn{
    background:var(--n-000);
    border:1px solid var(--rail); border-radius:2px;
  }
  .topbar.is-light .icon-btn:hover{ background:var(--surface); }

  .topbar.is-light .nav__contact{
    background:var(--brand); color:var(--text-inv); border-radius:2px;
  }
  .topbar.is-light .nav__contact:hover{ background:var(--b-700); }
  .topbar.is-light .nav__contact img{ filter:brightness(0) invert(1); }
}

@media (max-width:1279px){
  .topbar.is-light .icon-btn img,
  .topbar.is-light .nav__contact img{ filter:brightness(0) invert(24%); }
}

.nav__item--mega{ position:static; }

.submenu--mega{
  left:calc(50% - 50vw);
  width:100vw;
  min-width:0;
  padding:29px 0 31px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);

  max-height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
}
.mega{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.mega__card{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:20px;
  min-height:236px;
  padding:23px 30px 27px;
  overflow:hidden;
  background:var(--tint);
  transition:background .25s ease;
}

.mega__card::before{
  content:"";
  position:absolute; right:20px; top:0;
  width:379px; height:230px;
  max-width:70%;
  background:url("assets/menu-pattern.svg") no-repeat right top / contain;
  transition:opacity .25s ease;
  pointer-events:none;
}

.mega__card::after{
  content:"";
  position:absolute; inset:0;
  opacity:0;
  background:
    radial-gradient(80% 120% at 88% 50%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(55% 90% at 72% 108%, rgba(120,220,255,.20) 0%, rgba(120,220,255,0) 60%),
    radial-gradient(60% 100% at 100% 0%, rgba(0,20,90,.30) 0%, rgba(0,20,90,0) 60%);
  transition:opacity .25s ease;
  pointer-events:none;
}

.mega__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .35s ease;
}
.mega__card--video:hover .mega__video,
.mega__card--video:focus-visible .mega__video{ opacity:.3; }

.mega__card.mega__card--video:hover,
.mega__card.mega__card--video:focus-visible{ background:var(--b-700); }

.mega__col{ position:relative; overflow:hidden; }
.mega__col--video:hover .mega__video,
.mega__col--video:focus-within .mega__video{ opacity:.3; }
.mega__col.mega__col--video:hover,
.mega__col.mega__col--video:focus-within{ background:var(--b-700); }

.mega__col.mega__col--video:hover::before,
.mega__col.mega__col--video:focus-within::before{ opacity:0; }
.mega__col--video:hover .mega__col-title,
.mega__col--video:focus-within .mega__col-title,
.mega__col--video:hover .mega__links a,
.mega__col--video:focus-within .mega__links a,
.mega__col--video:hover .mega__rich-title,
.mega__col--video:focus-within .mega__rich-title{ color:var(--text-inv); }
.mega__col--video:hover .mega__rich-note,
.mega__col--video:focus-within .mega__rich-note{ color:var(--b-100); }
.mega__col-title,
.mega__links,
.mega__rich{ position:relative; z-index:1; }

.mega__title,
.mega__note{ position:relative; z-index:1; transition:color .25s ease; }

.mega__title{
  max-width:240px;
  font-size:20px; font-weight:600; line-height:1.4;
  color:var(--text);
}
.mega__note{
  max-width:320px;
  font-size:16px; font-weight:500; line-height:1.4;
  color:var(--text-mute);
}

.mega__card:hover,
.mega__card:focus-visible{ background:var(--brand); }
.mega__card:hover::before,
.mega__card:focus-visible::before{ opacity:0; }
.mega__card:hover::after,
.mega__card:focus-visible::after{ opacity:1; }
.mega__card:hover .mega__title,
.mega__card:focus-visible .mega__title{ color:var(--text-inv); }
.mega__card:hover .mega__note,
.mega__card:focus-visible .mega__note{ color:var(--text-inv-soft); }

.mega--cols{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
.mega__col{
  position:relative;
  min-height:468px;
  padding:34px 36px 30px;
  overflow:hidden;
  background:var(--tint);
  transition:background .25s ease;
}
.mega__col::before{
  content:"";
  position:absolute; right:0; top:0;
  width:325px; height:223px;
  max-width:80%;
  background:url("assets/menu-pattern.svg") no-repeat right top / contain;
  transition:opacity .25s ease;
  pointer-events:none;
}

.mega__col:hover,
.mega__col:focus-within{ background:var(--b-400); }
.mega__col:hover::before,
.mega__col:focus-within::before{ opacity:.35; }

.mega__col-title,
.mega__links,
.mega__rich{ position:relative; z-index:1; }

.mega__col-title{
  display:flex; align-items:center; gap:10px;
  margin-bottom:47px;
  font-size:20px; font-weight:600; line-height:1.4;
  color:var(--text);
  transition:color .25s ease;
}
.mega__badge{ flex:none; width:20px; }

.mega__links a{
  display:block;
  font-size:16px; font-weight:600; line-height:36px;
  color:var(--text);
  transition:color .2s ease;
}

.mega__rich{ display:grid; gap:40px; padding-top:8px; }
.mega__rich-title{
  display:block;
  font-size:16px; font-weight:600; line-height:1.2;
  color:var(--text);
  transition:color .2s ease;
}
.mega__rich-note{
  display:block; margin-top:12px;
  font-size:15px; line-height:1.4;
  color:var(--text-mute);
  transition:color .25s ease;
}

.mega__links a:hover,
.mega__links a:focus-visible,
.mega__rich a:hover .mega__rich-title,
.mega__rich a:focus-visible .mega__rich-title{ color:#00fffb; }

.mega__col:hover .mega__col-title,
.mega__col:focus-within .mega__col-title,
.mega__col:hover .mega__links a,
.mega__col:focus-within .mega__links a,
.mega__col:hover .mega__rich-title,
.mega__col:focus-within .mega__rich-title{ color:var(--text-inv); }
.mega__col:hover .mega__rich-note,
.mega__col:focus-within .mega__rich-note{ color:var(--text-inv-soft); }

.mega__col:hover .mega__links a:hover,
.mega__col:focus-within .mega__links a:focus-visible,
.mega__col:hover .mega__rich a:hover .mega__rich-title,
.mega__col:focus-within .mega__rich a:focus-visible .mega__rich-title{ color:#00fffb; }

.nav__tools{ display:flex; align-items:center; gap:4px; margin-left:clamp(18px, 3vw, 74px); }

.icon-btn{
  display:grid; place-items:center;
  width:41px; height:40px;
  background:var(--tint);
  transition:background .18s ease;
}
.icon-btn:hover{ background:var(--n-000); }
.icon-btn img{ width:16px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn--light{ height:40px; padding:0 16px; background:var(--tint); color:var(--text); }

.btn--quote{
  height:48px; min-width:180px; padding:0 26px;
  font-size:12px;
}
.btn--light:hover{ background:var(--n-000); }
.nav__contact{ gap:12px; }
.nav__contact img{ width:19px; }
.btn--wide{
  flex:none;
  width:227px; max-width:100%;
  padding:0 14px; gap:12px; justify-content:flex-start;
}
.btn--wide img,
.btn--wide .btn__lock{ width:22px; flex:none; }
.btn--wide > span:not(.btn__lock){ flex:1; text-align:center; }

.burger{
  display:none;
  width:40px; height:40px;
  padding:12px 9px;
  flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:1px; background:var(--n-000); border-radius:1px; transition:transform .25s ease, opacity .2s ease, background-color .25s ease; }
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.breadcrumbs{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:16px;
  margin-top:12px;
  font-size:12px; font-weight:500; color:var(--b-crumb);
}
.breadcrumbs a:hover{ color:var(--text-inv); }
.breadcrumbs__sep{ opacity:.8; }

.hero__body{
  flex:1; display:flex; flex-direction:column;
  margin-left:var(--col-text);
  padding-top:clamp(26px, 3.4vw, 56px);
}
.hero__title{
  max-width:764px;
  font-size:clamp(38px, 4.86vw, 84px);
  font-weight:500;
  line-height:.976;
  letter-spacing:-.03em;
}
.hero__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px, 4vw, 70px);

  margin-top:auto; padding-top:clamp(40px, 6vw, 120px);
}
.hero__lead{
  /* Мера строки: на 515px длинный подзаголовок набирался в лишнюю строку
     и наезжал на линию над блоком. Шире 560px общую меру не берём —
     короткие подзаголовки начинают схлопываться в две строки. */
  max-width:560px;
  font-size:15px; font-weight:600; line-height:1.73;
  color:var(--text-inv-soft);
}

/* Длинному подзаголовку общей меры мало. Та же ширина, что у шапки
   отдельного решения, — список решений и сами решения читаются одинаково. */
.hero__lead--wide{ max-width:606px; }

/* Ниже линии, отчеркивающей блок: на широком экране под подзаголовком
   остаётся запас, и опущенный текст отходит от неё заметнее. Смещаем
   только отрисовку — соседние элементы остаются на своих местах.
   На узких экранах не трогаем: там под текстом стоит кнопка. */
@media (min-width:1024px){
  .hero__lead--wide{ position:relative; top:20px; }
}

.partners{ padding:clamp(48px, 5vw, 79px) 0 clamp(40px, 4vw, 60px); }

.partner{
  display:grid;
  grid-template-columns:var(--c-num) var(--c-logo) var(--c-gap) var(--c-body);
  align-items:start;
  margin-bottom:clamp(40px, 3.3vw, 55px);
}
.partner__num{
  grid-column:1;
  font-size:clamp(16px, 1.16vw, 20px); font-weight:500;
  letter-spacing:-.03em; color:var(--num);
  padding-top:1px;
}
.partner__logo{
  grid-column:2;
  display:grid; place-items:center;
  align-self:stretch;
  min-height:334px; padding:24px;
  background:var(--surface);
}
.partner__logo img{
  width:clamp(120px, 13.6vw, 228px);
  filter:grayscale(1);
  transition:filter .3s ease;
}
.partner__logo:hover img,
.partner__logo:focus-within img{ filter:none; }

.partner__body{
  grid-column:4;
  display:flex; flex-direction:column; align-items:flex-start;
  padding-top:20px;
  border-top:1px solid var(--tint);
  min-height:334px;
}
.partner__title{
  font-size:clamp(24px, 1.85vw, 32px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
  color:var(--text);
}
.partner__title sup{ font-size:.645em; line-height:0; vertical-align:super; }

.partner__text{
  max-width:901px;
  margin-top:22px;
  font-size:15px; font-weight:500; line-height:1.27; letter-spacing:-.03em;
  color:var(--text-body);
}
.partner__subtitle{
  max-width:777px;
  margin-top:24px;
  font-size:15px; font-weight:500; line-height:1.27; letter-spacing:-.03em;
  color:var(--text);
}
.partner__list{ max-width:777px; margin-top:8px; }
.partner__list li{
  position:relative;
  padding-left:18px;
  font-size:15px; font-weight:500; line-height:1.95; letter-spacing:-.03em;
  color:var(--text);
}
.partner__list li::before{ content:"—"; position:absolute; left:0; }

.partner__prose{ max-width:901px; margin-top:22px; }
.partner__prose p{
  font-size:15px; font-weight:500; line-height:1.27; letter-spacing:-.03em;
  color:var(--text-body);
}
.partner__prose p + p,
.partner__prose ul + p,
.partner__prose p + ul{ margin-top:22px; }
.partner__prose li{
  position:relative;
  padding-left:18px;
  font-size:15px; font-weight:500; line-height:1.95; letter-spacing:-.03em;
  color:var(--text);
}
.partner__prose li::before{ content:"—"; position:absolute; left:0; }

.partner__link{
  display:inline-flex; align-items:center; gap:14px;

  margin-top:auto; padding-top:26px;
  font-size:15px; font-weight:500; letter-spacing:-.03em;
  color:var(--link);
  transition:color .18s ease;
}
.partner__link img{ width:20px; flex:none; }
.partner__link span{ border-bottom:1px solid transparent; transition:border-color .18s ease; }
.partner__link:hover{ color:var(--brand); }
.partner__link:hover span{ border-bottom-color:currentColor; }

.pager{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:20px;
  margin-left:var(--col-text);
  margin-top:clamp(30px, 3vw, 50px);
}
/* автоподгрузка прячет пейджер: у .pager своё display, и без этой строки
   атрибут hidden ничего бы не значил */
.pager[hidden]{ display:none; }
.pager__nav{ display:flex; align-items:center; gap:9px; }

.pager__list{ display:flex; align-items:center; gap:9px; }
.pager__btn{
  display:grid; place-items:center;
  width:33px; height:32px;
  border-radius:2px; background:var(--surface);
  font-size:15px; font-weight:600; color:var(--text-mute);
  transition:background .18s ease, color .18s ease;
}
.pager__btn:not(.current):hover{ background:var(--tint); }

.pager__btn.is-active,
.pager__btn.current{ background:var(--brand); color:var(--text-inv); }
.pager__arrow{
  display:grid; place-items:center;
  width:33px; height:32px;
  border-radius:2px; background:var(--surface);
  transition:background .18s ease, opacity .18s ease;
}
.pager__arrow img{ width:auto; height:9px; }
.pager__arrow:hover{ background:var(--tint); }
.pager__arrow:disabled,
.pager__arrow.is-disabled{ background:var(--surface); opacity:.35; cursor:default; pointer-events:none; }
.pager__count{ font-size:12px; font-weight:500; color:var(--text-mute); }

.band{ margin:0; line-height:0; }
.band img{ width:100%; height:auto; object-fit:cover; }

.band__video{
  display:block;
  width:100%; height:auto;
  aspect-ratio:1738 / 598;
  object-fit:cover;

  object-position:center var(--band-focus);
  background:var(--b-900);

  pointer-events:none;
}
.band__video::-webkit-media-controls,
.band__video::-webkit-media-controls-enclosure,
.band__video::-webkit-media-controls-panel,
.band__video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
}

.gridline{
  position:relative;
  left:calc(50% - 50vw); width:100vw;
  height:1px;
  background:linear-gradient(to right,
    var(--fl) 0,
    var(--fl) calc(var(--tick-x1) - 17px),
    transparent calc(var(--tick-x1) - 17px),
    transparent calc(var(--tick-x1) + 17px),
    var(--fl) calc(var(--tick-x1) + 17px),
    var(--fl) calc(var(--tick-x2) - 22px),
    transparent calc(var(--tick-x2) - 22px),
    transparent calc(var(--tick-x2) + 18px),
    var(--fl) calc(var(--tick-x2) + 18px),
    var(--fl) 100%);
}

.gridline--gap1{
  background:linear-gradient(to right,
    var(--fl) 0,
    var(--fl) calc(var(--tick-x2) - 22px),
    transparent calc(var(--tick-x2) - 22px),
    transparent calc(var(--tick-x2) + 18px),
    var(--fl) calc(var(--tick-x2) + 18px),
    var(--fl) 100%);
}

.gridline--tick1::after,
.gridline--tick2::after{
  content:"";
  position:absolute; left:0; right:0;
  height:377px;
  pointer-events:none;
}
.gridline--tick2::after{
  background:
    linear-gradient(var(--fl), var(--fl)) var(--tick-x1) 0 / 1px 100% no-repeat,
    linear-gradient(var(--fl), var(--fl)) var(--tick-x2) 0 / 1px 100% no-repeat;
}

.gridline--tick1::after{
  top:calc(-35px - var(--tick-lift) - var(--tick-lift-d));
  background:linear-gradient(var(--fl), var(--fl)) var(--tick-x2) 0 / 1px 100% no-repeat;
}

.gridline--tick2::after{ top:calc(-1 * var(--tick-h-b)); height:var(--tick-h-b); }

.cons{
  position:relative;
  margin-top:calc(-1 * var(--steps-h));
  padding-top:calc(clamp(40px, 4vw, 68px) + var(--steps-h));

  clip-path:polygon(
    0 var(--step-1), 14.29% var(--step-1), 14.29% 0, 28.57% 0,
    28.57% var(--steps-h), 42.86% var(--steps-h), 42.86% var(--step-1), 57.14% var(--step-1),
    57.14% var(--step-2), 71.43% var(--step-2), 71.43% var(--steps-h), 85.71% var(--steps-h),
    85.71% var(--step-1), 100% var(--step-1), 100% 100%, 0 100%);
  color:var(--text-inv);

  background:radial-gradient(130% 100% at 22% 108%, var(--a-teal) 0%, var(--b-500) 44%, var(--b-900) 100%);
  overflow:hidden;
}

.cons .shell{ position:relative; z-index:1; }

.cons__grid{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  padding-bottom:clamp(32px, 3.8vw, 66px);
}

.cons__grid--form{ padding-top:clamp(34px, 4.7vw, 82px); }

.cons__grid--intro{ padding-bottom:clamp(30px, 3.4vw, 58px); }
.cons__grid--intro .cons__aside{ margin-bottom:0; }
.cons__grid--form .cons__formtitle{ margin-top:0; }
.cons__aside{ grid-column:1; }
.cons__logo{ display:block; margin-top:40px; }
.cons__logo img{ width:clamp(112px, 8.7vw, 150px); }
.cons__main{ grid-column:2; min-width:0; }

.section-tag{
  display:flex; align-items:center; gap:12px;
  font-size:15px; font-weight:500; letter-spacing:-.03em;
}

.cons__title{
  max-width:738px;
  margin-top:clamp(20px, 2.6vw, 45px);
  font-size:clamp(26px, 3.6vw, 62px);
  font-weight:500; line-height:.873; letter-spacing:-.03em;
}
.cons__copy{
  display:grid;
  grid-template-columns:minmax(0, 384px) minmax(0, 406px);
  gap:clamp(28px, 6vw, 104px);
  margin-top:clamp(24px, 2.4vw, 42px);
  padding-bottom:0;
}
.cons__lead{
  font-size:clamp(18px, 1.4vw, 24px);
  font-weight:500; line-height:1.3; letter-spacing:-.03em;
}
.cons__note{
  font-size:15px; font-weight:500; line-height:1.55; letter-spacing:-.03em;
  color:var(--text-inv-dim);
}

.cons__formtitle{
  margin-top:clamp(34px, 4.7vw, 82px);
  font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:-.03em;
}

.status-dot{
  position:relative;
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--a-online);
}
.status-dot::before,
.status-dot::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--a-online);
  animation:status-pulse 2.4s cubic-bezier(.2,.6,.35,1) infinite;
}
.status-dot::after{ animation-delay:1.2s; }
@keyframes status-pulse{
  0%   { transform:scale(1);   opacity:.85; }
  70%  { transform:scale(3.6); opacity:0; }
  100% { transform:scale(3.6); opacity:0; }
}

.form{ max-width:894px; margin-top:clamp(24px, 2.5vw, 42px); }
.field{ position:relative; padding-bottom:22px; }
.field input{
  width:100%;
  padding:6px 0 12px;
  color:var(--text-inv);
  background:none;
  border:0; border-bottom:1px solid rgba(255,255,255,.3);
  font-size:15px; font-weight:500; letter-spacing:-.03em;
  transition:border-color .18s ease;
}
.field input::placeholder{ color:rgba(255,255,255,.39); }
.field input:hover{ border-bottom-color:rgba(255,255,255,.55); }
.field input:focus{ outline:none; border-bottom-color:var(--text-inv); }
.field.has-error input{ border-bottom-color:var(--a-danger); }
.field__error{
  position:absolute; left:0; bottom:3px;
  font-size:12px; color:var(--a-danger);
  opacity:0; transition:opacity .18s ease;
}
.field.has-error .field__error{ opacity:1; }

.btn--submit{
  width:100%; height:58px;
  margin-top:14px;
  background:var(--n-000); color:var(--text);
  font-size:13px; letter-spacing:-.01em;
}
.btn--submit:hover{ background:var(--text-inv-key); }
.btn--submit:disabled{ opacity:.6; cursor:progress; }

.check{
  position:relative;
  display:flex; align-items:flex-start; gap:12px;
  margin-top:22px;
  cursor:pointer;
}

.check input{
  position:absolute; left:0; top:1px;
  width:18px; height:18px; margin:0;
  opacity:0; cursor:pointer;
}
.check__box{
  flex:none;
  display:grid; place-items:center;
  width:18px; height:18px; margin-top:1px;
  border:1px solid var(--text-inv); border-radius:2px;
  pointer-events:none;
  transition:background .18s ease, border-color .18s ease;
}
.check__box img{ width:8px; opacity:0; transition:opacity .15s ease; }
.check input:checked + .check__box img{ opacity:1; }
.check input:focus-visible + .check__box{ outline:2px solid var(--text-inv); outline-offset:3px; }
.check.has-error .check__box{ border-color:var(--a-danger); }
.check__text{
  font-size:13px; font-weight:500; line-height:1.23; letter-spacing:-.03em;
  color:rgba(255,255,255,.39);
}
.check__text a{ text-decoration:underline; }
.check__text a:hover{ color:var(--text-inv); }

.check .wpcf7-form-control-wrap,
.check .wpcf7-acceptance,
.check .wpcf7-list-item{ display:block; width:100%; margin:0; }

.check .wpcf7-list-item label{
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer;
}
.check .wpcf7-acceptance input[type="checkbox"]{
  position:static; flex:none;
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin:1px 0 0;
  opacity:1;
  border:1px solid var(--text-inv); border-radius:2px;
  background:none;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}
.check .wpcf7-acceptance input[type="checkbox"]::before{
  content:"";
  display:block; width:100%; height:100%;
  background:var(--text-inv);
  -webkit-mask:var(--check-mask) no-repeat center / 8px 7px;
          mask:var(--check-mask) no-repeat center / 8px 7px;
  opacity:0; transition:opacity .15s ease;
}
.check .wpcf7-acceptance input[type="checkbox"]:checked::before{ opacity:1; }
.check .wpcf7-acceptance input[type="checkbox"]:focus-visible{
  outline:2px solid var(--text-inv); outline-offset:3px;
}
.check.has-error .wpcf7-acceptance input[type="checkbox"]{ border-color:var(--a-danger); }

.check .wpcf7-list-item-label{
  font-size:13px; font-weight:500; line-height:1.23; letter-spacing:-.03em;
  color:rgba(255,255,255,.39);
}
.check .wpcf7-list-item-label a{ text-decoration:underline; }
.check .wpcf7-list-item-label a:hover{ color:var(--text-inv); }

.check .wpcf7-not-valid-tip{ display:none; }

.form__status{
  min-height:20px; margin-top:14px;
  font-size:14px; font-weight:600;
}
.form__status.is-ok{ color:var(--b-200); }
.form__status.is-bad{ color:var(--a-danger); }

.foot{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  gap:clamp(32px, 3vw, 48px) 0;
  padding-top:clamp(30px, 3vw, 53px);
  padding-bottom:clamp(18px, 1.5vw, 25px);
}
.foot__contacts{ grid-column:1; }
.foot__phone + .foot__phone{ margin-top:clamp(16px, 1.2vw, 18px); }
.foot__label{
  display:block; margin-bottom:10px;
  font-size:14px; font-weight:500; letter-spacing:-.03em;
  color:var(--text-inv-key);
}
.foot__phone a{
  font-size:clamp(24px, 2.08vw, 36px); font-weight:500; letter-spacing:-.03em;
  transition:color .18s ease;
}
.foot__phone a:hover{ color:var(--b-200); }

.foot__social{ display:flex; gap:8px; margin-top:clamp(22px, 1.8vw, 28px); }
.foot__social a{ transition:transform .18s ease, opacity .18s ease; }
.foot__social a:hover{ transform:translateY(-2px); opacity:.85; }
.foot__social img{ width:47px; }

.foot__addr{
  margin-top:clamp(26px, 3.1vw, 52px);
  font-size:14px; font-style:normal; font-weight:500; line-height:1.6; letter-spacing:-.03em;
}
.foot__addr a{ display:block; margin-top:4px; color:var(--b-200); }
.foot__addr a:hover{ text-decoration:underline; }

.foot__cols{
  grid-column:2;
  display:grid;
  grid-template-columns:32.4% 41% 26.6%;
  gap:30px 0;
}
.foot__head{
  margin-bottom:22px;
  font-size:12px; font-weight:700; text-transform:uppercase;
}
.foot__col li a{
  display:block; padding:5px 0;
  font-size:14px; font-weight:500; line-height:1.4;
  color:var(--text-inv-key);
  transition:color .18s ease;
}
.foot__col li a:hover,
.foot__col li a.is-current{ color:var(--text-inv); }

.bottom{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  align-items:center;
  padding:20px 0 26px;
  font-size:12px; font-weight:600; letter-spacing:-.03em;
}
.bottom__copy{ padding-right:24px; }
.bottom__rest{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px clamp(24px, 4vw, 60px);
}
.bottom__link{ transition:opacity .18s ease; }
.bottom__link:hover{ opacity:.75; text-decoration:underline; }
.bottom__rits{ margin-left:auto; }
.bottom__rits img{ width:53px; }

@media (max-width:1679px) and (min-width:1280px){
  .nav{ grid-template-columns:auto 1fr auto; }
  .nav__menu{ justify-content:flex-end; }
  .nav__list{ gap:clamp(12px, 1.4vw, 30px); }
}

@media (max-width:1279px){

  .nav{ position:relative; grid-template-columns:1fr auto; }
  .burger{ display:flex; grid-column:2; justify-self:end; }

  #menu{
    position:fixed; left:0; right:0; top:var(--topbar-h); bottom:0; z-index:40;
    display:block; flex:none;
    padding:0;
    background:var(--n-000);
    opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility 0s linear .22s;
  }
  #menu.is-open{ opacity:1; visibility:visible; transition:opacity .22s ease; }

  .nav__tools{ grid-column:2; justify-self:end; margin-left:0; gap:2px; }
  .icon-btn,
  .nav__contact{
    width:40px; height:40px;
    padding:0; gap:0;
    background:none;
    justify-content:center;
  }
  .icon-btn:hover,
  .nav__contact:hover{ background:none; opacity:.7; }

  .icon-btn img,
  .nav__contact img{
    width:22px; height:22px; object-fit:contain;
    filter:brightness(0) invert(1);
  }
  .nav__contact-label{ display:none; }

  #menu .nav__list{
    position:absolute; inset:0;
    display:block; width:100%; margin:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  #menu .nav__item{ position:static; border-bottom:0; }
  #menu .nav__link{
    width:100%; justify-content:space-between; gap:12px;
    height:56px; padding:0 var(--pad);
    border-top:1px solid var(--tint);
    font-size:15.5px; font-weight:600; letter-spacing:normal; text-transform:none;
    color:var(--text);
  }
  #menu .nav__list > .nav__item:last-child > .nav__link{ border-bottom:1px solid var(--tint); }
  #menu .nav__item:not(.has-sub) .nav__caret{ display:none; }

  #menu .nav__caret{
    width:9px; height:7px;
    background:var(--n-450);
    -webkit-mask:var(--arrow-mask) no-repeat center / contain;
            mask:var(--arrow-mask) no-repeat center / contain;
    transition:none; transform:none;
  }
  #menu .nav__item.is-open > .nav__link .nav__caret{ transform:none; }

  #menu .submenu{
    position:absolute; inset:0; z-index:1;
    display:block; width:auto;
    min-width:0; max-height:none; padding:0;
    background:var(--n-000); box-shadow:none;
    opacity:1; visibility:visible;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .34s cubic-bezier(.32,.72,0,1);
  }
  #menu .submenu[data-mnav="active"]{ transform:translateX(0); z-index:2; }

  #menu .submenu[data-mnav="prev"]{ transform:translateX(0); z-index:1; }

  #menu .mnav__back-item{ display:block; }
  #menu .mnav__back{
    display:flex; align-items:center; gap:10px;
    width:100%; height:52px; padding:0 var(--pad);
    border:0; border-bottom:1px solid var(--tint); background:none; text-align:left;
  }
  #menu .mnav__back-arrow{
    flex:none; width:9px; height:7px;
    background:var(--n-450);
    -webkit-mask:var(--arrow-mask) no-repeat center / contain;
            mask:var(--arrow-mask) no-repeat center / contain;
    transform:scaleX(-1);
  }
  #menu .mnav__back span{ font-size:13px; font-weight:600; color:var(--text-mute); }

  #menu .mnav__foot{ display:block; padding:20px var(--pad) 24px; border-top:1px solid var(--tint); }
  #menu .mnav__cta{
    display:flex; align-items:center; justify-content:center;
    height:46px; border-radius:2px;
    background:var(--brand); color:var(--text-inv);
    font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
    text-decoration:none;
  }

  #menu .mega{ display:block; width:auto; padding:0; }
  #menu .mega--cols{ display:block; }
  #menu .mega__col::before,
  #menu .mega__card::before,
  #menu .mega__card::after,
  #menu .mega__video{ display:none; }
  #menu .mega__col{ min-height:0; padding:0; overflow:visible; background:none; }
  #menu .mega__col:hover,
  #menu .mega__col:focus-within{ background:none; }

  #menu .mega__card,
  #menu .mega__links a,
  #menu .mega__rich > li > a{
    display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:0; height:54px; padding:0 var(--pad);
    border-top:1px solid var(--tint);
    font-size:15.5px; font-weight:500; line-height:1.3; text-align:left;
    background:none;
    color:var(--text);
  }
  #menu .mega .mega__card:last-child,
  #menu .mega__links li:last-child a,
  #menu .mega__rich li:last-child a{ border-bottom:1px solid var(--tint); }
  #menu .mega__title{ max-width:none; margin:0; font-size:15.5px; font-weight:500; color:var(--text); }
  #menu .mega__note,
  #menu .mega__rich-note{ display:none; }

  #menu .mega--cols{ position:static; }
  #menu .mega--cols .mega__col{
    position:static;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    height:54px; padding:0 var(--pad);
    border-top:1px solid var(--tint);
  }
  #menu .mega--cols .mega__col:last-child{ border-bottom:1px solid var(--tint); }
  #menu .mega__col-title{
    flex:1; min-width:0;
    display:flex; align-items:center; gap:10px;
    margin:0; font-size:15.5px; font-weight:500; line-height:1.3; text-align:left;
    color:var(--text);
  }
  #menu .mega__badge{ width:18px; }
  #menu .mega--cols .mega__col::after{
    content:"";
    flex:none; width:9px; height:7px;
    background:var(--n-450);
    -webkit-mask:var(--arrow-mask) no-repeat center / contain;
            mask:var(--arrow-mask) no-repeat center / contain;
  }

  #menu .mega__links,
  #menu .mega__rich{
    position:absolute; inset:0; z-index:1;
    display:block; margin:0;
    background:var(--n-000);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .34s cubic-bezier(.32,.72,0,1);
  }
  #menu .mega__links[data-mnav="active"],
  #menu .mega__rich[data-mnav="active"]{ transform:translateX(0); z-index:2; }

  #menu .mega__links[data-mnav="prev"],
  #menu .mega__rich[data-mnav="prev"]{ transform:translateX(0); z-index:1; }

  @media (prefers-reduced-motion:reduce){
    #menu,
    #menu.is-open,
    #menu .submenu,
    #menu .mega__links[data-mnav],
    #menu .mega__rich[data-mnav]{ transition:none; }
  }
}

@media (max-width:1125px){
  :root{ --rule-y:182px; }
}

@media (max-width:1023px){
  :root{ --pad:20px; --steps-h:96px; }

  .hero{ min-height:0; padding-bottom:44px; }
  .hero__rules{ display:none; }
  .hero__body{ margin-left:0; }
  .hero__title{ max-width:none; }
  .hero__foot{ align-items:flex-start; }

  .partner{
    grid-template-columns:minmax(180px, 30%) 1fr;
    /* was clamp(24px, 4vw, 56px): 31px between a photograph and the copy at
       768 read as glued once the rows started carrying photographs */
    gap:0 clamp(28px, 5vw, 56px);
  }
  .partner__num{
    grid-column:2; grid-row:1;
    margin-bottom:10px;
    font-size:16px;
  }
  .partner__logo{ grid-column:1; grid-row:1 / span 2; align-self:start; height:auto; min-height:0; aspect-ratio:394/334; }
  .partner__body{ grid-column:2; grid-row:2; min-height:0; }

  .pager{ margin-left:0; }

  .cons__grid,
  .foot{ grid-template-columns:1fr; }
  .cons__aside,
  .cons__main,
  .foot__contacts,
  .foot__cols{ grid-column:1; }
  .cons__aside{ margin-bottom:36px; }

  .gridline--tick1::after,
  .gridline--tick2::after{ display:none; }
  .gridline,
  .gridline--gap1{ background:var(--fl); }
  .foot__cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px 24px; }
}

@media (max-width:767px){
  :root{ --pad:16px; --steps-h:64px; }
  body{ font-size:14px; }

  :root{ --topbar-h:64px; --subbar-h:64px; }
  .nav{ min-height:64px; padding:12px 0; }
  .nav__city{ font-size:11px; }

  .city__panel{
    position:fixed; top:var(--topbar-h); left:var(--pad); right:var(--pad);
    width:auto; max-width:none;
  }
  .breadcrumbs{ gap:8px; }

  .hero__foot{ flex-direction:column; gap:28px; margin-top:34px; }
  .hero__lead{ font-size:14px; line-height:1.6; }
  .btn--wide{ width:100%; }

  .partners{ padding-top:34px; }
  .partner{ grid-template-columns:1fr; }
  .partner__num{ grid-column:1; grid-row:1; margin-bottom:8px; }
  .partner__logo{
    grid-column:1; grid-row:2;
    aspect-ratio:auto; height:150px; padding:20px;
    margin-bottom:20px;
  }
  .partner__logo img{ width:min(60%, 180px); }
  .partner__body{ grid-column:1; grid-row:3; }
  .partner__text,
  .partner__subtitle,
  .partner__list li,
  .partner__prose p,
  .partner__prose li{ font-size:14px; }
  .partner__list li,
  .partner__prose li{ line-height:1.6; margin-top:8px; }

  .pager{ justify-content:center; }
  .pager__nav{ gap:5px; }
  .pager__list{ gap:5px; }
  .pager__btn,
  .pager__arrow{ width:30px; height:30px; }
  .pager__count{ width:100%; text-align:center; }

  .band img{ height:230px; }

  .cons__copy{ grid-template-columns:1fr; }
  .btn--submit{ height:52px; }

  .foot__cols{ grid-template-columns:1fr; gap:0; }
  .foot__col{ border-bottom:1px solid rgba(255,255,255,.16); }
  .foot__head{
    display:flex; align-items:center; justify-content:space-between;
    margin:0; padding:16px 0;
    cursor:pointer;
  }
  .foot__head::after{
    content:""; flex:none;
    width:9px; height:9px; margin-left:12px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-3px) rotate(45deg);
    transition:transform .25s ease;
  }
  .foot__col.is-open .foot__head::after{ transform:translateY(1px) rotate(-135deg); }
  .foot__col ul{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .foot__col.is-open ul{ max-height:400px; padding-bottom:12px; }

  .bottom{ grid-template-columns:1fr; gap:12px; justify-items:center; text-align:center; }
  .bottom__copy{ padding-right:0; }
  .bottom__rest{ flex-direction:column; align-items:center; gap:12px; }
  .bottom__rits{ margin:6px 0 0; }
}

@media (max-width:379px){

  .nav__logo{ width:80px; }
  .nav__brand{ gap:10px; }
  .nav__city{ gap:5px; font-size:10px; }
  .nav__tools{ gap:0; }
  .icon-btn,
  .nav__contact{ width:36px; }
  .icon-btn img,
  .nav__contact img{ width:20px; height:20px; }
  .burger{ width:36px; padding:12px 8px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }

  .hero{ position:relative; }
  .hero__dim{ display:none; }
}

.promo{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  padding:clamp(48px, 5vw, 86px) 0 clamp(40px, 4vw, 70px);
}
.promo__claim{

  max-width:none;
  padding-right:clamp(64px, calc(3.5vw + 40px), 100px);
  font-size:clamp(22px, 1.85vw, 32px);
  font-weight:600; line-height:1.28; letter-spacing:-.03em;
  color:var(--text);
}
.promo__body{ min-width:0; }
.promo__intro{
  max-width:820px;
  font-size:20px; font-weight:600; line-height:140%; letter-spacing:-0.6px;
  color:var(--text);
}

.checklist{ margin-top:clamp(24px, 2.4vw, 40px); max-width:900px; }
.checklist li{
  position:relative;
  padding:0 0 0 34px;
  font-size:14px; font-weight:600; line-height:26px;
  color:var(--text);
}
.checklist li + li{ margin-top:18px; }
.checklist li::before{
  content:"";

  position:absolute; left:0; top:5px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--a-check);
  -webkit-mask:var(--tick-mask) no-repeat center / 16px 16px;
          mask:var(--tick-mask) no-repeat center / 16px 16px;
}

.promo__note{
  max-width:900px;
  margin-top:clamp(40px, 4.4vw, 78px);
  padding:0 0 0 29px;
  border-left:3px solid var(--rail);
  font-size:16px; font-weight:600; line-height:1.75; letter-spacing:-.02em;
  color:var(--text-body);
}

.btn__lock{
  flex:none; width:22px; height:22px;
  background:currentColor;
  -webkit-mask:var(--lock-mask) no-repeat center / contain;
          mask:var(--lock-mask) no-repeat center / contain;
}

.hero__title--sm{ font-size:clamp(30px, 3.3vw, 58px); line-height:1.06; }

.hero__title--md{ font-size:clamp(34px, 4vw, 70px); line-height:1.02; }

@media (max-width:1023px){
  .promo{ grid-template-columns:1fr; }
  .promo__claim{ max-width:none; padding-right:0; margin-bottom:clamp(24px, 3vw, 40px); }
}

.tiers{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  padding:clamp(48px, 5vw, 86px) 0 clamp(40px, 4vw, 70px);
}
.tiers__claim{
  max-width:none;
  padding-right:clamp(30px, 3.4vw, 58px);
  font-size:clamp(26px, 2.32vw, 40px);
  font-weight:600; line-height:1.3; letter-spacing:-.03em;
  color:var(--text);
}
.tiers__text{
  margin-top:clamp(26px, 2.8vw, 48px);
  padding-right:clamp(30px, 3.4vw, 58px);
  font-size:15px; font-weight:600; line-height:26px;
  color:var(--text-body);
}
.tiers__aside{ min-width:0; }
.tiers__table{ min-width:0; }

.matrix{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.matrix col.matrix__col--label{ width:48.19%; }
.matrix col.matrix__col--tier { width:16.21%; }
.matrix col.matrix__col--last { width:19.39%; }

.matrix th,
.matrix td{
  padding:6px 0;
  border-bottom:1px solid var(--tint);

  text-align:left;
  vertical-align:middle;
}
.matrix .matrix__last{ padding-right:3.18%; }

.matrix thead th{
  height:65px;

  text-align:left;
  font-size:13px; font-weight:700; line-height:18px;
  letter-spacing:.01em; text-transform:uppercase;
  color:var(--text-mute);
}

.matrix tbody th{
  height:64px;
  text-align:left;
  font-size:14px; font-weight:600; line-height:26px;
  color:var(--text);
  padding-right:24px;
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td{ border-bottom:0; }

.matrix__mark{
  display:inline-block; position:relative;
  width:23px; height:23px;
  background:var(--a-check);
  -webkit-mask:var(--seal-mask) no-repeat center / contain;
          mask:var(--seal-mask) no-repeat center / contain;
}
.matrix__mark::before{
  content:"";
  position:absolute; inset:0;
  background:var(--n-000);
  -webkit-mask:var(--seal-tick-mask) no-repeat center / contain;
          mask:var(--seal-tick-mask) no-repeat center / contain;
}

.matrix__yes{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (max-width:1023px){
  .tiers{ grid-template-columns:1fr; }
  .tiers__claim,
  .tiers__text{ padding-right:0; }
  .tiers__table{ margin-top:clamp(28px, 4vw, 46px); }
}

@media (max-width:767px){
  .matrix,
  .matrix tbody,
  .matrix tbody tr,
  .matrix tbody th,
  .matrix tbody td{ display:block; width:auto; }
  .matrix thead{ display:none; }
  .matrix colgroup{ display:none; }

  .matrix tbody tr{
    padding:16px 0;
    border-bottom:1px solid var(--tint);
  }
  .matrix tbody tr:last-child{ border-bottom:0; }

  .matrix tbody th{
    height:auto; padding:0 0 12px; border-bottom:0;
  }
  .matrix tbody td{
    display:inline-flex; align-items:center; gap:8px;
    padding:0 20px 0 0; border-bottom:0;
    font-size:12px; font-weight:600; text-transform:uppercase;
    letter-spacing:.01em; color:var(--text-mute);
  }
  .matrix .matrix__last{ padding-right:0; }
  .matrix tbody td::after{ content:attr(data-tier); }

  .matrix tbody td:empty{ display:none; }
}

.topbar--plain{
  color:var(--text);
  background:var(--n-000);
  box-shadow:inset 0 -1px 0 var(--tint);
}

.topbar--plain ~ main{ padding-top:var(--topbar-h); }

.has-subbar{ --stick-h:calc(var(--topbar-h) + var(--subbar-h)); }

.subbar{
  position:fixed; left:0; right:0; top:var(--topbar-h); z-index:40;
  height:var(--subbar-h);
  background:var(--n-000);
  box-shadow:inset 0 1px 0 var(--tint), 0 4px 4px rgba(0,0,0,.06);

  transform:translateY(-100%);
  opacity:0; visibility:hidden;
  transition:transform .28s ease, opacity .28s ease, visibility .28s;
}
:root.subbar-on .subbar{ transform:none; opacity:1; visibility:visible; }

:root.subbar-on .topbar.is-stuck{ box-shadow:inset 0 -1px 0 var(--tint); }

.subbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px, 2vw, 34px);
  height:100%;
}

.subbar__product{
  display:flex; align-items:center; gap:26px;
  min-width:0;
}
.subbar__thumb{
  flex:none;
  width:27px; height:52px;
  object-fit:contain;
}
.subbar__name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:16px; font-weight:500; line-height:19px; letter-spacing:-.03em;
  color:var(--text-body);
}

.subbar__actions{ display:flex; flex:none; gap:11px; }

.subbar__btn{
  width:257px; max-width:100%; height:40px;
  padding:0 12px;
  background:var(--brand); color:var(--text-inv);
  text-align:center;
}
.subbar__btn:hover{ background:var(--b-400); }
.subbar__btn--ghost{ background:var(--tint); color:var(--text); }

.subbar__btn--ghost:hover{ background:var(--n-400); }

.crumbs{
  padding:12px 0 0;
  font-size:12px; font-weight:500; color:var(--text-mute);
}
.crumbs a{ color:var(--text-mute); }
.crumbs a:hover{ color:var(--link); }
.crumbs__sep{ padding:0 8px; }

.site-main > .product{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  padding:clamp(28px, 3.2vw, 55px) 0 clamp(40px, 4vw, 64px);
}

.gallery{
  min-width:0;
  padding-right:max(24px, 18.71%);
  position:sticky;
  top:calc(var(--topbar-h) + 16px);
  align-self:start;
}
.pcol{ min-width:0; }
.gallery__stage{
  position:relative;
  display:grid; place-items:center;
  aspect-ratio:543 / 624;
  padding:clamp(20px, 3vw, 48px);
  background:var(--n-050);
}

/* Свайп по изображению не должен тянуть страницу вбок.
   Обработчик свайпа слушает касания пассивно и не отменяет действие
   браузера, поэтому без этого правила палец, листающий картинку, заодно
   качает всю страницу влево-вправо. pan-y оставляет браузеру только
   вертикальную прокрутку, горизонтальное движение достаётся скрипту. */
.gallery__stage,
.lightbox__stage,
[data-industry]{
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.gallery__slide{
  position:absolute; inset:clamp(20px, 3vw, 48px);
  display:none;
}

.gallery__slide{
  display:block;
  opacity:0; visibility:hidden;
  transform:translateX(var(--gal-from, 40px));
  transition:opacity .32s ease, transform .42s cubic-bezier(.22, .61, .36, 1), visibility .42s;
  pointer-events:none;
}
.gallery__slide.is-active{
  opacity:1; visibility:visible;
  transform:none;
  pointer-events:auto;
}
.gallery__slide.is-leaving{ transform:translateX(var(--gal-to, -48px)); }

@media (prefers-reduced-motion: reduce){
  .gallery__slide{ transform:none; transition:opacity .2s ease, visibility .2s; }
  .gallery__slide.is-leaving{ transform:none; }
}
.gallery__stage img,
.gallery__stage video{
  width:100%; height:100%;
  object-fit:contain !important;
}

.gallery__stage video{ background:var(--b-900); }

.gallery__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:1;
}
.gallery__nav--prev{ left:clamp(6px, 1.2vw, 20px); }
.gallery__nav--next{ right:clamp(6px, 1.2vw, 20px); }

.gallery__thumbs{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-top:clamp(14px, 1.6vw, 24px);
}
.gallery__thumb{
  position:relative;
  width:87px; height:73px;
  padding:0; border:1px solid transparent;
  background:var(--n-050);
  cursor:pointer;
  transition:border-color .18s ease;
}
.gallery__thumb img{ width:100%; height:100%; object-fit:cover; }

.gallery__thumb:first-child img{ object-fit:contain; padding:4px; }
.gallery__thumb:hover{ border-color:var(--rail); }
.gallery__thumb[aria-current="true"]{ border-color:var(--brand); }

.gallery__thumb--video::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:14px; height:16px;
  margin:-8px 0 0 -5px;
  background:var(--n-000);
  filter:drop-shadow(0 0 3px rgba(0,0,0,.45));
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.round{
  display:grid; place-items:center;
  width:45px; height:45px;
  border:0; border-radius:50%;
  background:var(--brand);
  cursor:pointer;
  transition:background .18s ease, opacity .18s ease;
}
.round::before{
  content:"";
  width:16px; height:8px;
  background:var(--n-000);
  -webkit-mask:var(--caret-mask) no-repeat center / contain;
          mask:var(--caret-mask) no-repeat center / contain;
  transform:rotate(-90deg);
}
.round--prev::before{ transform:rotate(90deg); }
.round:hover{ background:var(--b-400); }
.round:disabled{ opacity:.35; cursor:default; }

.round--soft{ background:var(--tint); }
.round--soft::before{
  background:var(--text-mute);
  transition:background .18s ease;
}
.round--soft:hover{ background:var(--brand); }
.round--soft:hover::before{ background:var(--n-000); }
.round--soft:disabled:hover{ background:var(--tint); }
.round--soft:disabled:hover::before{ background:var(--text-mute); }

.round--line{
  background:var(--n-000);

  box-shadow:inset 0 0 0 1px var(--rail);
  transition:background .18s ease, box-shadow .18s ease;
}
.round--line::before{
  background:var(--text);
  transition:background .18s ease;
}
.round--line:hover{ background:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.round--line:hover::before{ background:var(--n-000); }

.info{ min-width:0; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px;
  border-radius:4px;
  background:var(--a-badge);
  font-size:11px; font-weight:600; letter-spacing:-.02em;
  color:var(--text-inv);
}
.badge img{ width:12px; }

.info__title{
  margin-top:20px;
  font-size:clamp(28px, 2.78vw, 48px);
  font-weight:500; line-height:1.125; letter-spacing:-.03em;
  color:var(--text);
}
.info__registry{
  margin-top:22px;
  font-size:13px; font-weight:500; line-height:18px;
  color:var(--text-mute);
}
.info__lead{
  max-width:610px; margin-top:32px;
  font-size:15px; font-weight:600; line-height:26px;
  color:var(--text-body);
}

.cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px, 3vw, 46px);
  margin-top:clamp(24px, 2.6vw, 44px);
  padding:clamp(18px, 1.6vw, 24px);
  background:var(--n-050);
}
.cta__btn{
  display:grid; place-items:center;
  width:346px; max-width:100%; height:54px;
  background:var(--brand);
  font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--text-inv);
  transition:background .18s ease;
}
.cta__btn:hover{ background:var(--b-400); }
.cta__aside{ min-width:0; }
.cta__hint{
  font-size:12px; font-weight:500; line-height:16px;
  color:var(--text-mute);
}
.cta__phone{
  display:inline-block; margin-top:6px;
  font-size:16px; font-weight:600; line-height:18px;
  color:var(--text);
}
.cta__phone:hover{ color:var(--link); }

.anchors{
  display:flex; flex-wrap:wrap; gap:clamp(26px, 3.4vw, 58px);
  margin-top:clamp(34px, 3.6vw, 60px);
  border-bottom:1px solid var(--tint);
}
.anchors__link{
  padding:0 0 12px;
  font-size:clamp(15px, 1.32vw, 18px);
  font-weight:600; line-height:24px; letter-spacing:-.03em;
  color:var(--text-mute);
  transition:color .18s ease;
}

.anchors__link:hover{ color:var(--text); }
.anchors__link[aria-current="true"]{ color:var(--text); }

.specs-wrap{ padding-top:clamp(24px, 2.9vw, 49px); }

#specs, #about, #docs{ scroll-margin-top:calc(var(--stick-h) + 22px); }

.specs{ width:100%; border-collapse:collapse; table-layout:fixed; }
.specs col.specs__col--name { width:39.3%; }
.specs col.specs__col--value{ width:60.7%; }

.specs{
  --sp-a: 34.1%;
  --sp-b: 39.3%;
}
.specs tbody tr{
  background-image:linear-gradient(to right,
    var(--tint) 0, var(--tint) var(--sp-a),
    transparent var(--sp-a), transparent var(--sp-b),
    var(--tint) var(--sp-b), var(--tint) 100%);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
}

.specs tbody tr:last-child{ background-image:none; }
.specs th,
.specs td{
  padding:10px 24px 10px 0;
  text-align:left; vertical-align:top;
  font-size:13px; font-weight:600; line-height:26px;
}
.specs th{ color:var(--text); }
.specs td{ color:var(--text-body); }
.specs__name{ display:flex; align-items:flex-start; gap:17px; }
.specs__name img{ flex:none; width:30px; }

.block{ padding-top:clamp(34px, 3.6vw, 58px); }

.textpage{
  padding-left:calc(17.4% + clamp(20px, 2.6vw, 44px));

  padding-bottom:clamp(56px, 6vw, 110px);
}

.textpage .page-title{ margin-top:clamp(24px, 3.4vw, 58px); }
/* блоки внутри правой колонки пресс-центра: отступ слева уже дал рельс */
.textpage--inpress{ padding-left:0; padding-top:0; }
@media (max-width:1279px){
  .textpage{ padding-left:0; }
}

:where(.prose, .bullets, .prose-table, .shot, .shots) + .block__title{
  margin-top:clamp(34px, 3.4vw, 56px);
}

.lazy-mark{ height:1px; }

@keyframes byte-ghost{
  from{ background-position:-160% 0; }
  to  { background-position:160% 0; }
}
.post--ghost{ pointer-events:none; }
.post--ghost .post__shot,
.post--ghost .ghost__line{
  display:block;
  border-radius:3px;
  background:linear-gradient(100deg,
    var(--surface) 30%, var(--tint) 50%, var(--surface) 70%) 0 0 / 260% 100%;
  animation:byte-ghost 1.5s linear infinite;
}
.post--ghost .post__shot{ aspect-ratio:612 / 383; border-radius:0; }
.post--ghost .ghost__line{ height:10px; margin-top:14px; }
.post--ghost .ghost__line--date { width:82px; }
.post--ghost .ghost__line--title{ height:16px; width:88%; }
.post--ghost .ghost__line--tail { width:52%; }

.post--fresh{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease var(--in-lag, 0s),
             transform .55s cubic-bezier(.22, .61, .36, 1) var(--in-lag, 0s);
}
.post--fresh.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .post--ghost .post__shot,
  .post--ghost .ghost__line{ animation:none; }
  .post--fresh{ transition:none; opacity:1; transform:none; }
}

.specs__note{
  margin-top:clamp(22px, 2.4vw, 38px);
  font-size:12px; font-weight:500; line-height:1.5; letter-spacing:-.02em;
  color:var(--text-mute);
}

.block__title--sm{
  font-size:clamp(16px, 1.05vw, 18px);
  font-weight:600; line-height:1.25;
}

/* Прямой потомок, а не любой вложенный: колонка блоков страницы решения —
   это .shell сразу внутри .solview. Пока селектор был нестрогим, шаг между
   блоками доставался и содержимому чужих .shell внутри страницы — ряду
   якорей в полосе (каждый пункт, кроме первого, уезжал вниз на полшага),
   правой колонке блока «Вопрос-ответ», внутренностям полос с формой,
   этапами и рядами. */
.solview > .shell > * + *,
.textpage > * + *{ margin-top:var(--bsp-t, clamp(34px, 3.8vw, 64px)); }
.blockgrid{ row-gap:clamp(34px, 3.8vw, 64px); }

.blockgrid__cell > * + *{ margin-top:var(--bsp-t, clamp(18px, 1.8vw, 28px)); }

.solview > .shell > :first-child,
.textpage > :first-child{ margin-top:var(--bsp-t, 0); }

.solview > .shell > *,
.textpage > *,
.blockgrid__cell > *{ margin-bottom:var(--bsp-b, 0); }

.bsp-t-none{ --bsp-t:0; }
.bsp-t-xs{ --bsp-t:clamp(8px, 1vw, 14px); }
.bsp-t-s{ --bsp-t:clamp(16px, 1.8vw, 26px); }
.bsp-t-m{ --bsp-t:clamp(28px, 3vw, 44px); }
.bsp-t-l{ --bsp-t:clamp(44px, 4.6vw, 72px); }
.bsp-t-xl{ --bsp-t:clamp(64px, 6.6vw, 110px); }

.bsp-b-none{ --bsp-b:0; }
.bsp-b-xs{ --bsp-b:clamp(8px, 1vw, 14px); }
.bsp-b-s{ --bsp-b:clamp(16px, 1.8vw, 26px); }
.bsp-b-m{ --bsp-b:clamp(28px, 3vw, 44px); }
.bsp-b-l{ --bsp-b:clamp(44px, 4.6vw, 72px); }
.bsp-b-xl{ --bsp-b:clamp(64px, 6.6vw, 110px); }


.blockgrid{
  display:grid;

  grid-template-columns:calc(var(--col-text-n) * 100%) minmax(0, 1fr);
  column-gap:0;
  align-items:start;
}
.blockgrid__cell--left{ padding-right:clamp(20px, 2.6vw, 44px); }
.blockgrid__cell--left { grid-column:1; }
.blockgrid__cell--right{ grid-column:2; }

.blockgrid__cell > :first-child{ margin-top:var(--bsp-t, 0); }

@media (max-width:1023px){
  .blockgrid{ grid-template-columns:minmax(0, 1fr); row-gap:clamp(12px, 2vw, 22px); }
  .blockgrid__cell--left,
  .blockgrid__cell--right{ grid-column:1; }
}

.cats__nav[hidden],
.related__nav[hidden]{ display:none; }

.filters__mpt{ margin:clamp(16px, 2vw, 26px) 0 clamp(14px, 1.6vw, 22px); }
.mptsw{
  display:flex; align-items:center; gap:12px;
  padding:0;
  background:none;
}
.mptsw:hover .mptsw__label{ color:var(--brand); }
.mptsw__label{ transition:color .18s ease; }
.mptsw__box{
  position:relative;
  flex:none; width:36px; height:20px;
  border-radius:10px;
  background:var(--n-400);
  transition:background .2s ease;
}
.mptsw__box::after{
  content:"";
  position:absolute; left:2px; top:2px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--n-000);
  transition:transform .2s cubic-bezier(.22, .61, .36, 1);
}
.mptsw.is-on .mptsw__box{ background:var(--brand); }
.mptsw.is-on .mptsw__box::after{ transform:translateX(16px); }
.mptsw__label{
  font-size:13px; font-weight:600; letter-spacing:-.03em;
  color:var(--text-body);
}

.empty{
  margin:0; padding:clamp(40px, 6vw, 96px) 0;
  text-align:center;
  font-size:clamp(15px, 1.2vw, 18px); font-weight:500; line-height:1.5;
  color:var(--text-mute);
}
.empty__q{ color:var(--text); font-weight:600; }

.block__title{
  font-size:clamp(20px, 1.4vw, 24px);
  font-weight:500; line-height:1.1; letter-spacing:-.03em;
  color:var(--text);
}
.prose{
  max-width:900px; margin-top:clamp(22px, 2.2vw, 36px);
  font-size:15px; font-weight:600; line-height:24px;
  color:var(--text-body);
}
.prose p + p{ margin-top:24px; }

.prose a,
.wrule__text a,
.card__note a,
.specs__row a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover,
.wrule__text a:hover,
.card__note a:hover,
.specs__row a:hover{ color:var(--b-400); }

.bullets{
  max-width:900px; margin-top:clamp(22px, 2.2vw, 36px);
  font-size:15px; font-weight:500; line-height:24px;
  color:var(--text-body);
}
.bullets li{ position:relative; padding-left:22px; }
.bullets li::before{
  content:"";
  position:absolute; left:2px; top:9px;
  width:5px; height:5px; border-radius:50%;
  background:var(--a-bullet);
}

.shots{
  display:grid; gap:clamp(14px, 1.5vw, 21px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
  margin-top:clamp(30px, 3.4vw, 56px);
}

.shot{ position:relative; margin:0; }
.shot img{
  display:block; width:100%; height:auto;
  aspect-ratio:492 / 433; object-fit:cover;
  background:var(--n-050);
}

.shot video{
  display:block; width:100%; height:auto;
  aspect-ratio:492 / 433; object-fit:cover;
  background:var(--n-050);
  pointer-events:none;
}
.shots[data-shots] .shot{ cursor:pointer; }
/* the picture blocks open in the same popup, so their images say so */
[data-zoom] img{ cursor:zoom-in; }

.shot--wide{ margin-top:clamp(14px, 1.5vw, 21px); }
.shot--wide img{ aspect-ratio:1006 / 827; }
.shot__play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  border:0; background:none; cursor:pointer;
}
.shot__play::before{
  content:"";
  width:clamp(46px, 5vw, 80px); aspect-ratio:80 / 92;
  background:var(--n-000);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  transition:transform .2s ease;
}
.shot__play:hover::before{ transform:scale(1.06); }

.shot__play--mark{ pointer-events:none; }
.shot:hover .shot__play--mark::before{ transform:scale(1.06); }
.shot__video{
  display:block; width:100%; height:auto;
  aspect-ratio:492 / 433;
  object-fit:cover; background:var(--b-900);
}
.shot__note{
  margin-top:18px;
  font-size:13px; font-weight:500; line-height:21px;
  color:var(--text-mute);
}

.certs{ margin-top:clamp(22px, 2.2vw, 34px); border-top:1px solid var(--tint); }
.cert{
  display:flex; align-items:center; gap:clamp(14px, 1.6vw, 26px);
  padding:14px 0;
  border-bottom:1px solid var(--tint);
}
.cert__icon{ flex:none; width:25px; }

svg.cert__icon{ height:25px; color:var(--text-mute); }
.cert__name{
  flex:1; min-width:0;
  font-size:13px; font-weight:600; line-height:26px;
  color:var(--text);
}
.cert__dl{
  display:inline-flex; align-items:center; gap:11px;
  flex:none;
  font-size:12px; font-weight:600;
  color:var(--link);
}
.cert__dl img{ width:19px; }

.cert__dl:hover{ color:var(--b-400); }
.cert__dl:hover img,
.cert__dl:focus-visible img{ animation:cert-drop .5s ease; }
@keyframes cert-drop{
  0%   { transform:translateY(0);     opacity:1; }
  45%  { transform:translateY(9px);   opacity:0; }
  55%  { transform:translateY(-9px);  opacity:0; }
  100% { transform:translateY(0);     opacity:1; }
}

.related__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.related__nav{ display:flex; gap:12px; }

.related__strip{
  display:flex; gap:clamp(20px, 3.2vw, 50px);
  margin-top:clamp(24px, 2.4vw, 38px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
@media (prefers-reduced-motion:reduce){
  .related__strip{ scroll-behavior:auto; }
}
.related__strip::-webkit-scrollbar{ display:none; }
.related__strip > li{
  flex:0 0 calc((100% - 2 * clamp(20px, 3.2vw, 50px)) / 3);
  scroll-snap-align:start;
}
.card{
  display:flex; flex-direction:column;
  padding-top:20px;
  border-top:1px solid var(--tint);
}
.card__media{
  position:relative;
  display:grid; place-items:center;
  aspect-ratio:1 / 1;

  min-height:0; overflow:hidden;
  padding:18px;
  background:var(--n-050);
  transition:background .22s ease;
}

.card__shot{ position:absolute; inset:0; }
.card__media img{
  position:absolute; inset:18px;
  width:calc(100% - 36px); height:calc(100% - 36px);
  object-fit:contain;

  mix-blend-mode:darken;
  transition:transform .22s ease;
}

.card:hover .card__media,
.card:focus-within .card__media{ background:var(--tint); }
.card:hover .card__media img,
.card:focus-within .card__media img{ transform:translateY(-8px); }
.card__badge{ position:absolute; right:10px; top:10px; }
.card__title{
  margin-top:22px;
  font-size:16px; font-weight:600; line-height:1.2;
  color:var(--text);
}
.card__title a:hover{ color:var(--link); }
.card__note{
  margin-top:14px;
  font-size:12px; font-weight:500; line-height:1.35;
  color:var(--text-mute);
}
.card__specs{ margin-top:18px; }
.card__specs li{
  display:flex; align-items:center; gap:9px;
  padding:8px 0;
  border-bottom:1px solid var(--tint);
  font-size:12px; font-weight:500; line-height:1.4;
  color:var(--text-mute);
}
.card__specs li:first-child{ border-top:1px solid var(--tint); }
.card__specs img{ flex:none; width:22px; }

.card__more{ margin-top:auto; }

@media (max-width:1023px){

  .site-main > .product{ grid-template-columns:minmax(0, 1fr); gap:clamp(24px, 4vw, 40px); }

  .gallery{ position:static; padding-right:0; }
  .specs col.specs__col--name { width:46%; }
  .specs col.specs__col--value{ width:54%; }

  .specs{ --sp-a:40.8%; --sp-b:46%; }
  .related__strip > li{ flex-basis:calc((100% - clamp(20px, 3.2vw, 50px)) / 2); }

  .subbar__product{ gap:16px; }
  .subbar__name{ font-size:14px; }
  .subbar__btn{ width:auto; min-width:0; flex:0 1 257px; }
}

@media (max-width:767px){
  .shots{ grid-template-columns:1fr; }
  .related__strip > li{ flex-basis:100%; }
  .cta{ flex-direction:column; align-items:stretch; }
  .cta__btn{ width:100%; }

  .subbar__product{ display:none; }
  .subbar__actions{ flex:1; gap:8px; }
  .subbar__btn{
    flex:1 1 0;
    font-size:10px; line-height:12px; letter-spacing:.03em;
    white-space:normal;
  }

  .specs,
  .specs colgroup,
  .specs tbody,
  .specs tr,
  .specs th,
  .specs td{ display:block; width:auto; }
  .specs tr{ padding:10px 0; border-bottom:1px solid var(--tint); background-image:none; }
  .specs tbody tr:last-child{ border-bottom:0; }
  .specs th,
  .specs td{ padding:0; }
  .specs td{ margin-top:4px; padding-left:47px; }

  .cert{ gap:12px; }
  .cert__name{ line-height:20px; }
  .cert__dl{ gap:8px; }
}

.gallery__slide img{ cursor:zoom-in; }

.lightbox{
  width:min(96vw, 1400px);
  max-width:none; max-height:none;

  height:min(92vh, 1000px);
  height:min(92dvh, 1000px);
  padding:0; border:0;
  background:var(--n-000);
  color:var(--text);
}
.lightbox::backdrop{ background:rgb(0 28 56 / .88); }
.lightbox:not([open]){ display:none; }

.lightbox__stage{
  position:relative;
  width:100%; height:100%;
  display:grid; place-items:center;
  padding:clamp(16px, 4vw, 64px);
  background:var(--n-050);
  overflow:hidden;
}
.lightbox__slide{
  position:absolute; inset:clamp(16px, 4vw, 64px);
  display:none;
}
.lightbox__slide.is-active{ display:block; }
.lightbox__slide img,
.lightbox__slide video{
  width:100%; height:100%;
  object-fit:contain;
}
.lightbox__slide video{ background:var(--b-900); }

.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
}
.lightbox__nav--prev{ left:clamp(8px, 1.4vw, 22px); }
.lightbox__nav--next{ right:clamp(8px, 1.4vw, 22px); }

.lightbox__close{
  position:absolute;
  right:max(clamp(8px, 1.4vw, 22px), env(safe-area-inset-right));
  top:max(clamp(8px, 1.4vw, 22px), env(safe-area-inset-top));
  z-index:2;
  display:grid; place-items:center;
  width:44px; height:44px;
  padding:0; border:0; border-radius:50%;
  background:var(--n-000);
  cursor:pointer;
  transition:background .18s ease;
}
.lightbox__close:hover{ background:var(--tint); }

.lightbox__close::before,
.lightbox__close::after{
  content:"";
  position:absolute;
  width:17px; height:1px;
  background:var(--text);
}
.lightbox__close::before{ transform:rotate(45deg); }
.lightbox__close::after { transform:rotate(-45deg); }

.lightbox__count{
  position:absolute; left:50%; bottom:clamp(8px, 1.4vw, 20px);
  transform:translateX(-50%);
  z-index:2;
  padding:5px 12px; border-radius:20px;
  background:var(--n-000);
  font-size:12px; font-weight:600;
  color:var(--text-mute);
}

@media (max-width:767px){
  .lightbox{ width:100vw; height:100vh; height:100dvh; }

  .lightbox__nav{ top:50%; bottom:auto; transform:translateY(-50%); }
  .lightbox__nav--prev{ left:10px; }
  .lightbox__nav--next{ right:10px; }
  .lightbox__count{ bottom:max(18px, env(safe-area-inset-bottom)); }

  .lightbox__nav.round{
    width:44px; height:44px;
    box-shadow:0 6px 18px rgb(0 0 0 / .18);
  }
}

@media (max-width:768px){
  body.wpc_show_bottom_widget .filters .wpc-filters-widget-content{
    position:static; inset:auto; transform:none;
    z-index:auto; padding:0; margin:0;
    background:none; border-radius:0;
  }
  body.wpc_show_bottom_widget .filters .wpc-filters-widget-containers-wrapper{
    position:static; inset:auto;
    overflow:visible;
    padding:0; margin:0;
  }

  body.wpc_show_bottom_widget .filters .wpc-filters-widget-controls-container{ display:none; }

}

:root{
  --filters-w: 300px;
  --cat-gap:    42px;
  --prod-gap:   46px;
}
.catalog{ padding-bottom:clamp(30px, 3.4vw, 56px); }

.catalog__bar{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px;
  padding-top:clamp(18px, 1.7vw, 28px);
  min-height:36px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; min-width:0; }

.filters__open{
  display:none;
  align-items:center; gap:10px; flex:none;
  height:36px; padding:0 14px;
  border-radius:2px;
  background:var(--brand);
  font-size:13px; font-weight:600;
  color:var(--text-inv);
  cursor:pointer;
  transition:background .18s ease;
}
.filters__open:hover{ background:var(--b-400); }

.filters__open-icon{
  position:relative;
  width:14px; height:10px; flex:none;
}
.filters__open-icon::before,
.filters__open-icon::after{
  content:"";
  position:absolute; left:0; right:0; height:1px;
  background:currentColor;
  box-shadow:0 4px 0 currentColor;
}
.filters__open-icon::before{ top:1px; }
.filters__open-icon::after{ top:9px; right:5px; box-shadow:none; }
.filters__open-count{
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px;
  background:var(--n-000);
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
  color:var(--brand);
}
.filters__open-count:empty,
.filters__open-count[hidden]{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:10px;
  max-width:100%;
  height:36px; padding:0 12px;
  border-radius:2px;
  background:var(--tint);
  font-size:14px; font-weight:500; line-height:1;
  color:var(--text);
  cursor:pointer;
  transition:background .18s ease;
}
.chip__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.chip:hover{ background:var(--n-400); }

.chip[hidden]{ display:none; }

.chip__x{
  position:relative;
  width:21px; height:21px; flex:none;
  border-radius:50%;
  background:var(--n-000);
  transition:background .18s ease;
}
.chip__x::before,
.chip__x::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:11px; height:1px; margin:0 0 0 -5.5px;
  background:var(--text);
  transition:background .18s ease;
}

.chip__x:hover{ background:var(--a-red); }
.chip__x:hover::before,
.chip__x:hover::after{ background:var(--n-000); }
.chip__x::before{ transform:rotate(45deg); }
.chip__x::after { transform:rotate(-45deg); }

.catalog__body{
  display:grid;
  grid-template-columns:var(--filters-w) minmax(0, 1fr);
  column-gap:var(--cat-gap);
  margin-top:clamp(20px, 2vw, 32px);
}

.filters{
  display:block; position:static;
  width:auto; max-width:none; height:auto; max-height:none;
  min-width:0; margin:0; padding:0; border:0;
  background:none; color:inherit;
  overflow:visible;
}
.filters__head,
.filters__foot{ display:none; }
.filters__cats{
  padding-top:20px;
  border-top:1px solid var(--tint);
}
.filters__cats a{
  display:block;
  font-size:14px; font-weight:500; line-height:32px;
  color:var(--text);
  transition:color .18s ease;
}
.filters__cats a:hover{ color:var(--link); }

.filters__cats a[aria-current="page"]{ color:var(--link); font-weight:600; }

.filters__form{ margin-top:clamp(24px, 2.4vw, 38px); }

.fgroup + .fgroup{ margin-top:clamp(22px, 2.2vw, 34px); }
.fgroup--last{ padding-bottom:clamp(22px, 2.2vw, 34px); border-bottom:1px solid var(--tint); }

.fgroup__title{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; line-height:32px;
  color:var(--text);
}
.fgroup__list{ margin-top:6px; }

.fcheck{
  display:flex; align-items:center; gap:11px;
  line-height:32px;
  cursor:pointer;
}
.fcheck input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;
}
.fcheck__box{
  position:relative;
  width:20px; height:20px; flex:none;
  border-radius:2px;
  background:var(--tint);
  transition:background .18s ease;
}
.fcheck__box::before{
  content:"";
  position:absolute; inset:6px;
  border-radius:1px;
  background:var(--n-000);
  opacity:0; transition:opacity .15s ease;
}
.fcheck:hover .fcheck__box{ background:var(--n-400); }
.fcheck input:checked + .fcheck__box{ background:var(--brand); }
.fcheck input:checked + .fcheck__box::before{ opacity:1; }
.fcheck input:focus-visible + .fcheck__box{ outline:2px solid var(--brand); outline-offset:3px; }
.fcheck > span:last-child{
  font-size:14px; font-weight:500;
  color:var(--text);
}

.switch{
  display:flex; align-items:center; gap:12px;
  margin-top:10px;
  cursor:pointer;
}
.switch input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;
}
.switch__track{
  position:relative;
  width:40px; height:22px; flex:none;
  border-radius:99px;
  background:var(--n-400);
  transition:background .2s ease;
}
.switch__track::before{
  content:"";
  position:absolute; left:2px; top:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--n-000);
  transition:transform .2s ease;
}
.switch input:checked + .switch__track{ background:var(--brand); }
.switch input:checked + .switch__track::before{ transform:translateX(18px); }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--brand); outline-offset:3px; }
.switch__text{ font-size:14px; font-weight:500; color:var(--text); }

.hint{
  position:relative;
  width:18px; height:18px; flex:none;
  border:1px solid var(--n-400); border-radius:50%;
  background:none;
  font-size:11px; font-weight:600; line-height:1;
  color:var(--text-mute);
  cursor:help;
  transition:border-color .18s ease, color .18s ease;
}

.fgroup{
  position:relative;
  --hint-gap: 6px;
  --tail-h:   7px;
}
.hint__bubble{
  position:absolute; z-index:5;
  left:0; right:0; bottom:calc(100% + var(--hint-gap));
  padding:12px 14px;
  border-radius:4px;
  background:var(--n-000);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  font-size:11px; font-weight:500; line-height:1.55;
  color:var(--text-mute);
}
.hint__bubble[hidden]{ display:none; }

.hint::after{
  content:"";
  position:absolute; z-index:6;
  left:50%; margin-left:calc(var(--tail-h) * -1);

  top:calc(-1 * (var(--hint-gap) + 1px + var(--tail-h)));
  width:0; height:0;
  border-left:var(--tail-h) solid transparent;
  border-right:var(--tail-h) solid transparent;
  border-top:var(--tail-h) solid var(--n-000);
  display:none;
}

.fgroup__title:hover + .hint__bubble,
.fgroup__title:focus-within + .hint__bubble{ display:block; }
.fgroup__title:hover .hint::after,
.fgroup__title:focus-within .hint::after,
.fgroup.is-hinted .hint::after{ display:block; }
.fgroup__title:hover .hint,
.fgroup__title:focus-within .hint{ border-color:var(--text-mute); color:var(--text); }

.catalog__results{ min-width:0; }
.results .products{
  display:grid;

  grid-template-columns:repeat(4, minmax(0, 1fr));
  column-gap:var(--prod-gap);
  row-gap:36px;

  padding-bottom:36px;
  border-bottom:1px solid var(--tint);
}
.results .products > li{ position:relative; }

.results .products > li::after{
  content:"";
  position:absolute; z-index:0;
  left:calc(var(--prod-gap) / -2); top:7px; bottom:13px;
  width:1px;
  background:var(--tint);
}

.catalog__results .products > li:nth-child(4n+1)::after{ left:calc(var(--cat-gap) / -2); }

.results .products .card__media{
  background:none;
  padding:0;
  overflow:visible;
}
.results .products > li:hover .card__media,
.results .products > li:focus-within .card__media{ background:none; }
.results .products .card__media img{
  inset:13% 0;
  width:100%; height:74%;
}
.results .products .card__badge{ right:0; top:0; z-index:2; }

.results .products .card__media::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-color:var(--surface);
  background-image:linear-gradient(100deg,
    transparent 25%, rgba(255,255,255,.85) 50%, transparent 75%);
  background-repeat:no-repeat;
  background-size:220% 100%;
  animation:card-shimmer 1.4s linear infinite;
  transition:opacity .35s ease;
  pointer-events:none;
}
@keyframes card-shimmer{
  from{ background-position:-160% 0; }
  to  { background-position: 260% 0; }
}
.results .products > li.is-loaded .card__media::after{ opacity:0; animation:none; }

.results .products .card__title{ margin-top:56px; }

.results .products > li > *{ position:relative; z-index:1; }

.results .products > li{
  --more-h:   45px;
  --more-gap: 10px;
  --more-pad: 18px;
}
.results .products > li::before{
  content:"";
  position:absolute; z-index:0;

  top:7px;
  bottom:calc(-1 * (var(--more-gap) + var(--more-h) + var(--more-pad)));
  left:calc(var(--prod-gap) / -2); right:calc(var(--prod-gap) / -2);
  background:var(--n-000);
  box-shadow:0 4px 4px rgba(0,0,0,.09);
  opacity:0; transition:opacity .22s ease;
}
.catalog__results .products > li:nth-child(4n+1)::before{ left:calc(var(--cat-gap) / -2); }
.results .products > li:hover,
.results .products > li:focus-within{ z-index:2; }
.results .products > li:hover::before,
.results .products > li:focus-within::before{ opacity:1; }

.results .products .card__more{
  position:absolute; z-index:1;
  left:-8px; right:-8px; top:100%;
  margin-top:var(--more-gap);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s;
}
.results .products > li:hover .card__more,
.results .products > li:focus-within .card__more{ opacity:1; visibility:visible; }
.card__more-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  height:var(--more-h, 45px);
  background:var(--brand);
  font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--text-inv);
  transition:background .18s ease;
}
.card__more-btn:hover{ background:var(--b-400); }

.card__more-arrow{
  width:19px; height:13px; flex:none;
  background:currentColor;
  -webkit-mask:var(--arrow-mask) no-repeat center / contain;
          mask:var(--arrow-mask) no-repeat center / contain;
}

.catalog__results .pager{ margin-left:0; }

.seo{
  position:relative;
  display:grid;
  grid-template-columns:var(--col-text) minmax(0, 1fr);
  padding:clamp(40px, 4.6vw, 78px) 0 clamp(20px, 2.4vw, 40px);
}

.seo::before{
  content:"";
  position:absolute;
  left:calc(var(--col-text) - var(--rule-gap));
  top:clamp(40px, 4.6vw, 78px); bottom:clamp(20px, 2.4vw, 40px);
  width:1px;
  background:var(--tint);
}
.seo__lead{
  margin-left:calc(var(--filters-w) + var(--cat-gap));
  max-width:216px;
  font-size:14px; font-weight:600; line-height:24px;
  color:var(--text-mute);
}
/* Вторая колонка задаётся явно: подпись слева необязательна, и без неё
   текст уезжал в колонку подписи — к левому краю и вдвое уже. */
.seo__body{ grid-column:2; min-width:0; }
.seo__title{
  max-width:608px;
  font-size:clamp(28px, 2.8vw, 48px);
  font-weight:500; line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}
.seo .prose{ max-width:824px; }

.hero--catalog{ overflow:visible; }
.hero__shot{
  --shot-sink: 26px;
  position:absolute; z-index:1;
  bottom:calc(var(--shot-sink) * -1);
  left:calc(var(--shell-x) + 0.1055 * var(--shell-w));

  height:calc(78% + var(--shot-sink)); width:auto;
  pointer-events:none;

  animation:hero-shot-rise .9s cubic-bezier(.22, .61, .36, 1) .12s both;
}
@keyframes hero-shot-rise{
  from{ transform:translateY(78px); }
  to  { transform:none; }
}

@media (max-width:1439px){
  :root{ --filters-w:260px; --cat-gap:32px; --prod-gap:34px; }
  .catalog__results .products{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

  .catalog__results .products > li:nth-child(4n+1)::after{ left:calc(var(--prod-gap) / -2); }
  .catalog__results .products > li:nth-child(4n+1)::before{ left:calc(var(--prod-gap) / -2); }
  .catalog__results .products > li:nth-child(3n+1)::after,
  .catalog__results .products > li:nth-child(3n+1)::before{ left:calc(var(--cat-gap) / -2); }
  .results .products .card__title{ margin-top:40px; }
}

@media (max-width:1023px){

  .catalog__body{ grid-template-columns:minmax(0, 1fr); }
  .filters__open{ display:inline-flex; }

  /* Плашки «Reset all» и выбранных значений внутри шторки фильтров.
     На широком экране они остаются: там они в оформлении сайта и стоят над
     списком товаров. В шторке же дублируют сами фильтры, приходят без
     перевода и ломают её вид. */
  /* Вес селектора поднят телом документа: у плагина своё правило
     с двумя классами, и без этого оно перебивает. Тот же приём
     применён ниже к оформлению плашек над списком товаров. */
  body .wpc-filters-main-wrap .wpc-inner-widget-chips-wrapper{ display:none; }

  .filters{
    position:fixed; inset:0 auto 0 0;
    z-index:70;
    width:min(86vw, 360px); height:100%;
    padding:0 var(--pad) 96px;
    background:var(--n-000);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-100%);
    transition:transform .3s ease;
  }
  .filters.is-open{ transform:none; }
  .filters::backdrop{ background:rgb(0 28 56 / .55); }
  .filters:not([open]){ display:none; }

  .filters__head{
    position:sticky; top:0; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    height:60px;
    background:var(--n-000);
    box-shadow:inset 0 -1px 0 var(--tint);
  }
  .filters__head-title{ font-size:16px; font-weight:600; color:var(--text); }
  .filters__close{
    position:relative;
    width:40px; height:40px; margin-right:-10px;
    background:none; cursor:pointer;
  }
  .filters__close::before,
  .filters__close::after{
    content:"";
    position:absolute; left:50%; top:50%;
    width:17px; height:1px; margin-left:-8.5px;
    background:var(--text);
  }
  .filters__close::before{ transform:rotate(45deg); }
  .filters__close::after { transform:rotate(-45deg); }

  .filters__foot{
    position:fixed; left:0; bottom:0;
    display:block;
    width:min(86vw, 360px);
    padding:14px var(--pad);
    background:var(--n-000);
    box-shadow:0 -4px 12px rgba(0,0,0,.08);
  }
  .filters__apply{
    width:100%; height:48px;
    background:var(--brand); color:var(--text-inv);
    font-size:12px;
  }
  .filters__apply:hover{ background:var(--b-400); }

  .filters__cats{ padding-top:18px; border-top:0; }
  .filters__form{ margin-top:22px; }
  .fgroup--last{ border-bottom:0; }
  .hint__bubble{ right:0; }
  .hint__bubble::before{ left:76px; }

  .catalog__results .products{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .results .products > li::after{ left:calc(var(--prod-gap) / -2); }
  .catalog__results .products > li:nth-child(2n+1)::after{ display:none; }
  .catalog__results .products > li:nth-child(3n+1)::before,
  .catalog__results .products > li:nth-child(4n+1)::before,
  .catalog__results .products > li:nth-child(2n+1)::before{ left:calc(var(--prod-gap) / -2); }

  .hero__shot{ display:none; }
  .seo{ grid-template-columns:minmax(0, 1fr); gap:clamp(14px, 2vw, 22px); }
  .seo::before{ display:none; }
  .seo__lead{ margin-left:0; max-width:none; }
  /* Колонка здесь одна, и закреплять текст за второй нельзя: сетка создала
     бы её заново, а подпись осталась бы в первой — нулевой ширины, и текст
     из неё лёг бы поверх соседнего блока. */
  .seo__body{ grid-column:auto; }
}

@media (max-width:767px){
  :root{ --prod-gap:20px; }

  .filters__open{ display:flex; width:100%; justify-content:center; height:44px; }
  .chips{ flex-basis:100%; }
  .results .products{ row-gap:26px; padding-bottom:26px; }
  .results .products > li::after{ display:none; }
  .results .products .card__title{ margin-top:22px; }

  .results .products > li::before{ display:none; }
  .card__more{ display:none; }
  .chip{ font-size:13px; }
}

@media (max-width:479px){
  .catalog__results .products{ grid-template-columns:minmax(0, 1fr); }

  .results .products .card__media{ aspect-ratio:4 / 3; }
}

.search-page{
  --prod-gap: 42px;
  padding-bottom:clamp(30px, 3.4vw, 56px);
}
.search-page .products{ grid-template-columns:repeat(5, minmax(0, 1fr)); }

.search-page .products > li:nth-child(5n+1)::after{ display:none; }

.hero__foot--search{ display:block; }
.hero__search{
  position:relative;
  display:flex; align-items:center;
  width:min(643px, 100%); height:52px;
  background:var(--n-000);
}

.hero__search:focus-within{ outline:2px solid var(--text-inv); outline-offset:2px; }
.hero__search input:focus,
.hero__search input:focus-visible,
.hero__search button:focus-visible{ outline:none; }
.hero__search input{
  flex:1; min-width:0;
  height:100%; padding:0 12px 0 20px;
  border:0; background:none;
  font-size:16px; font-weight:600; letter-spacing:-.03em;
  color:var(--text);
}
.hero__search input::placeholder{ color:var(--n-450); font-weight:500; }

.hero__search input::-webkit-search-decoration,
.hero__search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

.hero__search.is-filled [data-search-toggle] img,
.psearch.is-filled [data-search-toggle] img{ opacity:0; }
.hero__search [data-search-toggle],
.psearch [data-search-toggle]{ position:relative; }
.hero__search [data-search-toggle] img,
.psearch [data-search-toggle] img{ transition:opacity .15s ease; }
.hero__search.is-filled [data-search-toggle]::before,
.hero__search.is-filled [data-search-toggle]::after,
.psearch.is-filled [data-search-toggle]::before,
.psearch.is-filled [data-search-toggle]::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:14px; height:1.5px; margin:-1px 0 0 -7px;

  background:var(--text);
}
.hero__search.is-filled [data-search-toggle]::before,
.psearch.is-filled [data-search-toggle]::before{ transform:rotate(45deg); }
.hero__search.is-filled [data-search-toggle]::after,
.psearch.is-filled [data-search-toggle]::after{ transform:rotate(-45deg); }

.hero__search button{
  display:grid; place-items:center;
  width:56px; height:100%; flex:none;
  background:none; cursor:pointer;
  transition:opacity .18s ease;
}
.hero__search button:hover{ opacity:.6; }
.hero__search button img{ width:22px; height:auto; }
.hero__hint{
  margin-top:6px;
  font-size:10px; font-weight:500; line-height:24px;
  color:var(--text-inv-dim);
}

.kinds{
  display:flex; flex-wrap:wrap;
  gap:clamp(20px, 2.6vw, 44px);
  padding:clamp(30px, 5.1vw, 88px) 0 clamp(22px, 3.2vw, 56px);
}
.kinds__link{
  font-size:16px; font-weight:600; line-height:1; letter-spacing:-.03em;
  color:var(--link);
  transition:color .18s ease;
}
.kinds__link:hover{ color:var(--b-400); }
.kinds__link[aria-current="page"]{ color:var(--text); cursor:default; }
.kinds__count{
  margin-left:6px;
  color:var(--text-mute);
  font-weight:600;
}

.search-page .pager{ margin-left:0; }

@media (max-width:1599px){
  .search-page{ --prod-gap:38px; }
  .search-page .products{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .search-page .products > li:nth-child(5n+1)::after{ display:block; }
  .search-page .products > li:nth-child(4n+1)::after{ display:none; }
}

@media (max-width:1279px){
  .search-page{ --prod-gap:34px; }
  .search-page .products{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .search-page .products > li:nth-child(4n+1)::after{ display:block; }
  .search-page .products > li:nth-child(3n+1)::after{ display:none; }
  .results .products .card__title{ margin-top:40px; }
}

@media (max-width:767px){
  .search-page{ --prod-gap:20px; }
  .search-page .products{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hero__search{ height:48px; }
  .hero__search input{ font-size:15px; padding-left:16px; }
  .kinds{ gap:18px 24px; }
  .kinds__link{ font-size:15px; }
}

@media (max-width:479px){
  .search-page .products{ grid-template-columns:minmax(0, 1fr); }
}

:root{ --cookie-h: 57px; }

.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:var(--brand);
  transform:translateY(100%);
  transition:transform .32s ease;
}
.cookie.is-up{ transform:none; }
.cookie[hidden]{ display:none; }

.cookie__inner{
  display:flex; align-items:center;
  gap:clamp(16px, 2vw, 34px);
  min-height:var(--cookie-h);
  padding:10px 0;
}
.cookie__text{
  flex:1; min-width:0;
  max-width:863px;
  font-size:11px; font-weight:600; line-height:14px;

  color:var(--text-inv-key);
}

.cookie__actions{ display:flex; flex:none; gap:12px; margin-left:auto; }
.cookie__btn{
  width:189px; height:36px;
  font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.cookie__btn--ghost{
  border:1px solid rgb(255 255 255 / .28);
  background:none;
  color:var(--text-inv);
}
.cookie__btn--ghost:hover{ border-color:var(--text-inv); background:rgb(255 255 255 / .1); }
.cookie__btn--solid{
  border:1px solid var(--n-000);
  background:var(--n-000);
  color:var(--brand);
}
.cookie__btn--solid:hover{ background:var(--text-inv-key); border-color:var(--text-inv-key); }

.cookie__close{
  position:relative;
  width:34px; height:34px; flex:none;
  margin-right:-9px;
  background:none; cursor:pointer;
}
.cookie__close::before,
.cookie__close::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:15px; height:1px; margin-left:-7.5px;
  background:var(--text-inv);
  transition:background .18s ease;
}
.cookie__close::before{ transform:rotate(45deg); }
.cookie__close::after { transform:rotate(-45deg); }
.cookie__close:hover::before,
.cookie__close:hover::after{ background:var(--text-inv-key); }
.cookie__close:focus-visible{ outline:2px solid var(--text-inv); outline-offset:-4px; }
.cookie__btn:focus-visible{ outline:2px solid var(--text-inv); outline-offset:3px; }

.has-cookie .site-foot{ padding-bottom:var(--cookie-h); }

@media (max-width:1023px){
  .cookie__text{ max-width:none; }
  .cookie__btn{ width:150px; }
}

@media (max-width:767px){

  .cookie__inner{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:12px 10px;
    padding:14px 0 16px;
  }
  .cookie__text{ grid-column:1; }
  .cookie__close{ grid-column:2; grid-row:1; align-self:start; margin:-6px -9px 0 0; }

  .cookie__actions{ grid-column:1 / -1; margin-left:0; }
  .cookie__btn{ flex:1 1 0; width:auto; }
}

.sitemap{ padding:clamp(20px, 2.4vw, 34px) 0 clamp(44px, 6vw, 104px); }

.page-title{
  font-size:clamp(34px, 4.2vw, 64px);
  font-weight:600; line-height:1.05; letter-spacing:-.03em;
  color:var(--text);
}

.tree{

  --ind: 56px;
  --arm: 38px;
  --gap: 10px;
  --lift: calc(var(--arm) + var(--gap));
  margin-top:clamp(38px, 5vw, 81px);
}
.tree ul{ list-style:none; }
.tree__level{ padding-left:var(--ind); }

.tree li{
  position:relative;
  padding:8px 0;
  --elbow: 18px;
}

.tree li::before{
  content:"";
  position:absolute; left:calc(var(--lift) * -1); top:0; bottom:0;
  width:1px;
  background:var(--rail);
}
.tree li:last-child::before{ bottom:auto; height:var(--elbow); }
.tree li::after{
  content:"";
  position:absolute; left:calc(var(--lift) * -1); top:var(--elbow);
  width:var(--arm); height:1px;
  background:var(--rail);
}

.tree__root > li::before,
.tree__root > li::after{ display:none; }

.tree a,
.tree__label{
  display:inline-block;
  font-size:15px; font-weight:500; line-height:20px;
  color:var(--text);
  transition:color .18s ease;
}
.tree a:hover{ color:var(--link); }

.tree__level > li:first-child{
  --open: 14px;
  padding-top:calc(8px + var(--open));
  --elbow: calc(18px + var(--open));
}
.tree__level--1 > li:first-child{ --elbow: calc(21px + var(--open)); }

.tree a.tree__home{
  font-size:16px; font-weight:600; line-height:26px;
}

.tree__level--1 > li{ --elbow:21px; }
.tree__level--1 > li > a,
.tree__level--1 > li > .tree__label{
  font-size:16px; font-weight:600; line-height:26px;
}

@media (max-width:767px){

  .tree{ --ind:30px; --arm:20px; --gap:8px; }
  .tree a,
  .tree__label{ font-size:14px; }
  .tree a.tree__home{ font-size:15px; line-height:22px; }
  .tree__level--1 > li > a,
  .tree__level--1 > li > .tree__label{ font-size:15px; line-height:22px; }
  .tree__level--1 > li{ --elbow:19px; }
}

.press{ padding:clamp(20px, 2.4vw, 34px) 0 clamp(40px, 5vw, 90px); }
.press__body{

  display:grid;
  grid-template-columns:34.2% minmax(0, 1fr);
  margin-top:clamp(34px, 4.4vw, 76px);
}

.press__rail{
  min-width:0;
  position:sticky;
  top:calc(var(--topbar-h) + 24px);
  align-self:start;
}
.press__rail a{
  display:block;
  max-width:227px;
  font-size:15px; font-weight:600; line-height:39px;
  color:var(--text-mute);
  transition:color .18s ease;
}
.press__rail a:hover{ color:var(--link); }
.press__rail a[aria-current="page"]{ color:var(--link); }

.filterbar{
  display:flex; flex-wrap:wrap; gap:9px;
  padding-bottom:clamp(28px, 3vw, 51px);
}
/* вторая полоса (метки) идёт сразу под первой — общий отступ снизу оставляем
   только у последней */
.filterbar:has(+ .filterbar){ padding-bottom:12px; }

.filterbar__chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:66px; height:35px; padding:0 14px;
  border:1px solid var(--rail); border-radius:2px;
  background:none;
  font-size:13px; font-weight:600; letter-spacing:-.03em;
  color:var(--text-body);
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.filterbar__chip:hover{ border-color:var(--brand); color:var(--brand); }
.filterbar__chip.is-active{
  border-color:var(--brand); background:var(--brand);
  color:var(--text-inv);
}

.posts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:52px;
  row-gap:46px;
  padding-bottom:46px;
  border-bottom:1px solid var(--tint);
}
.post{
  position:relative;
  display:flex; flex-direction:column;
  padding-top:27px;
  border-top:1px solid var(--tint);
}

.posts > .post:nth-child(2n)::before{
  content:"";
  position:absolute; left:-26px; top:0; bottom:-24px;
  width:1px;
  background:var(--tint);
}

.post__shot{
  display:block;
  /* рамка карточки из макета; у новости с широкой обложкой её пропорции
     приходят из шаблона в --shot-ar, чтобы картинку не срезало по бокам */
  aspect-ratio:var(--shot-ar, 527 / 330);
  background:var(--surface);
  overflow:hidden;
}
.post__shot img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.post:hover .post__shot img,
.also__item:hover .post__shot img{ transform:scale(1.03); }

/* «Пресса о нас» — чужие публикации: снимок квадратный, вчетверо меньше и
   стоит слева от даты и заголовка */
.posts--clip .post{
  display:grid;
  grid-template-columns:clamp(80px, 7.4vw, 112px) minmax(0, 1fr);
  align-items:start;
  column-gap:clamp(14px, 1.4vw, 22px);
}
.posts--clip .post__shot{
  grid-row:1 / span 3;
  aspect-ratio:1 / 1;
}
.posts--clip .post__date{ margin-top:0; }

.post__date{
  margin-top:14px;
  font-size:14px; font-weight:500; line-height:32px; letter-spacing:-.03em;
  color:var(--text-mute);
}
.post__title{
  margin-top:8px;
  font-size:21px; font-weight:600; line-height:28px; letter-spacing:-.03em;
}
.post__title a{
  color:var(--text);
  transition:color .18s ease;
}
.post__title a:hover{ color:var(--link); }

/* строка итога под заголовком: у новости её нет, у проекта это главное */
.post__note{
  margin-top:10px;
  font-size:14px; font-weight:500; line-height:1.45; letter-spacing:-.02em;
  color:var(--text-mute);
}

.post__tags{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-top:auto; padding-top:clamp(24px, 3vw, 52px);
}
.tag{
  display:inline-flex; align-items:center;
  height:23px; padding:0 9px;
  border:1px solid var(--n-400); border-radius:2px;
  font-size:13px; font-weight:600; line-height:1; letter-spacing:-.03em;
  color:var(--num);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.tag:hover,
.tag.is-on{ background:var(--n-400); border-color:var(--n-400); color:var(--text); }

.press .pager{ margin-left:0; }

@media (max-width:1279px){
  .press__body{ grid-template-columns:26% minmax(0, 1fr); }
  .posts{ column-gap:34px; }
  .posts > .post:nth-child(2n)::before{ left:-17px; }
  .post__title{ font-size:19px; line-height:26px; }
}

@media (max-width:1023px){

  .press__body{ grid-template-columns:minmax(0, 1fr); }

  .press__rail{
    position:static;
    padding-bottom:clamp(20px, 3vw, 30px);
    border-bottom:1px solid var(--tint);
  }
  .press__rail ul{ display:flex; flex-wrap:wrap; gap:0 clamp(18px, 3vw, 34px); }
  .press__rail a{ max-width:none; line-height:32px; }
  .filterbar{ padding-top:clamp(20px, 3vw, 30px); }
}

@media (max-width:767px){
  .posts{ grid-template-columns:minmax(0, 1fr); row-gap:30px; padding-bottom:30px; }
  .posts > .post:nth-child(2n)::before{ display:none; }
  .post{ padding-top:20px; }
  .post__title{ font-size:17px; line-height:24px; }
  .post__tags{ padding-top:18px; }
  .filterbar__chip{ height:32px; min-width:0; padding:0 12px; font-size:12px; }
}

.hero--home{

  min-height:100vh;
  min-height:100svh;
  padding-bottom:clamp(48px, 5vw, 90px);
  background:var(--b-900);
}
.hero--home .hero__photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;

  transform-origin:center;
  will-change:transform;
}

.hero__scrim{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgb(0 28 56 / .55) 0%, rgb(0 28 56 / 0) 34%),
    linear-gradient(75deg, rgb(0 28 56 / .82) 18%, rgb(0 28 56 / .28) 62%, rgb(0 28 56 / .1) 100%);
}
.hero--home > .shell{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; }

.hero--home .hero__body{ flex:none; margin-top:auto; padding-top:0; }

.hero__title--home{
  max-width:960px;
  font-size:clamp(30px, 3.5vw, 60px);
  font-weight:600; line-height:1.07; letter-spacing:-.02em;
}
.hero__lead--home{
  max-width:622px; margin-top:clamp(18px, 2vw, 32px);
  font-size:clamp(14px, 1.05vw, 16px); font-weight:500; line-height:1.55;
  color:var(--text-inv-soft);
}
.hero__acts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px, 2.4vw, 40px);
  margin-top:clamp(26px, 3vw, 50px);
}
.hero__more{
  display:inline-flex; align-items:center; gap:12px;
  font-size:14px; font-weight:500;
  color:var(--text-inv);
}
.hero__more-arrow{
  position:relative;
  width:6px; height:12px;
}
.hero__more-arrow::before{
  content:"";
  position:absolute; left:0; top:2px;
  width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.hero__more:hover{ color:var(--text-inv-key); }
.hero__mark{
  position:absolute; right:0; bottom:0;
  font-size:16px; font-weight:500;
  color:var(--text-inv);
  opacity:.8;
}
.hero__mark sup{ font-size:.6em; }

@keyframes byte-hero-rise {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:none; }
}
@keyframes byte-hero-fade {
  from { opacity:0; }
  to   { opacity:1; }
}

.hero--home .hero__photo{ animation:byte-hero-fade 1.2s ease both; }
.hero--home .hero__title--home{ animation:byte-hero-rise .8s cubic-bezier(.22, .61, .36, 1) both .15s; }
.hero--home .hero__lead--home{ animation:byte-hero-rise .8s cubic-bezier(.22, .61, .36, 1) both .3s; }
.hero--home .hero__acts{ animation:byte-hero-rise .8s cubic-bezier(.22, .61, .36, 1) both .45s; }

.hero--home .hero__mark{ animation:byte-hero-fade 1s ease both .6s; }

@media (prefers-reduced-motion: reduce){
  .hero--home .hero__photo,
  .hero--home .hero__title--home,
  .hero--home .hero__lead--home,
  .hero--home .hero__acts,
  .hero--home .hero__mark{ animation:none; }
}

.block-title{
  font-size:clamp(24px, 2.4vw, 40px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
  color:var(--text);
}

.block-title--lg{ font-size:clamp(28px, 3.13vw, 54px); }

.btn-wide{
  display:inline-flex; align-items:center; justify-content:space-between; gap:22px;
  width:196px; height:45px; padding:0 16px;
  border:1px solid var(--rail);
  font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--text);
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}

.btn-wide:hover,
.btn-wide:focus-visible{
  border-color:var(--brand);
  background:var(--brand);
  color:var(--text-inv);
}
.btn-wide__arrow{
  width:19px; height:13px; flex:none;
  background:currentColor;
  -webkit-mask:var(--arrow-mask) no-repeat center / contain;
          mask:var(--arrow-mask) no-repeat center / contain;
}

.usp{ padding-top:var(--usp-gap); }
.usp__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 1.6vw, 27px);
}
.usp__card{
  display:flex; align-items:center; gap:clamp(18px, 2vw, 34px);
  min-height:var(--usp-h); padding:clamp(20px, 2.2vw, 38px);
  background:var(--surface);
}

.usp{ --usp-icon: clamp(84px, 7.8vw, 134px); }
.usp__icon{
  width:var(--usp-icon); height:auto; flex:none;
  object-fit:contain;
}
.usp__icon--dev { width:calc(var(--usp-icon) * .68); }
.usp__icon--make{ width:calc(var(--usp-icon) * .94); }

.usp__cube path[fill="#030202"]{ stroke:#030202; stroke-width:.85; }
.usp__links path{ stroke:#030202; stroke-width:.5; }

.usp__layer{ transform-box:view-box; transform-origin:50px 57px; }

.usp__layer--1{ --from:55.25px; --lag:.40s; }
.usp__layer--2{ --from:39.52px; --lag:.30s; }
.usp__layer--3{ --from:25.00px; --lag:.20s; }
.usp__layer--4{ --from:12.90px; --lag:.10s; }
.usp__layer--5{ --from:0px;     --lag:0s;   }
.usp__card:hover .usp__layer,
.value:hover .usp__layer{
  animation:usp-deal 2.4s cubic-bezier(.22, .61, .36, 1) var(--lag, 0s) infinite both;
}

@keyframes usp-deal{
  0%  { transform:translateY(var(--from, 0)); opacity:0; }
  40% { transform:none; opacity:1; }
  100%{ transform:none; opacity:1; }
}

.usp__card:hover .usp__core,
.value:hover .usp__core{ animation:usp-settle 2.4s ease .6s infinite both; }
@keyframes usp-settle{
  0%  { opacity:0; }
  25% { opacity:1; }
  100%{ opacity:1; }
}

.usp__cube{ transform-box:fill-box; transform-origin:center; }
.usp__cube--1{ --dur:1.7s;  --lag:0s;    --peak:1.18; }
.usp__cube--2{ --dur:2.3s;  --lag:.21s;  --peak:.82;  }
.usp__cube--3{ --dur:1.9s;  --lag:.47s;  --peak:1.22; }
.usp__cube--4{ --dur:2.7s;  --lag:.13s;  --peak:.78;  }
.usp__cube--5{ --dur:1.5s;  --lag:.62s;  --peak:1.15; }
.usp__cube--6{ --dur:2.1s;  --lag:.35s;  --peak:.85;  }
.usp__cube--7{ --dur:2.9s;  --lag:.08s;  --peak:1.25; }
.usp__card:hover .usp__cube,
.value:hover .usp__cube{
  animation:usp-breathe var(--dur, 2s) ease-in-out var(--lag, 0s) infinite;
}
@keyframes usp-breathe{
  0%,  100%{ transform:scale(1); }
  50%      { transform:scale(var(--peak, 1.15)); }
}

.usp__seed{ transform-box:fill-box; transform-origin:center; }
.value:hover .usp__seed--1{
  animation:usp-drop 2.4s cubic-bezier(.22, .61, .36, 1) infinite both;
}
.value:hover .usp__seed--2{
  animation:usp-take 2.4s cubic-bezier(.22, .61, .36, 1) .12s infinite both;
}
.usp__bowl{ transform-box:fill-box; transform-origin:center bottom; }
.value:hover .usp__bowl{
  animation:usp-dip 2.4s cubic-bezier(.22, .61, .36, 1) .2s infinite both;
}
@keyframes usp-drop{
  0%  { transform:translateY(-16px) scale(.6); opacity:0; }
  35% { transform:none; opacity:1; }
  100%{ transform:none; opacity:1; }
}
@keyframes usp-take{
  0%,  20%{ transform:scale(1); }
  38%     { transform:scale(1.35); }
  60%,100%{ transform:scale(1); }
}
@keyframes usp-dip{
  0%,  25%{ transform:scaleY(1); }
  42%     { transform:scaleY(.965); }
  70%,100%{ transform:scaleY(1); }
}

.usp__icon--care{ height:auto; }
.usp__ring,
.usp__dots{
  transform-box:view-box; transform-origin:73.5px 73.5px;
  animation:usp-spin-cw 18s linear infinite paused;
}
.usp__dots{ animation-name:usp-spin-ccw; animation-duration:26s; }
.usp__card:hover .usp__ring,
.usp__card:hover .usp__dots,
.value:hover .usp__ring,
.value:hover .usp__dots{ animation-play-state:running; }

@keyframes usp-spin-cw { to{ transform:rotate(360deg);  } }
@keyframes usp-spin-ccw{ to{ transform:rotate(-360deg); } }
.usp__text{
  font-size:clamp(13px, 1.05vw, 16px); font-weight:500; line-height:1.5;
  color:var(--text);
}

.cats{
  --cats-pad:clamp(34px, 4.4vw, 76px);
  position:relative;
  padding-top:var(--cats-pad);
}
.cats__row{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  column-gap:44px;
}

.cats__row > .cat{
  position:relative;
  border-top:1px solid var(--tint);
  border-bottom:1px solid var(--tint);
}

.cats__row > .cat + .cat::before{
  content:"";
  position:absolute; left:-22px; top:10px; bottom:21px;
  width:1px;
  background:var(--tint);
}

.cats.is-armed .cat__link{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s ease var(--in-lag, 0s),
             transform .55s cubic-bezier(.22, .61, .36, 1) var(--in-lag, 0s);
}
.cats.is-armed .cat.is-in .cat__link{ opacity:1; transform:none; }
.cat__link{
  display:flex; flex-direction:column;
  height:100%; padding:26px 0 30px;
}
.cat__shot{
  position:relative;
  display:block;
  aspect-ratio:1 / 1;
}
.cat__shot img{
  position:absolute; inset:13%;
  width:74%; height:74%;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .3s ease;
}
.cat__link:hover .cat__shot img{ transform:translateY(-8px); }
.cat__name{
  margin-top:auto; padding-top:22px;
  font-size:clamp(13px, 1.05vw, 16px); font-weight:600; line-height:1.3;
  letter-spacing:-.03em;

  text-align:center;
  color:var(--text);
  transition:color .18s ease;
}
.cat__link:hover .cat__name{ color:var(--link); }

.cats__nav{
  position:absolute; right:0; top:calc(var(--cats-pad) + 26px);
  z-index:2;
  display:flex; gap:12px;
}

.solutions{
  display:grid;
  grid-template-columns:38.5% minmax(0, 1fr);
  column-gap:clamp(24px, 3vw, 52px);
  padding-top:clamp(40px, 5.4vw, 92px);
}
.solutions__intro{ display:flex; flex-direction:column; align-items:flex-start; }

.solutions__intro .block-title{ max-width:560px; }
.solutions__lead{
  max-width:341px; margin-top:clamp(20px, 2.6vw, 46px);
  font-size:14px; font-weight:500; line-height:1.6;
  color:var(--text-body);
}
.solutions__intro .btn-wide{ margin-top:auto; }

.solutions__list{ min-width:0; }
.solution{
  display:grid;
  grid-template-columns:226px minmax(0, 1fr) 41px;
  align-items:start;
  gap:0 clamp(20px, 2.4vw, 42px);
  padding:clamp(16px, 1.8vw, 26px) 0 clamp(26px, 3vw, 44px);
  border-top:1px solid var(--tint);
}
.solution:last-child{ border-bottom:1px solid var(--tint); }
.solution__shot{
  display:block;
  aspect-ratio:226 / 138;
  overflow:hidden;
  background:var(--surface);
}
.solution__shot img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.solution:hover .solution__shot img,
.solution:focus-within .solution__shot img{ transform:scale(1.06); }
.solution__num{
  grid-column:2; grid-row:1;
  font-size:14px; font-weight:500; line-height:1;
  color:var(--num);
}
.solution__body{ grid-column:2; grid-row:1; padding-top:22px; min-width:0; }
.solution__title{
  font-size:clamp(18px, 1.5vw, 26px); font-weight:600; line-height:1.2;
  letter-spacing:-.03em;
}
.solution__title a{
  color:var(--text);
  transition:color .18s ease;
}
.solution__title a:hover{ color:var(--link); }
.solution__note{
  max-width:443px; margin-top:14px;
  font-size:13px; font-weight:500; line-height:1.55;
  color:var(--text-mute);
}

.solution__go{
  grid-column:3; grid-row:1;
  position:relative;
  width:41px; height:40px;
  overflow:hidden;
  background:var(--brand);
  transition:background .18s ease;
}
.solution:hover .solution__go,
.solution:focus-within .solution__go{ background:var(--b-400); }

.solution__go-arrow{
  position:absolute; left:50%; top:50%;
  width:19px; height:13px; margin:-6.5px 0 0 -9.5px;
  background:var(--text-inv);
  transform:rotate(-45deg);
  transition:transform .34s cubic-bezier(.22, .61, .36, 1);
  -webkit-mask:var(--arrow-mask) no-repeat center / contain;
          mask:var(--arrow-mask) no-repeat center / contain;
}
.solution__go-arrow:last-child{ transform:rotate(-45deg) translateX(-190%); }
.solution:hover .solution__go-arrow:first-child,
.solution:focus-within .solution__go-arrow:first-child{
  transform:rotate(-45deg) translateX(190%);
}
.solution:hover .solution__go-arrow:last-child,
.solution:focus-within .solution__go-arrow:last-child{
  transform:rotate(-45deg) translateX(0);
}

.industry{
  position:relative;
  display:flex;
  min-height:clamp(460px, 55vw, 951px);
  margin-top:clamp(44px, 5.6vw, 96px);
  overflow:hidden;
  color:var(--text-inv);
}
.industry__media{ position:absolute; inset:0; z-index:0; }

.industry__shot{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
}
.industry__shot.is-prev{ opacity:1; z-index:0; }
.industry__shot.is-on{
  opacity:1; z-index:1;
  animation:byte-ind-wipe .7s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes byte-ind-wipe{
  from{ clip-path:var(--wipe, inset(0 0 0 100%)); }
  to  { clip-path:inset(0); }
}

@media (prefers-reduced-motion: reduce){
  .industry__shot.is-on{ animation:none; }
}
.industry__scrim{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgb(0 28 56 / .58) 0%, rgb(0 28 56 / .28) 42%, rgb(0 28 56 / .78) 100%);
}
.industry__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  padding:clamp(34px, 3.6vw, 61px) 0 clamp(34px, 4vw, 66px);
}
.industry__eyebrow{
  font-size:clamp(18px, 1.6vw, 28px); font-weight:600; letter-spacing:-.03em;
}

.industry__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px, 4vw, 70px);
  margin-top:auto;
}

.industry__copy{ display:grid; max-width:478px; }

.industry__slide{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
  transform:scale(1.05);
  filter:blur(6px);
  transition:opacity .45s ease, transform .6s cubic-bezier(.22, .61, .36, 1),
             filter .45s ease, visibility .6s;
}
.industry__slide.is-on{ opacity:1; visibility:visible; transform:none; filter:none; }
.industry__slide.is-out{ opacity:0; transform:scale(.96); filter:blur(6px); }

.industry__slide .industry__title,
.industry__slide .industry__lead{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.industry__slide.is-on .industry__title{ opacity:1; transform:none; transition-delay:.1s; }
.industry__slide.is-on .industry__lead { opacity:1; transform:none; transition-delay:.2s; }

@media (prefers-reduced-motion: reduce){
  .industry__slide,
  .industry__slide .industry__title,
  .industry__slide .industry__lead{
    transform:none; filter:none;
    transition:opacity .2s ease, visibility .2s;
  }
  .industry__slide.is-out{ transform:none; filter:none; }
}
.industry__title{
  max-width:470px; margin-top:clamp(30px, 4vw, 70px);
  font-size:clamp(26px, 2.8vw, 48px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
}
.industry__lead{
  margin-top:clamp(16px, 1.8vw, 30px);
  font-size:14px; font-weight:500; line-height:1.55;
  color:var(--text-inv-soft);
}
.industry__side{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(16px, 1.8vw, 30px);
  flex:none;
}
.industry__nav{ display:flex; gap:12px; }
.industry__bar{
  display:flex; gap:11px;
  width:clamp(240px, 29vw, 503px);
}

.industry__seg{
  flex:1; height:5px;
  background:linear-gradient(to right,
    var(--text-inv) 0 var(--fill, 0%),
    rgb(255 255 255 / .3) var(--fill, 0%) 100%);
}

.about{ padding-top:clamp(40px, 5.4vw, 92px); }
.about{
  display:grid;
  grid-template-columns:38.5% minmax(0, 1fr);
  column-gap:clamp(24px, 3vw, 52px);
}
.about__title{ max-width:525px; }
.about__body{ min-width:0; }
.about__lead{
  font-size:15px; font-weight:500; line-height:1.6;
  color:var(--text-body);
}
.figures{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(24px, 3vw, 52px);
  margin-top:clamp(30px, 3.6vw, 62px);
}

.figure dd{ margin-inline-start:0; }
.figure__num{

  font-variant-numeric:tabular-nums;
  font-size:clamp(48px, 5.4vw, 92px);
  font-weight:600; line-height:.9; letter-spacing:-.03em;
  color:var(--text-body);
}
.figure__label{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--tint);
  font-size:clamp(15px, 1.3vw, 20px); font-weight:600; line-height:1.3;
  letter-spacing:-.03em;
  color:var(--text);
}
.figure__note{
  margin-top:12px;
  font-size:13px; font-weight:500; line-height:1.55;
  color:var(--text-mute);
}
.about__shots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(12px, 1.2vw, 20px);
  margin-top:clamp(24px, 3vw, 50px);
}
.about__shots img{
  width:100%; height:auto;
  aspect-ratio:500 / 317;
  object-fit:cover;
}

.adv{
  position:relative;

  overflow:hidden;
  margin-top:clamp(44px, 5.6vw, 96px);

  --adv-dark: linear-gradient(160deg, #1a1f2b 0%, #141824 46%, #10192e 100%);
  background:
    radial-gradient(120% 90% at 8% 104%, rgb(2 99 187 / .55) 0%, rgb(2 99 187 / 0) 62%),
    var(--adv-dark);
  color:var(--text-inv);
}
.adv__stage{
  position:relative;
  padding:clamp(44px, 5vw, 92px) 0 clamp(44px, 5vw, 86px);
}

.adv__seq{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.adv__dim{
  position:absolute; inset:0; z-index:2;
  background:var(--veil);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}
.adv__inner{ position:relative; z-index:1; }
.adv__title{
  max-width:660px;
  font-size:clamp(24px, 2.5vw, 42px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
}
.adv__list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(26px, 3vw, 48px) clamp(24px, 4vw, 70px);
  margin-top:clamp(30px, 3.4vw, 56px);
}
.adv__item{
  padding-top:14px;
  border-top:1px solid rgb(255 255 255 / .35);
}

.adv__num{
  display:block;
  font-size:clamp(15px, 1.15vw, 20px); font-weight:600; line-height:1;
  color:var(--text-inv);
}
.adv__item p{
  margin-top:14px;
  max-width:400px;
  font-size:clamp(16px, 1.25vw, 21px); font-weight:500; line-height:1.45;
  color:var(--text-inv-soft);
}

.adv-after{ position:relative; z-index:1; background:var(--n-000); }

.adv.is-scene + .adv-after{ margin-top:-100vh; }

.adv.is-scene{

  --adv-run:400vh;

  --adv-floor:26;
  height:var(--adv-run);

  z-index:0;
  overflow:visible;
  background:none;
}
.adv.is-scene .adv__stage{
  position:sticky; top:0;
  display:flex; align-items:center;
  height:100vh; padding:0;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 8% 104%, rgb(2 99 187 / .55) 0%, rgb(2 99 187 / 0) 62%),
    var(--adv-dark);
}

.adv.is-scene .adv__inner{ align-self:stretch; }

.adv.is-scene .adv__title{
  position:absolute; left:0; right:0; top:clamp(90px, 9vh, 130px);
  max-width:min(660px, 46vw);
  margin:0;
}

.adv.is-scene .adv__list{
  display:block;
  margin:0;
  position:absolute; inset:0;
}
.adv.is-scene .adv__item{
  position:absolute;
  width:min(30%, 420px);
  top:0;
  opacity:var(--o, 0);
  transform:translate3d(0, var(--y, 60vh), 0);
  will-change:transform, opacity;
}
.adv.is-scene .adv__item--1{ left:0; }
.adv.is-scene .adv__item--2{ left:22%; }
.adv.is-scene .adv__item--3{ left:57%; }
.adv.is-scene .adv__item--4{ right:0; }

.news{ padding-top:clamp(40px, 5.4vw, 92px); }
.news__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px;
  padding-bottom:clamp(24px, 3vw, 50px);
}
.posts--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); border-bottom:0; padding-bottom:0; }

.posts--3 > .post{ padding-bottom:26px; border-bottom:1px solid var(--tint); }

.posts--3 > .post:not(:nth-child(3n+1))::before{
  content:"";
  position:absolute; left:-26px; top:14px; bottom:14px;
  width:1px;
  background:var(--tint);
}

.news.is-armed .post > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s ease var(--in-lag, 0s),
             transform .55s cubic-bezier(.22, .61, .36, 1) var(--in-lag, 0s);
}
.news.is-armed .post.is-in > *{ opacity:1; transform:none; }

.techpart{ padding-top:clamp(40px, 5.4vw, 92px); }
.techpart__grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  column-gap:44px;
  margin-top:clamp(26px, 3vw, 52px);
}

.techpart__grid > li{
  position:relative;
  border-top:1px solid var(--tint);
}
.techpart__grid > li:nth-last-child(-n+5){ border-bottom:1px solid var(--tint); }

.techpart__grid > li:not(:nth-child(5n+1))::before{
  content:"";
  position:absolute; left:-22px; top:14px; bottom:14px;
  width:1px;
  background:var(--tint);
}
.techpart__grid a{
  display:grid; place-items:center;
  min-height:clamp(120px, 12vw, 210px);
  padding:24px 8px;
  transition:opacity .18s ease;
}
.techpart__grid a:hover{ opacity:.6; }

.techpart.is-armed .techpart__grid > li > a{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s ease var(--in-lag, 0s),
             transform .55s cubic-bezier(.22, .61, .36, 1) var(--in-lag, 0s);
}
.techpart.is-armed .techpart__grid > li.is-in > a{ opacity:1; transform:none; }
.techpart__grid img{
  max-width:min(100%, 186px); height:auto;
  object-fit:contain;
}

@media (max-width:1023px){
  .adv.is-scene{ --adv-run:320vh; --adv-floor:32; }
  .adv.is-scene .adv__title{ max-width:none; }
  .adv.is-scene .adv__item{ width:min(80%, 420px); }
  .adv.is-scene .adv__item--2,
  .adv.is-scene .adv__item--4{ left:auto; right:0; }
  .adv.is-scene .adv__item--3{ left:0; }
}

@media (max-width:1279px){
  .solutions,
  .about{ grid-template-columns:minmax(0, 1fr); row-gap:clamp(24px, 3vw, 40px); }
  .solutions__intro .btn-wide{ margin-top:clamp(20px, 3vw, 34px); }
  .solution{ grid-template-columns:180px minmax(0, 1fr) 41px; }
  .cats__row{ column-gap:30px; }
  .cats__row > .cat + .cat::before{ left:-15px; }
  .techpart__grid{ column-gap:30px; }
  .techpart__grid > li + li::before{ left:-15px; }
}

@media (max-width:1023px){
  .usp__grid{ grid-template-columns:minmax(0, 1fr); }
  .usp__card{ min-height:0; }

  .cats__row{
    --cat-slide-gap:20px;
    display:flex;
    column-gap:var(--cat-slide-gap);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .cats__row::-webkit-scrollbar{ display:none; }
  .cats__row > .cat{

    flex:0 0 calc((100% - 2 * var(--cat-slide-gap)) / 2.5);
    scroll-snap-align:start;
  }
  .cats__row > .cat + .cat::before{ left:calc(var(--cat-slide-gap) / -2); }

  .posts--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .posts--3 > .post:not(:nth-child(3n+1))::before{ content:none; }
  .techpart__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .techpart__grid > li + li::before{ display:none; }
  .figures{ gap:26px; }
}

@media (max-width:767px){
  .hero__mark{ display:none; }
  .industry__foot{ flex-direction:column; align-items:stretch; gap:24px; }
  .industry__side{ align-items:flex-start; }
  .industry__bar{ width:100%; }

  .round{ width:36px; height:36px; }
  .round::before{ width:13px; height:7px; }
  .cats__nav{ gap:8px; top:calc(var(--cats-pad) + 18px); }

  .solution{ grid-template-columns:minmax(0, 1fr) 41px; }
  .solution__shot{ grid-column:1 / -1; grid-row:1; margin-bottom:22px; }
  .solution__num,
  .solution__body{ grid-column:1; grid-row:2; }
  .solution__go{ grid-column:2; grid-row:2; }
  .posts--3{ grid-template-columns:minmax(0, 1fr); }

  .adv__list{ grid-template-columns:minmax(0, 1fr); }
  .figures{ grid-template-columns:minmax(0, 1fr); }
  .about__shots{ grid-template-columns:minmax(0, 1fr); }
  .techpart__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .solutions__list,
  .adv__list{ padding-inline-start:0; }

  .solutions__intro .btn-wide,
  .news__head .btn-wide{ width:100%; }

  .techpart__grid img{ max-width:min(50%, 93px); }
  .techpart__grid a{ min-height:clamp(84px, 22vw, 120px); padding:16px 8px; }
}

.sitesearch{
  position:fixed; left:0; right:0; top:var(--topbar-h); z-index:55;
  background:var(--n-000);
  box-shadow:inset 0 1px 0 var(--tint), 0 12px 28px rgb(0 0 0 / .1);
  transform:translateY(-100%);
  opacity:0; visibility:hidden;
  transition:transform .3s ease, opacity .3s ease, visibility .3s;
}
:root.search-on .sitesearch{ transform:none; opacity:1; visibility:visible; }
.sitesearch[hidden]{ display:none; }

.sitesearch__inner{
  position:relative;
  padding:clamp(22px, 2.6vw, 44px) 0 clamp(18px, 2vw, 32px);
}
.sitesearch__form{
  position:relative;
  display:flex; flex-wrap:wrap; gap:12px;
  padding-right:56px;
}
.sitesearch__field{
  flex:1 1 320px; min-width:0;
  height:52px; padding:0 18px;
  border:1px solid var(--tint); border-radius:2px;
  background:var(--surface);
  font-size:clamp(15px, 1.2vw, 18px); font-weight:500; letter-spacing:-.02em;
  color:var(--text);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.sitesearch__field::placeholder{ color:var(--text-mute); font-weight:500; }

.sitesearch__field:hover,
.sitesearch__field:focus{
  outline:none;
  border-color:var(--brand);
  background:var(--n-000);
  box-shadow:0 0 0 1px var(--brand),
             0 0 0 5px rgb(2 99 187 / .14),
             0 4px 18px rgb(2 99 187 / .18);
}

.sitesearch__field::-webkit-search-decoration,
.sitesearch__field::-webkit-search-cancel-button{ -webkit-appearance:none; }
.sitesearch__go{
  flex:none;
  height:52px; padding:0 26px;
  background:var(--brand);
  font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--text-inv);
  cursor:pointer;
  transition:background .18s ease;
}
.sitesearch__go:hover{ background:var(--b-400); }
.sitesearch__hint{
  margin-top:12px; padding-right:56px;
  font-size:12px; font-weight:500; line-height:1.5;
  color:var(--text-mute);
}
.sitesearch__close{
  position:absolute; right:0; top:clamp(22px, 2.6vw, 44px);
  width:44px; height:52px;
  background:none; cursor:pointer;
}
.sitesearch__close::before,
.sitesearch__close::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:17px; height:1px; margin-left:-8.5px;
  background:var(--text);
  transition:background .18s ease;
}
.sitesearch__close::before{ transform:rotate(45deg); }
.sitesearch__close::after { transform:rotate(-45deg); }
.sitesearch__close:hover::before,
.sitesearch__close:hover::after{ background:var(--brand); }

@media (max-width:767px){

  .sitesearch__form{ padding-right:0; }
  .sitesearch__field{ flex:0 1 calc(100% - 52px); }
  .sitesearch__go{ flex:1 1 100%; }
  .sitesearch__hint{ padding-right:0; }
}

.ac{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  display:flex; flex-direction:column;
  background:var(--n-000);
  border-radius:4px;
  box-shadow:0 18px 40px rgba(0,32,66,.18);
  max-height:min(70vh, 520px);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}

.ac__skeleton,
.ac__body,
.ac__empty{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.ac.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.ac[hidden]{ display:none; }

.ac--inline{
  position:static; flex:1 1 100%;
  border-radius:0; box-shadow:none; background:none;
  max-height:min(50vh, 420px);
  opacity:1; visibility:visible; transform:none; transition:none;

  margin-bottom:calc(-1 * clamp(18px, 2vw, 32px));
}

.ac__sk-row{ padding:11px 20px; }
.ac__sk-row span{
  display:block; height:10px; border-radius:2px;
  background:linear-gradient(90deg, var(--tint) 25%, var(--n-050) 37%, var(--tint) 63%);
  background-size:400% 100%;
  animation:ac-shimmer 1.4s ease-in-out infinite;
}
.ac__sk-row span + span{ margin-top:8px; width:60%; }
@keyframes ac-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
@media (prefers-reduced-motion:reduce){
  .ac__sk-row span{ animation:none; }
}

.ac__group + .ac__group{ border-top:1px solid var(--tint); }
.ac__group-title{
  padding:14px 20px 4px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-mute);
}
.ac__list{ padding-bottom:6px; }
.ac__item{
  display:block;
  padding:9px 20px;
  font-size:14px; font-weight:500; line-height:1.4;
  color:var(--text);
  transition:background .15s ease;
}
.ac__item:hover,
.ac__item:focus-visible{ background:var(--surface); }
.ac__item mark{
  background:none; color:var(--brand); font-weight:700;
}

.ac__item--shot{ display:flex; align-items:center; gap:12px; }
.ac__item-img{
  flex:none;
  width:40px; height:40px; padding:5px;
  background:var(--n-050);
  object-fit:contain;
  mix-blend-mode:multiply;
}
.ac__item-title{ min-width:0; }

.ac__empty{
  padding:26px 20px;
  font-size:13px; text-align:center;
  color:var(--text-mute);
}
.ac__empty[hidden],
.ac__body:empty,
.ac__skeleton[hidden]{ display:none; }

.ac__all{
  flex:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:48px; border-top:1px solid var(--tint);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--brand);
  transition:background .15s ease;
}
.ac__all:hover,
.ac__all:focus-visible{ background:var(--surface); }
.ac__all[hidden]{ display:none; }
.ac__all-count{ font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-mute); }

.hero--about{
  min-height:clamp(430px, 33.4vw, 577px);
  padding-bottom:clamp(28px, 2.7vw, 46px);
}

.hero--about .hero__body{

  flex:1;
  margin-left:0; margin-top:clamp(16px, 1.6vw, 26px);
  padding-top:0;
}
.hero__word{

  font-size:clamp(56px, 7.81vw, 135px);

  font-weight:600; line-height:.76; letter-spacing:-.04em;
}
.hero__title--about{ margin-top:clamp(14px, 1.5vw, 26px); }

.hero__foot--about{
  display:flex; justify-content:flex-end;

  margin-top:auto;
}

.hero__cube{
  position:absolute; z-index:0;
  left:49.3%; bottom:0;
  width:clamp(280px, 42vw, 723px); height:auto;
  pointer-events:none;
}

.about--page{ padding-top:clamp(44px, 5.15vw, 89px); }
.about__note{
  max-width:300px;
  font-size:13px; font-weight:500; line-height:1.55;
  color:var(--text-mute);
}
.about__claim{ max-width:940px; }
.about--page .about__lead{ margin-top:clamp(22px, 3.5vw, 60px); }

.creed{
  margin-top:clamp(44px, 5.6vw, 96px);
  padding:clamp(48px, 6vw, 100px) 0 clamp(48px, 6vw, 96px);

  background:var(--tint);
}
.creed__inner{ display:flex; flex-direction:column; align-items:center; }

.creed__mark{
  width:clamp(120px, 11vw, 178px); height:auto;
  mix-blend-mode:multiply;
}
.creed__claim{
  max-width:978px; margin-top:clamp(20px, 2.1vw, 36px);
  font-size:clamp(20px, 2.1vw, 36px);
  font-weight:600; line-height:1.3; letter-spacing:-.03em;
  text-align:center;
}
.values{
  list-style:none;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 1.2vw, 19px);
  width:100%; margin-top:clamp(34px, 4.4vw, 80px);
}
.value{
  display:flex; flex-direction:column;
  min-height:clamp(320px, 27vw, 464px);
  padding:clamp(20px, 2.4vw, 38px);
  background:var(--n-000);
}

.creed.is-armed .value{
  --lag:0s;
  opacity:0;
  transform:translateY(28px) scale(.97);
  transition:opacity .55s ease var(--lag),
             transform .65s cubic-bezier(.22, .61, .36, 1) var(--lag);
}
.creed.is-armed .value:nth-child(2){ --lag:.11s; }
.creed.is-armed .value:nth-child(3){ --lag:.22s; }
.creed.is-armed .value:nth-child(4){ --lag:.33s; }
.creed.is-armed .value.is-in{ opacity:1; transform:none; }

.creed.is-armed .value .usp__icon{
  opacity:0;
  transform:scale(.84);
  transition:opacity .45s ease calc(var(--lag) + .18s),
             transform .55s cubic-bezier(.2, .9, .3, 1.3) calc(var(--lag) + .18s);
}
.creed.is-armed .value.is-in .usp__icon{ opacity:1; transform:none; }

.value{ --usp-icon:clamp(96px, 11vw, 189px); }

.value .usp__icon{
  height:clamp(120px, 11.5vw, 199px);
  margin-bottom:clamp(16px, 2vw, 34px);
}
.value .usp__icon--make{ width:calc(var(--usp-icon) * .645); }
.value .usp__icon--swap{ width:calc(var(--usp-icon) * .82); }
.value .usp__icon--dev { width:calc(var(--usp-icon) * .64); }

.value__title{
  margin-top:clamp(14px, 1.6vw, 26px);
  font-size:clamp(17px, 1.5vw, 24px);
  font-weight:600; line-height:1.25; letter-spacing:-.03em;
}
.value__note{
  margin-top:14px;
  font-size:13px; font-weight:500; line-height:1.55;
  color:var(--text-mute);
}

.faq{
  padding:clamp(56px, 7.6vw, 131px) 0 clamp(48px, 6.7vw, 115px);
  background:var(--tint);
}
.faq__inner{
  display:grid; grid-template-columns:38.5% minmax(0, 1fr);
  column-gap:clamp(24px, 3vw, 52px);
}

.faq__intro{ display:flex; flex-direction:column; align-items:flex-start; }
.faq__ask{ margin-top:auto; background:var(--n-000); }
.faq__ask:hover{ background:var(--surface); }
.faq__intro .block-title{ max-width:600px; }

.faq__list{ min-width:0; }

.faq__item{ border-top:1px solid var(--rail); }
.faq__item:last-child{ border-bottom:1px solid var(--rail); }
.faq__q{
  position:relative;
  display:block;
  padding:clamp(22px, 2.6vw, 36px) 64px clamp(22px, 2.6vw, 36px) clamp(16px, 1.8vw, 31px);
  font-size:clamp(15px, 1.3vw, 20px);
  font-weight:600; line-height:1.3; letter-spacing:-.03em;
  color:var(--text);
  cursor:pointer;
  transition:color .18s ease;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--brand); }
.faq__item[open] > .faq__q{ color:var(--text); }

.faq__sign{
  position:absolute; right:clamp(16px, 1.8vw, 31px); top:50%;
  width:23px; height:23px; margin-top:-11.5px;
  transition:transform .28s cubic-bezier(.22, .61, .36, 1);
}
.faq__item[open] .faq__sign{ transform:rotate(45deg); }
.faq__sign::before,
.faq__sign::after{
  content:"";
  position:absolute; left:50%; top:50%;
  background:var(--text);
  transition:transform .22s ease, opacity .22s ease, background .18s ease;
}
.faq__sign::before{ width:23px; height:2px; margin:-1px 0 0 -11.5px; }
.faq__sign::after { width:2px; height:23px; margin:-11.5px 0 0 -1px; }
.faq__q:hover .faq__sign::before,
.faq__q:hover .faq__sign::after{ background:var(--brand); }
.faq__a{
  padding:0 64px clamp(24px, 2.6vw, 34px) clamp(16px, 1.8vw, 31px);
  font-size:14px; font-weight:500; line-height:1.6;
  color:var(--text-mute);
}
.faq__a p{ max-width:790px; }

.cats__title{
  max-width:1100px; padding-right:130px; text-wrap:balance;

  margin-bottom:clamp(24px, 2.6vw, 44px);
}

@media (max-width:1279px){
  .faq__inner{ grid-template-columns:minmax(0, 1fr); row-gap:clamp(22px, 3vw, 36px); }
  .faq__ask{ margin-top:clamp(22px, 3vw, 36px); }
  .values{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:767px){
  .hero__cube{ opacity:.35; right:-40px; }
  .about__note{ max-width:none; margin-bottom:22px; }
  .values{ grid-template-columns:minmax(0, 1fr); }
  .value{ min-height:0; }
  .value{ --usp-icon:clamp(96px, 26vw, 132px); }
  .faq__ask{ width:100%; }
  .faq__q{ padding-right:44px; }
  .faq__a{ padding-right:0; }
  .cats__title{ padding-right:0; }
}

.hero__title--about{
  max-width:444px;
  font-size:20px; font-weight:600; line-height:26px; letter-spacing:0;
  color:var(--text-inv-cap);
}
.aboutpage .block-title{ font-size:clamp(26px, 2.78vw, 48px); }
.about--page .about__note{

  position:sticky;
  top:calc(var(--stick-h) + clamp(20px, 2.4vw, 40px));
  align-self:start;
  font-size:15px; font-weight:600; line-height:26px;
  color:var(--text-mute);
}
/* Ступени размера заметки — выбираются в админке. Стоят после правила
   страницы «О компании»: у него та же вескость, и решает порядок. */
.about__note.about__note--md{ font-size:16px; line-height:1.6; }
.about__note.about__note--lg{ font-size:18px; line-height:1.5; }
.about__note.about__note--xl{ font-size:21px; line-height:1.4; }
@media (max-width:767px){

  .about--page .about__note{ position:static; }
}
.about--page .about__lead{
  font-size:15px; font-weight:600; line-height:26px;
  color:var(--text-mute);
}
.about--page .figure__num{ line-height:52px; }
.about--page .figure__label{
  font-size:24px; font-weight:600; line-height:32px;
  color:var(--text-body);
}
.about--page .figure__note{
  font-size:14px; font-weight:600; line-height:19px;
  color:var(--text-mute);
}
.creed__claim{ color:var(--text); }
.value__title{ font-size:20px; font-weight:600; line-height:26px; color:var(--text); }
.value__note{ font-size:15px; font-weight:500; line-height:26px; color:var(--text); }
.about--page .figures{ margin-top:clamp(30px, 4.98vw, 86px); }
.about--page .figure__label{ margin-top:58px; padding-top:20px; }
.about--page .figure__note{ margin-top:2px; }
.about--page .about__shots{ margin-top:clamp(24px, 2.66vw, 46px); }
.aboutpage .industry{ margin-top:0; }
.aboutpage .news{ padding-top:clamp(56px, 6.5vw, 113px); }
.aboutpage .industry__eyebrow{
  font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-.03em;
}

.article{ padding-top:var(--topbar-h); }

.article__grid{
  --col-art:17.4%;

  --art-measure:954px;
  display:grid;
  grid-template-columns:var(--col-art) minmax(0, 1fr) 322px;
  column-gap:clamp(20px, 2.6vw, 44px);
  align-items:start;
  padding-top:clamp(30px, 4.4vw, 76px);
}
.article__head,
.author,
.article__body{ grid-column:2 / 4; min-width:0; }

.article__body{ grid-column:2 / 3; }

.article__back{
  grid-column:1 / 2; grid-row:1 / 4;
  position:sticky; top:calc(var(--stick-h) + 24px);
  justify-self:start; align-self:start;
  width:50px; height:50px;
  margin-top:clamp(30px, 4vw, 68px);
}
.article__date{
  font-size:clamp(15px, 1.3vw, 20px); font-weight:500;
  color:var(--text-mute);
}
.article__title{
  max-width:1330px; margin-top:clamp(16px, 1.8vw, 30px);
  font-size:clamp(28px, 3.3vw, 56px);

  font-weight:600; line-height:1.2; letter-spacing:-.03em;
}

.article__tags{ margin-top:clamp(24px, 3.4vw, 59px); padding-top:0; }

.article__note{
  margin-top:clamp(16px, 1.45vw, 25px);
  padding:clamp(20px, 2vw, 34px) 0;
  border-top:1px solid var(--tint);
  border-bottom:1px solid var(--tint);
}
.article__lead{
  max-width:1184px;
  font-size:clamp(15px, 1.16vw, 20px);
  font-weight:600; font-style:italic; line-height:1.6;
  color:var(--text);
}
.article__lead a{ color:var(--link); text-decoration:underline; }
.article__lead a:hover{ color:var(--b-400); }

.author{

  --face-w:clamp(150px, 17.6vw, 304px);
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(320px, 42vw, 721px);
  margin-top:clamp(32px, 4vw, 69px);
  padding:clamp(24px, 3vw, 52px);
  overflow:hidden;
  color:var(--text-inv);
  background:linear-gradient(196.7deg, #001353 28.464%, #0049a6 82.079%);
}

.author__pixels{
  position:absolute; left:0; top:0; z-index:0;
  width:100%; height:100%;
  background:url("assets/art-pixels.svg") no-repeat left top / auto 100%;
  opacity:.85;
  pointer-events:none;
}
.author__logo{
  position:relative; z-index:1;
  align-self:flex-start;
  width:clamp(110px, 12vw, 208px); height:auto;
  margin-bottom:auto;
}
.author__body{
  position:relative; z-index:1;
  max-width:min(560px, 100% - var(--face-w) - 24px);
}
.author__name{
  font-size:clamp(28px, 3.2vw, 54px);
  font-weight:600; line-height:1.1; letter-spacing:-.03em;
}
.author__role{
  max-width:534px; margin-top:clamp(14px, 1.6vw, 26px);
  font-size:clamp(13px, 1.05vw, 15px); font-weight:500; line-height:1.55;
  color:var(--text-inv-soft);
}
.author__face{
  position:absolute; right:clamp(20px, 2.4vw, 42px); bottom:clamp(20px, 2.6vw, 44px);
  z-index:1;
  width:var(--face-w); height:auto;
  aspect-ratio:304 / 416;
  object-fit:cover;
}

.article__body{ margin-top:clamp(12px, 0.9vw, 15px); }

.article__body .article__kicker{
  margin-top:clamp(12px, 0.9vw, 15px);
  font-size:12px; font-weight:500; line-height:1.4; letter-spacing:-.02em;
  color:var(--text-mute);
}

.article__body > .article__kicker:first-child{ margin-top:0; }
.article__h2{
  margin-top:clamp(34px, 6vw, 104px);
  font-size:clamp(22px, 2.2vw, 36px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
}

.article__body > p{
  margin-top:clamp(16px, 2vw, 35px);
  max-width:900px;
  font-size:14px; font-weight:500; line-height:1.65;
  color:var(--text-body);
}
.article__list{
  list-style:none;
  margin-top:clamp(18px, 2.3vw, 39px);
  max-width:1126px;
  font-size:14px; font-weight:500; line-height:1.75;
  color:var(--text-body);
}
.article__list li{ position:relative; padding-left:18px; }
.article__list li::before{
  content:"";
  position:absolute; left:0; top:.75em;
  width:5px; height:5px;
  background:var(--brand);
}
.article__list a{ color:var(--link); text-decoration:underline; }
.article__list a:hover{ color:var(--b-400); }

.toc{
  position:sticky; top:calc(var(--stick-h) + 24px);
  align-self:start;
  grid-column:3 / 4;
  margin-top:clamp(34px, 7.4vw, 127px);
}

.toc__list{
  list-style:none;
  position:relative;
  padding-left:31px;
}
.toc__list::before{
  content:"";
  position:absolute; left:1px; top:9px; bottom:0;
  width:1px;
  background:var(--tint);
}
.toc__link{
  position:relative;
  display:block;
  font-size:13px; font-weight:600; line-height:2.8;
  color:var(--text-mute);
  transition:color .18s ease;
}

.toc__link::before{
  content:"";
  position:absolute; left:-31px; top:50%;
  width:2px; height:18px; margin-top:-9px;
  background:var(--brand);
  opacity:0;
  transition:opacity .18s ease;
}
.toc__link:hover{ color:var(--brand); }
.toc__link.is-here{ color:var(--brand); }
.toc__link.is-here::before{ opacity:1; }

.article__products{ max-width:var(--art-measure, 954px); }

.shots{
  list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  max-width:var(--art-measure, 954px);
  margin-top:clamp(14px, 1.4vw, 21px);
}
.shots__item{ position:relative; }

.shots__open{
  display:block;
  width:100%; padding:0;
  border:0; background:none;
  cursor:zoom-in;
}
.shots__open:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.shots__item img,
.shots__item video{
  display:block;
  width:100%; height:auto; aspect-ratio:472 / 361;
  object-fit:cover;
  background:var(--surface);
}
.shots__play{
  position:absolute; left:50%; top:50%;
  width:71px; height:71px; margin:-35.5px 0 0 -35.5px;
  background:var(--n-000);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  opacity:.9;
  pointer-events:none;
}

.article__table{
  max-width:var(--art-measure, 954px);
  margin-top:clamp(22px, 3.5vw, 60px);
  overflow-x:auto;
}
.reg-table{
  width:100%; min-width:620px;
  border-collapse:separate; border-spacing:11px 0;
  margin-inline:-11px;
  table-layout:fixed;
  text-align:left;
}
.reg-table th,
.reg-table td{
  padding:12px 0 20px;
  border-bottom:1px solid var(--tint);
  vertical-align:top;
}
.reg-table thead th{
  padding-top:0;
  font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-mute);
}
.reg-table tbody th,
.reg-table tbody td{
  font-size:14px; font-weight:500; line-height:1.4;
  color:var(--text);
}
.reg-table tbody th{ font-weight:500; }
.reg-table col:first-child{ width:47.1%; }
.reg-table th:nth-child(2),
.reg-table td:nth-child(2){ width:35.1%; }
.reg-table th:nth-child(3),
.reg-table td:nth-child(3){ width:17.8%; }

.prose-table{ max-width:900px; margin-top:clamp(22px, 2.2vw, 36px); overflow-x:auto; }
.prose-table table{ width:100%; border-collapse:collapse; text-align:left; }
.prose-table caption{
  margin-bottom:8px; text-align:left;
  font-size:13px; font-weight:600; color:var(--text-mute);
}
.prose-table th,
.prose-table td{
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--tint);
  vertical-align:top;
  font-size:14px; font-weight:500; line-height:1.4;
  color:var(--text);
}
.prose-table thead th{
  font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-mute);
}

.article__also{
  padding-top:clamp(36px, 6.6vw, 114px);
  padding-bottom:clamp(40px, 6.5vw, 112px);
  align-items:start;
}
.also{ grid-column:2 / 3; max-width:950px; min-width:0; }
.also__title{
  font-size:clamp(22px, 2.2vw, 36px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
}
.also__list{ list-style:none; margin-top:clamp(18px, 1.8vw, 31px); }
.also__item{
  display:grid; grid-template-columns:minmax(0, 438px) minmax(0, 1fr);
  column-gap:clamp(20px, 2.6vw, 42px);
  align-items:start;
  padding:clamp(18px, 2vw, 26px) 0 clamp(22px, 2.6vw, 38px);
  border-top:1px solid var(--tint);
}
.also__item:last-child{ border-bottom:1px solid var(--tint); }
.also__item .post__shot{ aspect-ratio:var(--shot-ar, 438 / 275); }
.also__item .post__body{ min-width:0; }
.also__item .post__date{ margin-top:0; }

@media (max-width:1279px){
  .article__grid{ grid-template-columns:minmax(0, 1fr); }
  .article__head,
  .author,
  .article__body,
  .also{ grid-column:1 / -1; }

  .article__back{
    position:static;
    grid-column:1 / -1; grid-row:auto;
    margin-top:0;
  }

  .toc{
    position:static;
    grid-column:1 / -1; grid-row:3;
    margin-top:clamp(24px, 3vw, 38px);
    padding:18px 0;
    border-top:1px solid var(--tint); border-bottom:1px solid var(--tint);
  }
  .toc__list{ display:flex; flex-wrap:wrap; gap:6px 22px; padding-left:0; }
  .toc__list::before{ content:none; }
  .toc__link{ line-height:1.6; }
  .toc__link::before{ content:none; }
}

@media (max-width:767px){
  .author{
    --face-w:min(38vw, 200px);
    min-height:0;
    padding-bottom:calc(var(--face-w) * 1.368 + 40px);
  }
  .author__face{ right:clamp(16px, 4vw, 24px); bottom:20px; }

  .author__body{ max-width:none; margin-top:clamp(20px, 6vw, 34px); }
  .shots{ grid-template-columns:minmax(0, 1fr); }
  .also__item{ grid-template-columns:minmax(0, 1fr); row-gap:16px; }
}

@media (max-width:767px){
  .field input,
  .sitesearch__field,
  .hero__search input,
  .city__input{ font-size:16px; }
}

.solpage{ padding:clamp(24px, 2vw, 32px) 0 clamp(40px, 4.6vw, 80px); }

.solview{ padding:clamp(24px, 2vw, 32px) 0 0; }
.solview > .shell{ padding-bottom:clamp(40px, 4.6vw, 80px); }
/* Последнему блоку сказали «без отступа снизу» — значит и колонка страницы
   не должна оставлять под ним своего поля: у полосы во всю ширину оно
   читается как белая полоска между ней и тем, что идёт ниже. */
.solview > .shell--flush,
.textpage--flush{ padding-bottom:0; }
.solview > .shell > *:first-child{ margin-top:0; }
/* Та же белая полоска, но сверху: если первый блок страницы — плита во всю
   ширину, поле колонки отрезает её от шапки. Плиты помечены data-bleed, по
   нему их и находим. Уровней три, потому что блок оборачивают по обстановке:
   .anchorpoint — когда он пункт якорной панели, .bsp — когда ему задан свой
   отступ; бывает ни одной обёртки, одна или обе. */
.solview:has(> .shell > [data-bleed]:first-child),
.solview:has(> .shell > :first-child > [data-bleed]:first-child),
.solview:has(> .shell > :first-child > :first-child > [data-bleed]:first-child){ padding-top:0; }
.solbands{
  list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 1.5vw, 25px);
}

.solband__link{
  position:relative;
  display:grid; grid-template-columns:minmax(0, 1fr);
  align-content:end;
  row-gap:calc(clamp(4px, 0.5vw, 8px) + 30px);
  column-gap:clamp(20px, 2.6vw, 44px);

  height:clamp(353px, 26vw, 454px);
  padding:clamp(28px, 3.4vw, 60px) clamp(24px, 4vw, 70px)
          clamp(28px, 3.4vw, 60px) clamp(24px, 3vw, 52px);
  overflow:hidden;
  color:var(--text-inv);
  background:linear-gradient(189.6deg, var(--hero-a) 28.464%, var(--hero-b) 82.079%);
}

.solband__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.26;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .35s ease;
}
.solband__link:hover .solband__video,
.solband__link:focus-visible .solband__video{ opacity:.45; }

.solband__link::after{
  content:"";
  position:absolute; inset:0;
  opacity:0;
  background:
    radial-gradient(90% 130% at 86% 12%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(70% 110% at 18% 112%, rgba(23,199,178,.28) 0%, rgba(23,199,178,0) 62%);
  transition:opacity .3s ease;
  pointer-events:none;
}
.solband__link:hover::after,
.solband__link:focus-visible::after{ opacity:1; }
.solband__link:focus-visible{ outline:2px solid var(--n-000); outline-offset:-6px; }

.solband__title,
.solband__note{ position:relative; z-index:1; }
.solband__title{
  max-width:520px;
  font-size:clamp(22px, 2.32vw, 40px);
  font-weight:500; line-height:1.2; letter-spacing:-.02em;
  transition:transform .3s cubic-bezier(.22, .61, .36, 1);
}
.solband__link:hover .solband__title,
.solband__link:focus-visible .solband__title{ transform:translateY(-6px); }
.solband__note{
  max-width:501px;
  font-size:clamp(14px, 1.05vw, 18px);
  font-weight:600; line-height:1.55;
  color:var(--b-100);
}

@media (max-width:767px){

  .solbands{ grid-template-columns:minmax(0, 1fr); }
}

@media (prefers-reduced-motion:reduce){
  .solband__title{ transition:none; }
  .solband__link:hover .solband__title,
  .solband__link:focus-visible .solband__title{ transform:none; }
}

.drawer{

  --sheet-w:min(100% - 92px, 1036px);
  position:fixed; inset:0;
  width:100%; max-width:none; height:100%; max-height:none;
  margin:0; padding:0; border:0;
  background:none;
  overflow:hidden;
}
.drawer:not([open]){ display:none; }
.drawer::backdrop{
  background:rgb(10 11 26 / .86);
  opacity:0;
  transition:opacity .32s ease;
}
.drawer.is-open::backdrop{ opacity:1; }

.drawer__sheet{
  position:absolute; right:0; top:0;
  display:flex; flex-direction:column;
  width:var(--sheet-w); height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--n-000);
  color:var(--text);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22, .61, .36, 1);

  scrollbar-width:thin;
  scrollbar-color:var(--n-400) transparent;
}
.drawer.is-open .drawer__sheet{ transform:none; }
.drawer__sheet::-webkit-scrollbar{ width:4px; }
.drawer__sheet::-webkit-scrollbar-thumb{ background:var(--n-400); border-radius:2px; }

.drawer__body{
  width:min(100% - 40px, 604px);
  margin-inline:auto;
  padding:clamp(28px, 3.6vw, 56px) 0 clamp(36px, 4vw, 64px);
}

.drawer__close{
  position:absolute; top:21px; right:calc(var(--sheet-w) + 24px);
  z-index:1;
  width:44px; height:44px;
  background:none; border:0;
  cursor:pointer;
}
.drawer__close::before,
.drawer__close::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:22px; height:2px; margin:-1px 0 0 -11px;
  background:var(--n-000);
  transition:background .18s ease;
}
.drawer__close::before{ transform:rotate(45deg); }
.drawer__close::after { transform:rotate(-45deg); }
.drawer__close:hover::before,
.drawer__close:hover::after{ background:var(--b-200); }

.drawer__title{
  font-size:clamp(24px, 2.08vw, 36px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
  color:var(--text-body);
}
.drawer__title sup{ font-size:.645em; top:-.1em; }

.drawer__lead{

  max-width:587px;
  margin-top:clamp(18px, 1.9vw, 33px);
  font-size:clamp(13px, 0.81vw, 14px); font-weight:600; line-height:1.4;
  letter-spacing:-.03em;
  color:var(--text-mute);
}
/* сноска под формой в окне входа — тот же текст, но мельче и с воздухом */
.drawer__lead--note{ margin-top:22px; font-size:13px; }


.drawer__lead + .pform{ margin-top:clamp(28px, 3.5vw, 61px); }

.drawer__done[hidden]{ display:none; }
.drawer.is-done .drawer__body{
  width:min(100% - 40px, 635px);
  margin-block:auto;
}
.drawer__done .drawer__lead{ max-width:420px; }

.specialist{
  display:grid; grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  column-gap:clamp(16px, 1.7vw, 29px);
  margin-top:clamp(28px, 3.4vw, 59px);
  padding:clamp(12px, 1vw, 17px) clamp(12px, 0.9vw, 15px);
  background:var(--n-050);
}
.specialist__face{
  width:clamp(52px, 3.7vw, 64px); height:auto;
  border-radius:50%;
}
.specialist__name{
  font-size:clamp(16px, 1.05vw, 18px); font-weight:600; line-height:26px;
  color:var(--text-body);
}
.specialist__role{
  font-size:clamp(13px, 0.81vw, 14px); font-weight:500; line-height:18px;
  color:var(--text-mute);
}
.specialist__phone{
  margin-top:9px;
  font-size:clamp(15px, 0.93vw, 16px); font-weight:600; line-height:18px;
  color:var(--text);
}
.specialist__phone a{ transition:color .18s ease; }
.specialist__phone a:hover{ color:var(--link); }

.specialist__close{
  grid-column:1 / -1;
  margin-top:clamp(16px, 1.6vw, 28px);
  background:var(--brand); color:var(--text-inv);
}
.specialist__close:hover{ background:var(--b-400); }

@media (prefers-reduced-motion:reduce){
  .drawer__sheet{ transition:none; }
  .drawer::backdrop{ transition:none; }
}

@media (max-width:1023px){
  .drawer{ --sheet-w:100%; }
  .drawer__close{ top:8px; right:8px; }
  .drawer__close::before,
  .drawer__close::after{ background:var(--text); }
  .drawer__close:hover::before,
  .drawer__close:hover::after{ background:var(--brand); }
  .drawer__body{ padding-top:clamp(46px, 8vw, 64px); }
}

.pform{ margin-top:clamp(30px, 3.9vw, 67px); }

.pform > * + *{ margin-top:clamp(20px, 2vw, 33px); }
.pform > input[type="hidden"] + *{ margin-top:0; }

.pform > .pform__row + .pfield{ margin-top:clamp(26px, 2.3vw, 40px); }
.pform > .pform__hint{ margin-top:13px; }
.pform > .orgcard{ margin-top:clamp(22px, 2.1vw, 36px); }
.pform > .orgcard + *{ margin-top:clamp(28px, 2.9vw, 50px); }
.pform > .pgroup{ margin-top:clamp(30px, 3.1vw, 53px); }
.pform > .pgroup + .pgroup{ margin-top:clamp(24px, 2.3vw, 39px); }
.pform > .pform__go{ margin-top:clamp(32px, 2.9vw, 49px); }

.pform > .pform__attach + .pform__go{ margin-top:clamp(20px, 1.7vw, 29px); }
.pform > .check{ margin-top:19px; }

.pfield{ position:relative; }
.pfield input{
  width:100%;
  height:33px; padding:0 0 12px;
  border:0; border-bottom:2px solid var(--rail);
  background:none;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:500; letter-spacing:-.03em;
  color:var(--text);
  transition:border-color .18s ease;
}

.pfield > label{
  position:absolute; left:0; top:0;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:500; line-height:21px;
  letter-spacing:-.03em;
  color:var(--text-mute);
  pointer-events:none;
  transition:transform .18s ease, font-size .18s ease, color .18s ease, opacity .18s ease;
}

.pfield input:focus ~ label,
.pfield input:not(:placeholder-shown) ~ label,
.pfield__area:focus ~ label,
.pfield__area:not(:placeholder-shown) ~ label,
.pfield select:focus ~ label,
.pfield select:valid ~ label,
.pfield:focus-within > label,
.pfield.is-filled > label{
  transform:translateY(-21px);
  font-size:12px; font-weight:600;
  color:var(--text-mute);
}

.pfield:has(.bsel):focus-within > label,
.pfield:has(.bsel.is-empty) > label{
  transform:none;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:500;
}

.pfield:has(.bsel:not(.is-empty)) > label{
  transform:none;
  opacity:0;
  pointer-events:none;
}

@media (max-width:767px){
  .pfield input:focus ~ label,
  .pfield input:not(:placeholder-shown) ~ label,
  .pfield__area:focus ~ label,
  .pfield__area:not(:placeholder-shown) ~ label,
  .pfield select:focus ~ label,
  .pfield select:valid ~ label,
  .pfield:focus-within > label,
  .pfield.is-filled > label{
    transform:none;
    font-size:clamp(14px, 0.93vw, 16px); font-weight:500;
    opacity:0;
  }
}

.pfield input::placeholder,
.pfield__area::placeholder{ color:transparent; }

.pfield select option{ padding-left:12px; }
.pfield input:hover{ border-bottom-color:var(--n-450); }
.pfield input:focus{ outline:none; border-bottom-color:var(--brand); }
.pfield.has-error input{ border-bottom-color:var(--a-danger); }
.pfield__error{
  position:absolute; left:0; top:100%;
  margin-top:4px;
  font-size:12px; color:var(--a-danger);
  opacity:0; transition:opacity .18s ease;
}
.pfield.has-error .pfield__error{ opacity:1; }

.pform__row{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 1.2vw, 16px);
}

.pfield--tagged input{ padding-right:78px; }
.pfield__tag{
  position:absolute; right:0; top:-5px;
  padding:5px 9px;
  border-radius:2px;
  background:var(--n-100);
  font-size:clamp(12px, 0.81vw, 14px); font-weight:500; letter-spacing:-.03em;
  color:var(--text-mute);
  pointer-events:none;
}
.pfield--icon input{ padding-right:32px; }
.pfield__icon{
  position:absolute; right:0; top:0;
  width:20px; height:20px;
  background:url("assets/icon-planet.svg") no-repeat center / contain;
  pointer-events:none;
}
.pform__hint{
  font-size:12px; font-weight:500; line-height:1.35; letter-spacing:-.03em;
  color:var(--text-mute);
}

.ac--sugg{ top:calc(100% + 6px); max-height:min(52vh, 340px); }
.ac--sugg .ac__list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 0; }
.ac__item--org{ width:100%; text-align:left; }
.ac__item--org .ac__item-title{ display:block; font-weight:600; }
.ac__item-note{
  display:block; margin-top:2px;
  font-size:12px; font-weight:500; line-height:1.35;
  color:var(--text-mute);
}

.orgcard{
  padding:clamp(12px, 0.81vw, 14px) clamp(16px, 1.45vw, 25px) clamp(14px, 1.04vw, 18px);
  border-radius:2px;
  background:var(--a-warm);
}
.orgcard[hidden]{ display:none; }
.orgcard__row + .orgcard__row{ margin-top:clamp(10px, 0.7vw, 12px); }
.orgcard__label{
  display:block;
  font-size:12px; font-weight:500; line-height:19px; letter-spacing:-.03em;
  color:var(--text-mute);
}
.orgcard__value{
  display:block; margin-top:3px;
  font-size:14px; font-weight:600; line-height:19px; letter-spacing:-.03em;
  color:var(--text-body);
}

.pfield__area{
  display:block;
  width:100%; height:33px; padding:0 0 12px;
  border:0; border-bottom:2px solid var(--rail);
  background:none;
  overflow:hidden; resize:none;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:500; line-height:21px;
  letter-spacing:-.03em;
  color:var(--text);
  transition:border-color .18s ease;
}

.pfield select{
  width:100%;
  height:33px; padding:0 26px 12px 0;
  border:0; border-bottom:2px solid var(--rail);
  background:none;
  -webkit-appearance:none; appearance:none;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:500; letter-spacing:-.03em;
  color:var(--text);
  cursor:pointer;
  transition:border-color .18s ease;
}
.pfield select:invalid{ color:transparent; }
.pfield select:hover{ border-bottom-color:var(--n-450); }
.pfield select:focus{ outline:none; border-bottom-color:var(--brand); }
.pfield__caret{
  position:absolute; right:0; top:6px;
  width:12px; height:7px;
  background:var(--text-mute);
  -webkit-mask:var(--caret-mask) no-repeat center / contain;
          mask:var(--caret-mask) no-repeat center / contain;
  pointer-events:none;
}
.pfield__area:hover{ border-bottom-color:var(--n-450); }
.pfield__area:focus{ outline:none; border-bottom-color:var(--brand); }

.drop{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px, 1.1vw, 19px);
  min-height:clamp(96px, 7.1vw, 123px);
  padding:18px clamp(16px, 1.4vw, 24px);
  border:2px dashed var(--n-400);
  border-radius:9px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.drop:hover,
.drop.is-over{ border-color:var(--brand); background:var(--surface); }

.drop.has-ants{ border-color:transparent; }
.drop__ants{
  position:absolute; inset:1px;
  width:calc(100% - 2px); height:calc(100% - 2px);
  overflow:visible;
  color:var(--n-400);
  pointer-events:none;
  transition:color .2s ease;
}
.drop:hover .drop__ants,
.drop.is-over .drop__ants{ color:var(--brand); }
.drop__ants rect{
  fill:none;
  stroke:currentColor; stroke-width:2;
  stroke-dasharray:11 9;
}

@keyframes byte-drop-ants{ to{ stroke-dashoffset:-20; } }
.drop:hover .drop__ants rect{ animation:byte-drop-ants 1.1s linear infinite; }
.drop.is-over .drop__ants rect{ animation:byte-drop-ants .55s linear infinite; }

@media (prefers-reduced-motion: reduce){
  .drop:hover .drop__ants rect,
  .drop.is-over .drop__ants rect{ animation:none; }
}
.drop input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;
}
.drop input:focus-visible + .drop__body{ outline:2px solid var(--brand); outline-offset:6px; }
.drop__body{ display:flex; align-items:center; gap:clamp(12px, 1.1vw, 19px); }

.drop__icon{
  flex:none;
  width:clamp(40px, 3.5vw, 60px); height:clamp(40px, 3.5vw, 60px);
  background:var(--n-400);

  -webkit-mask-image:var(--upload-cloud-mask), var(--upload-arrow-mask);
          mask-image:var(--upload-cloud-mask), var(--upload-arrow-mask);
  -webkit-mask-repeat:no-repeat, no-repeat;
          mask-repeat:no-repeat, no-repeat;
  -webkit-mask-size:contain, contain;
          mask-size:contain, contain;
  -webkit-mask-position:center, center;
          mask-position:center, center;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  transition:background .2s ease;
}
.drop:hover .drop__icon,
.drop.is-over .drop__icon{ background:var(--brand); }

@keyframes byte-drop-arrow{
  0%{
    -webkit-mask-position:center, center calc(50% + 1px);
            mask-position:center, center calc(50% + 1px);
  }
  45%{
    -webkit-mask-position:center, center calc(50% - 11px);
            mask-position:center, center calc(50% - 11px);
  }
  62%{
    -webkit-mask-position:center, center calc(50% - 11px);
            mask-position:center, center calc(50% - 11px);
  }
  100%{
    -webkit-mask-position:center, center calc(50% + 1px);
            mask-position:center, center calc(50% + 1px);
  }
}
@keyframes byte-drop-cloud{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-3px) scale(1.03); }
}
.drop:hover .drop__icon{
  animation:byte-drop-cloud 2.4s ease-in-out infinite,
            byte-drop-arrow 1.5s cubic-bezier(.4, 0, .3, 1) infinite;
}

.drop.is-over .drop__icon{
  animation:byte-drop-cloud 1.2s ease-in-out infinite,
            byte-drop-arrow .8s cubic-bezier(.4, 0, .3, 1) infinite;
}

@media (prefers-reduced-motion: reduce){
  .drop:hover .drop__icon,
  .drop.is-over .drop__icon{ animation:none; }
}
.drop__title{
  display:block;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:600; letter-spacing:-.03em;
  color:var(--text-body);
}
.drop__note{
  display:block;
  margin-top:6px;
  font-size:12px; font-weight:500; line-height:1.35; letter-spacing:-.03em;
  color:var(--text-mute);
}

.bsel{ position:relative; }
.bsel__native{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;
}
.bsel__button{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:46px; padding:0 0 10px;
  border:0; border-bottom:1px solid var(--rail);
  background:none;
  font-size:clamp(13px, 0.93vw, 16px); font-weight:600; letter-spacing:-.03em;
  color:var(--text-body); text-align:left;
  cursor:pointer;
  transition:border-color .18s ease;
}

.pfield:has(.pfield__caret) .bsel__button::after{ display:none; }
.bsel__button::after{
  content:"";

  margin-left:auto;
  flex:none; width:8px; height:4px;
  background:currentColor;
  -webkit-mask:var(--caret-mask) no-repeat center / contain;
          mask:var(--caret-mask) no-repeat center / contain;
  transition:transform .18s ease;
}
.bsel.is-open .bsel__button{ border-color:var(--brand); }
.bsel.is-open .bsel__button::after{ transform:rotate(180deg); }

.pfield__caret{ transition:transform .18s ease; }
.pfield:has(.bsel.is-open) .pfield__caret{ transform:rotate(180deg); }
.bsel.is-empty .bsel__button{ color:var(--text-mute); font-weight:500; }

.bsel__list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  max-height:280px; overflow-y:auto; overscroll-behavior:contain;
  margin:0;

  padding:8px 0;
  list-style:none;
  border:1px solid var(--tint); border-radius:4px;
  background:var(--n-000);
  box-shadow:0 18px 40px rgb(0 0 0 / .12);
}
.bsel__item{
  padding:10px 18px;
  font-size:clamp(13px, 0.93vw, 15px); font-weight:500; line-height:1.35;
  color:var(--text-mute);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.bsel__item:hover,
.bsel__item:focus-visible,
.bsel__item.is-picked{
  outline:none;
  background:var(--surface);
  color:var(--text);
}

.centers .bsel__button{
  min-height:46px;
  padding:0 16px 0 19px;
  border:1px solid #e5e5e5;
  border-radius:9px;
  background:#f6f9fb;
  font-size:15px; font-weight:600; line-height:26px; letter-spacing:-.01em;
  color:var(--n-900);
  transition:border-color .18s ease, background .18s ease;
}

.centers .bsel.is-empty .bsel__button{ color:var(--n-900); font-weight:600; }
.centers .bsel__button:hover{ border-color:#c9d3dc; }
.centers .bsel.is-open .bsel__button{ border-color:var(--brand); }

.centers .bsel__button::after{
  display:block;
  width:12px; height:7px;
  background:var(--n-900);
  --caret-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.35 7.11' fill='none'%3E%3Cpath d='M0.66 0.75L6.35 5.75L11.66 0.75' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.centers .bsel__list{ border-radius:9px; border-color:#e5e5e5; }
.centers .bsel__item{ padding:8px 19px; font-size:15px; }

.centers .bsel{ margin-bottom:10px; }
.centers .bsel__native{ max-width:448px; }
.centers .bsel__button{ max-width:448px; }

.pform__attach .codedropz-upload-wrapper{ margin:0; }
.pform__attach .codedropz-upload-container{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(96px, 7.1vw, 123px);
  padding:18px clamp(16px, 1.4vw, 24px);
  border:2px dashed var(--n-400);
  border-radius:9px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.pform__attach .codedropz-upload-container:hover,
.pform__attach .codedropz-upload-wrapper.dnd-upload-active .codedropz-upload-container{
  border-color:var(--brand); background:var(--surface);
}
.pform__attach .codedropz-upload-inner{
  display:grid;

  grid-template-columns:auto auto;
  justify-content:center;
  align-items:center;
  width:max-content; max-width:100%;
  margin:0 auto;
  gap:2px clamp(12px, 1.1vw, 19px);
  text-align:left;
}

.pform__attach .codedropz-upload-inner::before{
  content:"";
  grid-column:1; grid-row:1 / 3;
  flex:none;
  width:clamp(40px, 3.5vw, 60px); height:clamp(40px, 3.5vw, 60px);
  background:var(--n-400);
  -webkit-mask-image:var(--upload-cloud-mask), var(--upload-arrow-mask);
          mask-image:var(--upload-cloud-mask), var(--upload-arrow-mask);
  -webkit-mask-repeat:no-repeat, no-repeat;
          mask-repeat:no-repeat, no-repeat;
  -webkit-mask-size:contain, contain;
          mask-size:contain, contain;
  -webkit-mask-position:center, center;
          mask-position:center, center;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  transition:background .2s ease;
}
.pform__attach .codedropz-upload-container:hover .codedropz-upload-inner::before{ background:var(--brand); }

.pform__attach .codedropz-upload-container:hover .codedropz-upload-inner::before{
  animation:byte-drop-cloud 2.4s ease-in-out infinite,
            byte-drop-arrow 1.5s cubic-bezier(.4, 0, .3, 1) infinite;
}
.pform__attach .codedropz-upload-wrapper.dnd-upload-active .codedropz-upload-inner::before{
  animation:byte-drop-cloud 1.2s ease-in-out infinite,
            byte-drop-arrow .8s cubic-bezier(.4, 0, .3, 1) infinite;
}
@media (prefers-reduced-motion: reduce){
  .pform__attach .codedropz-upload-container:hover .codedropz-upload-inner::before,
  .pform__attach .codedropz-upload-wrapper.dnd-upload-active .codedropz-upload-inner::before{ animation:none; }
}

.pform__attach .codedropz-upload-inner{ justify-self:center; align-self:center; }
.pform__attach .codedropz-upload-handler{ width:100%; }

.pform__attach .codedropz-upload-container{ cursor:pointer; }

.pform__attach{ --up-track:#d5dde7; --up-fill:#0d6ec9; }
.pform__attach .dnd-upload-status .dnd-upload-image{ display:none; }
.pform__attach .dnd-upload-status{
  display:block;
  margin:17px 0 0;
  padding:0;
  border:0;
  position:relative;
}
.pform__attach .dnd-upload-status .dnd-upload-details{
  display:block; position:relative;
  width:100%; padding:0; min-width:0;
}
.pform__attach .dnd-upload-status .dnd-upload-details .name{
  display:block; padding:0 28px 0 0;
  font-size:12px; font-weight:600; line-height:26px;
  color:var(--n-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pform__attach .dnd-upload-status .dnd-upload-details .name span{
  padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.pform__attach .dnd-upload-status .dnd-upload-details .name em{
  font-style:normal; font-weight:600; color:inherit;
}
.pform__attach .dnd-upload-status .dnd-upload-details .name em::before{ content:" "; }
.pform__attach .dnd-upload-status .dnd-upload-details .dnd-progress-bar{
  display:block; height:4px; margin-top:7px;
  border-radius:99px;
  background:var(--up-track);
  overflow:hidden;
}
.pform__attach .dnd-upload-status .dnd-upload-details .dnd-progress-bar span{
  display:block; height:100%; padding:0;
  border-radius:99px;
  background:var(--up-fill);
  font-size:0;
  line-height:0;
  transition:width .2s ease;
}

.pform__attach .dnd-upload-status .dnd-upload-details .remove-file{
  position:absolute; right:0; top:4px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--up-track);
  transition:background .18s ease;
}
.pform__attach .dnd-upload-status .dnd-upload-details .dnd-icon-remove{
  position:relative; display:block; width:100%; height:100%;
}
.pform__attach .dnd-upload-status .dnd-upload-details .dnd-icon-remove::before,
.pform__attach .dnd-upload-status .dnd-upload-details .dnd-icon-remove::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:11.3px; height:1px; margin:-.5px 0 0 -5.65px;
  background:var(--n-000);
  background-image:none;
}
.pform__attach .dnd-upload-status .dnd-upload-details .dnd-icon-remove::before{ transform:rotate(45deg); }
.pform__attach .dnd-upload-status .dnd-upload-details .dnd-icon-remove::after{ transform:rotate(-45deg); }
.pform__attach .dnd-upload-status .dnd-upload-details .remove-file:hover{ background:var(--up-fill); }

.pform__attach .dnd-upload-status .dnd-upload-details span.has-error{
  display:block; margin-top:2px;
  font-size:12px; font-weight:500; line-height:1.35;
  color:var(--a-danger);
}
.pform__attach .codedropz-upload-inner h3{
  margin:0;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:600; letter-spacing:-.03em;
  color:var(--text-body);
}

.pform__attach .codedropz-upload-inner > span{ display:none; }

.pform__attach .codedropz-btn-wrap{ grid-column:2; grid-row:2; margin:0; }
.pform__attach .codedropz-upload-inner h3{ grid-column:2; grid-row:1; }
.pform__attach .cd-upload-btn{
  font-size:12px; font-weight:500; letter-spacing:-.03em;
  color:var(--text-mute); text-decoration:underline;
}
.pform__attach .cd-upload-btn:hover{ color:var(--brand); }

.pform__attach .dnd-upload-counter{
  display:block; margin-top:8px;
  font-size:12px; font-weight:500; color:var(--text-mute);
}
.pform__attach-note{
  margin:8px 0 0;
  font-size:12px; font-weight:500; line-height:1.35; letter-spacing:-.03em;
  color:var(--text-mute);
}

.pform__attach .codedropz-upload-container.has-ants{ border-color:transparent; }

.pform__attach .codedropz-upload-container:hover .drop__ants,
.pform__attach .codedropz-upload-wrapper.dnd-upload-active .drop__ants{ color:var(--brand); }
.pform__attach .codedropz-upload-container:hover .drop__ants rect{
  animation:byte-drop-ants 1.1s linear infinite;
}
.pform__attach .codedropz-upload-wrapper.dnd-upload-active .drop__ants rect{
  animation:byte-drop-ants .55s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .pform__attach .codedropz-upload-container:hover .drop__ants rect,
  .pform__attach .codedropz-upload-wrapper.dnd-upload-active .drop__ants rect{ animation:none; }
}
.pform__attach .codedropz-upload-handler,
.pform__attach .codedropz-upload-wrapper > .codedropz-upload-handler{
  border:0; padding:0; background:none;
}

.drop__list{
  margin-top:12px;
  font-size:12px; font-weight:500; line-height:1.6;
  color:var(--text-mute);
}
.drop__list[hidden]{ display:none; }
.drop__list li{ display:flex; gap:8px; }
.drop__list b{ font-weight:600; color:var(--text-body); }

.pgroup{ margin:0; padding:0; border:0; min-width:0; }
.pgroup__title{
  display:block; padding:0;
  font-size:clamp(14px, 0.93vw, 16px); font-weight:600; letter-spacing:-.03em;
  color:var(--text-body);
}
.pgroup__grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 16px;
  margin-top:clamp(12px, 1.04vw, 18px);
}
.pcheck{ position:relative; cursor:pointer; }
.pcheck input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;
}
.pcheck__plate{
  display:flex; align-items:center; gap:16px;
  min-height:57px; padding:12px 16px;
  border-radius:2px;
  background:var(--surface);
  font-size:clamp(13px, 0.93vw, 16px); font-weight:600; letter-spacing:-.03em;
  color:var(--text-body);
  transition:background .18s ease;
}
.pcheck__box{
  position:relative;
  flex:none; width:22px; height:22px;
  border-radius:2px;
  background:var(--n-000);
  transition:background .18s ease;
}
.pcheck__box::before{
  content:"";
  position:absolute; inset:6px;
  border-radius:1px;
  background:var(--n-000);
  opacity:0; transition:opacity .15s ease;
}
.pcheck:hover .pcheck__plate{ background:var(--tint); }
.pcheck input:checked + .pcheck__plate{ background:var(--tint); }
.pcheck input:checked + .pcheck__plate .pcheck__box{ background:var(--brand); }
.pcheck input:checked + .pcheck__plate .pcheck__box::before{ opacity:1; }
.pcheck input:focus-visible + .pcheck__plate{ outline:2px solid var(--brand); outline-offset:2px; }

.pgroup .wpcf7-form-control-wrap{ display:block; }
.wpcf7 form .pgroup .wpcf7-list-item{ margin:0; }
.pgroup .wpcf7-list-item label{
  display:flex; align-items:center; gap:16px;
  min-height:57px; padding:12px 16px;
  border-radius:2px;
  background:var(--surface);
  font-size:clamp(13px, 0.93vw, 16px); font-weight:600; letter-spacing:-.03em;
  color:var(--text-body);
  cursor:pointer;
  transition:background .18s ease;
}
.pgroup .wpcf7-list-item label:hover{ background:var(--tint); }
.pgroup .wpcf7-list-item:has(input:checked) label{ background:var(--tint); }
.pgroup .wpcf7-list-item input[type="checkbox"]{
  flex:none;
  width:22px; height:22px; margin:0;
  -webkit-appearance:none; appearance:none;
  border:0; border-radius:2px;
  background:var(--n-000);
  cursor:pointer;
  transition:background .18s ease;
}
.pgroup .wpcf7-list-item input[type="checkbox"]::before{
  content:"";
  display:block; margin:6px;
  width:10px; height:10px; border-radius:1px;
  background:var(--n-000);
  opacity:0; transition:opacity .15s ease;
}
.pgroup .wpcf7-list-item input[type="checkbox"]:checked{ background:var(--brand); }
.pgroup .wpcf7-list-item input[type="checkbox"]:checked::before{ opacity:1; }
.pgroup .wpcf7-list-item input[type="checkbox"]:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

.pform__go{ background:var(--brand); color:var(--text-inv); }
.pform__go:hover{ background:var(--b-400); }

.check--light .check__box{ border-color:var(--rail); }
.check--light .check__box img{ filter:invert(1); }
.check--light input:checked + .check__box{ background:var(--brand); border-color:var(--brand); }
.check--light input:checked + .check__box img{ filter:none; }
.check--light input:focus-visible + .check__box{ outline-color:var(--brand); }
.check--light .check__text{ color:rgb(0 0 0 / .39); }
.check--light .check__text a{ color:inherit; }
.check--light .check__text a:hover{ color:var(--link); }
.check--light .wpcf7-acceptance input[type="checkbox"]{ border-color:var(--rail); }
.check--light .wpcf7-acceptance input[type="checkbox"]::before{ background:var(--n-000); }
.check--light .wpcf7-acceptance input[type="checkbox"]:checked{ background:var(--brand); border-color:var(--brand); }
.check--light .wpcf7-acceptance input[type="checkbox"]:focus-visible{ outline-color:var(--brand); }
.check--light .wpcf7-list-item-label{ color:rgb(0 0 0 / .39); }
.check--light .wpcf7-list-item-label a{ color:inherit; }
.check--light .wpcf7-list-item-label a:hover{ color:var(--link); }

@media (max-width:599px){
  .pform__row{ grid-template-columns:minmax(0, 1fr); }
  .pgroup__grid{ grid-template-columns:minmax(0, 1fr); }
}

.pagenav{
  position:fixed; left:clamp(14px, 1.4vw, 24px); bottom:clamp(14px, 1.4vw, 24px);
  z-index:70;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--b-950);
  box-shadow:0 8px 24px rgb(0 20 46 / .28);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.pagenav:hover{ background:var(--brand); transform:translateY(-2px); }

.pagenav__icon,
.pagenav__icon::before,
.pagenav__icon::after{
  display:block;
  width:18px; height:2px;
  border-radius:1px;
  background:var(--n-000);
}
.pagenav__icon{ position:relative; }
.pagenav__icon::before,
.pagenav__icon::after{
  content:"";
  position:absolute; left:0;
}
.pagenav__icon::before{ top:-6px; }
.pagenav__icon::after { top:6px; }

:root.has-cookie .pagenav{ bottom:calc(clamp(14px, 1.4vw, 24px) + 62px); }

.drawer--left{ --sheet-w:min(100% - 92px, 380px); }
.drawer--left .drawer__sheet{
  right:auto; left:0;
  transform:translateX(-100%);
}
.drawer--left.is-open .drawer__sheet{ transform:none; }
.drawer--left .drawer__close{
  right:auto; left:calc(var(--sheet-w) + 24px);
}
.drawer--left .drawer__body{
  width:min(100% - 40px, 300px);
  padding-top:clamp(24px, 2.6vw, 40px);
}

.pagelist{ list-style:none; margin-top:clamp(20px, 2.2vw, 34px); }
.pagelist li + li{ margin-top:2px; }
.pagelist a{
  display:block;
  padding:11px 14px;
  border-radius:2px;
  font-size:14px; font-weight:500; line-height:1.35; letter-spacing:-.02em;
  color:var(--text-body);
  transition:background .15s ease, color .15s ease;
}
.pagelist a:hover{ background:var(--surface); color:var(--link); }
.pagelist a[aria-current="page"]{
  background:var(--tint);
  font-weight:600; color:var(--text);
}
.pagelist__file{
  display:block; margin-top:2px;
  font-size:11px; font-weight:500; letter-spacing:0;
  color:var(--text-mute);
}
.pagenav__note{
  margin-top:clamp(20px, 2.2vw, 32px);
  padding-top:16px;
  border-top:1px solid var(--tint);
  font-size:12px; font-weight:500; line-height:1.45;
  color:var(--text-mute);
}

@media (max-width:1023px){
  .drawer--left{ --sheet-w:min(100%, 320px); }
  .drawer--left .drawer__close{ left:auto; right:8px; }
}

.industry--bleed{
  margin-left:var(--bleed-ml, calc(50% - var(--vw, 100vw) / 2));
  margin-right:var(--bleed-mr, calc(50% - var(--vw, 100vw) / 2));
}

.faq--bleed{
  margin-left:var(--bleed-ml, calc(50% - var(--vw, 100vw) / 2));
  margin-right:var(--bleed-mr, calc(50% - var(--vw, 100vw) / 2));
}

.pfield .wpcf7-form-control-wrap,
.form .wpcf7-form-control-wrap{ display:block; }
.pform .wpcf7-spinner{ display:none; }

.pfield .wpcf7-not-valid-tip{
  position:absolute; left:0; top:100%;
  margin-top:4px;
  font-size:12px; color:var(--a-danger);
}
.pfield:has(.wpcf7-not-valid) input,
.pfield:has(.wpcf7-not-valid) select,
.pfield .wpcf7-not-valid{ border-bottom-color:var(--a-danger); }

.wpcf7 form.pform .wpcf7-response-output,
.wpcf7 form.form .wpcf7-response-output{
  margin:14px 0 0; padding:0; border:0;
  font-size:13px; font-weight:500;
}

.wpcf7 form.pform.invalid .wpcf7-response-output,
.wpcf7 form.form.invalid .wpcf7-response-output{ color:var(--a-danger); }

.drop .wpcf7-form-control-wrap{ position:static; }

[data-geo]{ transition:opacity .18s ease; }
:root.geo-loading [data-geo]{ opacity:.45; }

.wpc-filters-open-button-container,
.wpc-widget-close-container,
.wpc-spinner{ display:none !important; }

.wpc-filters-main-wrap,
.wpc-filters-widget-content,
.wpc-filters-widget-containers-wrapper,
.wpc-filters-scroll-container{ display:block; }

.wpc-filters-widget-wrapper{ margin:0; padding:0; border:0; }
.wpc-filters-section + .wpc-filters-section{ margin-top:clamp(22px, 2.2vw, 34px); }

.wpc-filters-widget-top-container{ display:none; }
.wpc-filters-widget-top-container{ margin-bottom:clamp(18px, 1.7vw, 28px); }

.wpc-filter-header{ margin:0; }
.wpc-filter-title,
.wpc-filters-widget-wrapper .widget-title{
  display:inline-flex; align-items:center; gap:9px;
  margin:0;
  font-size:15px; font-weight:600; line-height:32px;
  color:var(--text);
}

.wpc-filter-content{ margin-top:6px; }
.wpc-filters-ul-list{ list-style:none; margin:0; padding:0; }
.wpc-term-item-content-wrapper{
  position:relative;
  display:flex; align-items:center; gap:11px;
  line-height:32px;
}

.wpc-term-item-content-wrapper input[type="checkbox"]{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden;
}
.wpc-term-item-content-wrapper label{
  position:relative;
  padding-left:31px;
}
.wpc-term-item-content-wrapper label::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:20px; height:20px;
  border-radius:2px;
  background:var(--tint);
  transition:background .18s ease;
}
.wpc-term-item-content-wrapper label::after{
  content:"";
  position:absolute; left:6px; top:50%; transform:translate(0, -50%);
  width:8px; height:8px;
  border-radius:1px;
  background:var(--n-000);
  opacity:0; transition:opacity .15s ease;
}
.wpc-term-item-content-wrapper:hover label::before{ background:var(--n-400); }
.wpc-term-item-content-wrapper input[type="checkbox"]:checked ~ label::before{ background:var(--brand); }
.wpc-term-item-content-wrapper input[type="checkbox"]:checked ~ label::after{ opacity:1; }
.wpc-term-item-content-wrapper input[type="checkbox"]:focus-visible ~ label::before{ outline:2px solid var(--brand); outline-offset:3px; }

.wpc-term-item-content-wrapper label{
  display:flex; align-items:center; gap:6px;
  flex:1; min-width:0;
  cursor:pointer;
}
.wpc-filter-link{
  font-size:14px; font-weight:500;
  color:var(--text);
  text-decoration:none;
}
.wpc-term-count{ font-size:13px; color:var(--text-mute); }
.wpc-term-count-brackets-open,
.wpc-term-count-brackets-close{ display:none; }

.wpc-filters-widget-controls-container{ display:none; }

.wpc-filter-chips-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.wpc-filter-chips-list.wpc-empty-chips-container{ display:none; }

body .chips .wpc-filter-chips-list li.wpc-filter-chip{ margin:0; padding:0; }
body .chips .wpc-filter-chips-list li.wpc-filter-chip a{
  display:inline-flex; align-items:center;
  height:auto; padding:0;
  border:0 !important; outline:0; border-radius:2px;
  color:inherit;
}

.wpc-chip-content{
  display:inline-flex; align-items:center; gap:10px;
  height:36px !important; padding:0 12px; border:0;
  border-radius:2px;
  background:var(--tint);
  font-size:14px; font-weight:500; line-height:1;
  color:var(--text);
  cursor:pointer;
  transition:background .18s ease;
}
.wpc-chip-content:hover{ background:var(--n-400); }

.wpc-filter-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; margin-right:0 !important; }

.wpc-chip-remove-icon{
  display:inline-flex !important; align-items:center; justify-content:center;
  position:relative;
  width:21px; height:21px !important; max-height:none !important; flex:none;
  border-radius:50%;
  background:var(--n-000);
  font-size:0 !important; color:transparent;
  transition:background .18s ease;
}
.wpc-chip-remove-icon::before,
.wpc-chip-remove-icon::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:11px; height:1px; margin:0 0 0 -5.5px;
  background:var(--text);
  transition:background .18s ease;
}
.wpc-chip-remove-icon::before{ transform:rotate(45deg); }
.wpc-chip-remove-icon::after{ transform:rotate(-45deg); }

.wpc-chip-remove-icon:hover,
.wpc-filter-chips-list a:hover .wpc-chip-remove-icon{ background:var(--a-red) !important; }
.wpc-chip-remove-icon:hover::before,
.wpc-chip-remove-icon:hover::after,
.wpc-filter-chips-list a:hover .wpc-chip-remove-icon::before,
.wpc-filter-chips-list a:hover .wpc-chip-remove-icon::after{ background:var(--n-000); }

.wpc-chip-reset-all{ display:none; }

.wpc-filters-section{ position:relative; }
/* Значок подсказки. По умолчанию его нет: пустой кружок с вопросом обещает
   объяснение, которого не существует. Он появляется только у тех фильтров,
   для которых подсказка написана — список ниже. */
.wpc-filter-title::after{
  content:"?";
  display:none; align-items:center; justify-content:center;
  width:18px; height:18px; flex:none;
  border:1px solid var(--n-400); border-radius:50%;
  font-size:11px; font-weight:600; line-height:1;
  color:var(--text-mute);
  cursor:help;
}
.wpc-filter-title::before{
  content:attr(data-hint);
  position:absolute; z-index:5;
  left:0; bottom:calc(100% + 6px);
  width:240px;
  box-sizing:border-box;
  display:none;
  padding:12px 14px;
  border-radius:4px;
  background:var(--n-000);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  font-size:11px; font-weight:500; line-height:1.55;
  color:var(--text-mute);
  white-space:normal;
  word-wrap:break-word; overflow-wrap:break-word;
}
.wpc-filter-title:hover::before{ display:block; }
/* Подсказки к фильтрам. Ключ — класс с именем атрибута, а не номер фильтра:
   номер меняется, если фильтр пересоздать, имя атрибута остаётся. Каждому
   фильтру — две строки: сам текст и разрешение показать значок. */
.wpc-filter-pa_protsessor .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_protsessor .wpc-filter-title::before{ content:"Основной вычислительный узел компьютера — от его модели зависят скорость работы и энергопотребление"; }

.wpc-filter-pa_operativnaya-pamyat .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_operativnaya-pamyat .wpc-filter-title::before{ content:"Энергозависимая память, в которой система держит данные запущенных программ. Поколение задаёт частоту и пропускную способность"; }

.wpc-filter-pa_chipset .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_chipset .wpc-filter-title::before{ content:"Набор микросхем системной платы, который связывает процессор с памятью, накопителями и портами"; }

.wpc-filter-pa_forma-faktor .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_forma-faktor .wpc-filter-title::before{ content:"Стандартизированный набор физических размеров, формы и других технических параметров устройства или его компонента"; }

.wpc-filter-pa_diagonal .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_diagonal .wpc-filter-title::before{ content:"Размер экрана по диагонали в дюймах. От него зависят рабочая площадь и комфортное расстояние до монитора"; }

.wpc-filter-pa_razreshenie-ekrana .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_razreshenie-ekrana .wpc-filter-title::before{ content:"Число точек по горизонтали и вертикали: чем их больше, тем мельче детали и тем больше помещается на экране"; }

.wpc-filter-pa_regulirovka-po-vysote .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_regulirovka-po-vysote .wpc-filter-title::before{ content:"Подставка позволяет поднять и опустить экран, чтобы его верхний край оказался на уровне глаз"; }

.wpc-filter-pa_portretnyy-rezhim .wpc-filter-title::after{ display:inline-flex; }
.wpc-filter-pa_portretnyy-rezhim .wpc-filter-title::before{ content:"Экран можно повернуть вертикально — так удобнее работать с документами, кодом и длинными таблицами"; }

.pdir{ }

.pdir__screen{
  display:flex; flex-direction:column;

  height:calc(100svh - var(--topbar-h));
}

.pdir__grid{ flex:1; min-height:0; grid-template-rows:minmax(0, 1fr); }
.pdir__head{ padding:clamp(10px, 0.9vw, 15px) 0 clamp(10px, 0.9vw, 16px); }
.pdir__title{
  font-size:clamp(20px, 1.4vw, 24px);
  font-weight:700; line-height:26px; letter-spacing:-.02em;
  color:var(--text);
}
.pdir__title sup{ font-size:.6em; top:-.45em; }

.pdir__grid{
  display:grid; grid-template-columns:40.1% minmax(0, 1fr);
  align-items:stretch;
}

.pdir__panel{
  display:grid; grid-template-columns:146px minmax(0, 1fr);
  column-gap:clamp(20px, 2.7vw, 47px);
  height:100%;

  padding:clamp(14px, 1.2vw, 20px) clamp(8px, 0.6vw, 10px) clamp(16px, 1.8vw, 30px) 0;
  border-top:1px solid var(--tint);
  border-right:1px solid var(--tint);
}

.pdir__panel > *{ min-height:0; }

.citylist__label{
  font-size:10px; font-weight:700; line-height:26px; letter-spacing:.02em;
  color:var(--text-mute);
}
.citylist ul{ list-style:none; margin-top:clamp(20px, 2.1vw, 36px); }
.citylist__item{
  display:block; width:100%;
  text-align:left;
  font-size:13px; font-weight:600; line-height:2.2; letter-spacing:-.02em;
  color:var(--text-mute);
  transition:color .18s ease;
}
.citylist__item:hover{ color:var(--brand); }
.citylist__item.is-current{ color:var(--text); }

.pdir__col{ display:flex; flex-direction:column; min-width:0; }

.psearch{
  position:relative;
  display:flex; align-items:center;
  max-width:448px; height:46px;
  border:1px solid var(--rail); border-radius:9px;
  transition:border-color .18s ease;
}
.psearch:hover{ border-color:var(--n-450); }
.psearch__field{
  flex:1; min-width:0;
  height:100%; padding:0 8px 0 19px;
  border:0; background:none;
  font-size:15px; font-weight:600; letter-spacing:-.02em;
  color:var(--text);
}
.psearch__field::placeholder{ color:var(--text); font-weight:600; }
.psearch__field::-webkit-search-decoration,
.psearch__field::-webkit-search-cancel-button{ -webkit-appearance:none; }
.psearch:focus-within{ border-color:var(--brand); }
.psearch__field:focus{ outline:none; }
.psearch__go{
  display:grid; place-items:center;
  width:46px; height:100%; flex:none;
  background:none; cursor:pointer;
}
.psearch__go img{ width:16px; }
.psearch__hint{
  max-width:448px; margin-top:5px;
  font-size:11px; font-weight:600; line-height:1.8; letter-spacing:-.02em;
  color:var(--text-mute);
}

.pcards{
  list-style:none;
  flex:1; min-height:0;
  margin-top:clamp(18px, 1.7vw, 29px);

  padding-right:clamp(12px, 1.2vw, 21px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--n-400) transparent;
}
.pcards::-webkit-scrollbar{ width:3px; }
.pcards::-webkit-scrollbar-thumb{ background:var(--n-400); border-radius:2px; }
.pcards > li + li{ margin-top:clamp(8px, 0.8vw, 13px); }

.pcard{
  display:grid; grid-template-columns:119px minmax(0, 1fr);
  align-items:center;
  column-gap:clamp(12px, 1.1vw, 19px);
  min-height:148px;
  padding:clamp(10px, 0.8vw, 14px) clamp(10px, 0.9vw, 15px) clamp(9px, 0.7vw, 12px);
  border:1px solid var(--tint); border-radius:9px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pcard{ cursor:pointer; }
/* партнёр без логотипа: текст занимает всю карточку, а не жмётся в колонку,
   оставленную под знак */
.pcard--nologo{ grid-template-columns:minmax(0, 1fr); }
.pcard:hover{ border-color:var(--rail); box-shadow:0 6px 18px rgb(0 32 66 / .06); }
.pcard:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

.pcard.is-active{ border-color:var(--brand); background:var(--n-050); }
.pcard__logo{
  display:grid; place-items:center;
  width:119px; height:119px;
  background:var(--n-050); border-radius:6px;
}
.pcard__logo img{ max-width:78%; max-height:60%; object-fit:contain; }
.pcard__body{ min-width:0; }
.pcard__name{
  font-size:15px; font-weight:700; line-height:26px; letter-spacing:-.02em;
  color:var(--text);
}
.pcard__addr{
  font-size:13px; font-weight:600; line-height:1.8; letter-spacing:-.02em;
  color:var(--text-mute);
}
.pcard__phones{
  margin-top:2px;
  font-size:14px; font-weight:600; line-height:1.8; letter-spacing:-.02em;
  color:var(--text-body);
}
.pcard__phones a{ transition:color .18s ease; }
.pcard__mail{
  font-size:13px; font-weight:600; line-height:1.8; letter-spacing:-.02em;
  color:var(--text-body);
}
.pcard__site{
  display:flex; align-items:center; gap:8px;
  margin-top:5px;
  font-size:13px; font-weight:600; line-height:1.2; letter-spacing:-.02em;
  color:var(--text-body);
}
.pcard__phones a:hover,
.pcard__mail a:hover,
.pcard__site a:hover{ color:var(--link); }
.pcard__globe{
  flex:none; width:12px; height:12px;
  background:url("assets/icon-planet.svg") no-repeat center / contain;
}

.pdir__map{
  position:relative;
  border-top:1px solid var(--tint);
  background:var(--n-050);
  overflow:hidden;
}
.pdir__frame{
  display:block;
  width:100%; height:100%;
  border:0;
}

@media (max-width:1555px){
  .pdir__grid{ grid-template-columns:48% minmax(0, 1fr); }
  .pdir__panel{
    grid-template-columns:minmax(0, 1fr);
    row-gap:clamp(14px, 1.8vw, 22px);
  }
  .citylist ul{
    display:flex; flex-wrap:wrap; gap:4px 18px;
    margin-top:8px;
  }
  .citylist__item{ width:auto; line-height:1.9; }
  .psearch,
  .psearch__hint{ max-width:none; }
}

@media (max-width:1023px){

  .pdir__screen{ height:auto; }
  .pdir__grid{ grid-template-columns:minmax(0, 1fr); }
  .pdir__panel{
    height:auto;
    border-right:0;
    padding-inline:0;
  }
  .pcards{ overflow:visible; padding-right:0; }
  .pdir__map{ height:clamp(320px, 52vw, 520px); border-top:1px solid var(--tint); }
}

@media (max-width:767px){
  .pcard{ grid-template-columns:minmax(0, 1fr); row-gap:14px; }
  .pcard__logo{ width:100%; height:96px; }
}

.pmark{
  position:relative;
  display:grid; place-items:center;
  width:53px; height:53px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 9px 4px rgb(0 0 0 / .1);
  cursor:pointer;
  transition:transform .18s ease;
}
.pmark::after{
  content:"";
  position:absolute; left:50%; top:100%;
  width:2px; height:11px; margin-left:-1px;
  background:#fff;
}
.pmark:hover,
.pmark.is-lit,
.pmark.is-active{ transform:translateY(-3px); }
.pmark.is-active{ box-shadow:0 9px 4px rgb(0 0 0 / .1), 0 0 0 3px var(--brand); }
.pmark img{ max-width:86%; max-height:74%; object-fit:contain; }

.pballoon{
  min-width:210px; max-width:280px;
  padding:2px 0;
  font-size:13px; line-height:1.45; letter-spacing:-.02em;
  color:var(--text-body);
}
.pballoon__logo{ margin:0 0 10px; }
.pballoon__logo img{ max-width:120px; max-height:34px; object-fit:contain; }
.pballoon__name{
  margin:0 0 6px;
  font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.03em;
  color:var(--n-900);
}
.pballoon__addr{ margin:0 0 8px; color:var(--text-mute); }
.pballoon__phones,
.pballoon__mail,
.pballoon__site{ margin:0 0 4px; }
.pballoon a{ color:var(--brand); text-decoration:none; }
.pballoon a:hover{ text-decoration:underline; }
.pballoon__site [class*="globe"]{ display:none; }

[class*="-balloon__layout"]{ border-radius:12px; }
[class*="-balloon__content"]{
  padding:16px 18px;
  font-family:var(--font);
  border-radius:12px;
}
[class*="-balloon__close-button"]{ opacity:.5; }
[class*="-balloon__close"]:hover [class*="-balloon__close-button"]{ opacity:1; }

.pcards__empty{
  padding:26px 0;
  font-size:13px; font-weight:500;
  color:var(--text-mute);
}
.pcards__empty[hidden]{ display:none; }
.pcard[hidden]{ display:none; }

.drawer__body--centers{ width:min(100% - 40px, 972px); }
.centers{
  display:grid; grid-template-columns:42% minmax(0, 1fr);
  column-gap:clamp(20px, 2.7vw, 40px);
  margin-top:clamp(18px, 2vw, 28px);
  height:calc(100vh - 220px);
}
.centers__col{ display:flex; flex-direction:column; min-height:0; }
.centers .pcards{ margin-top:clamp(14px, 1.4vw, 22px); padding-right:clamp(8px, 0.8vw, 14px); }
.centers__map{
  position:relative;
  height:100%;
  border-radius:12px;
  background:var(--n-050);
  overflow:hidden;
}
.centers__map .pdir__frame{ display:block; width:100%; height:100%; border:0; }

.ccard{
  display:block;
  padding:clamp(14px, 1.2vw, 18px);
  border:1px solid var(--tint); border-radius:9px;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.ccard:hover{ border-color:var(--rail); box-shadow:0 6px 18px rgb(0 32 66 / .06); }
.ccard:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.ccard.is-active{ border-color:var(--brand); background:var(--n-050); }
.ccard__name{
  font-size:15px; font-weight:700; line-height:26px; letter-spacing:-.02em;
  color:var(--text);
}
.ccard__addr{
  font-size:13px; font-weight:600; line-height:1.8; letter-spacing:-.02em;
  color:var(--text-mute);
}
.ccard__phones{
  margin-top:2px;
  font-size:14px; font-weight:600; line-height:1.8; letter-spacing:-.02em;
  color:var(--text-body);
}
.ccard__mail{
  font-size:13px; font-weight:600; line-height:1.8; letter-spacing:-.02em;
  color:var(--text-body);
}
.ccard__site{
  display:flex; align-items:center; gap:8px;
  margin-top:5px;
  font-size:13px; font-weight:600; line-height:1.2; letter-spacing:-.02em;
  color:var(--text-body);
}
.ccard__phones a,
.ccard__mail a,
.ccard__site a{ transition:color .18s ease; }
.ccard__phones a:hover,
.ccard__mail a:hover,
.ccard__site a:hover{ color:var(--link); }
.ccard__globe{
  flex:none; width:12px; height:12px;
  background:url("assets/icon-planet.svg") no-repeat center / contain;
}
.ccard[hidden]{ display:none; }

@media (max-width:1023px){
  .centers{ grid-template-columns:minmax(0, 1fr); height:auto; }
  .centers__map{ height:clamp(280px, 60vw, 420px); }
}

@media (max-width:767px){
  .centers{ display:flex; flex-direction:column; }
  .centers__col{ display:contents; }
  .centers__map{ order:1; margin-top:clamp(14px, 4vw, 22px); }
  .centers .pcards,
  .centers .pcards__empty{ order:2; padding-right:0; }
}

.contacts{ padding-top:var(--topbar-h); }
.contacts__head{ padding:clamp(14px, 1.6vw, 28px) 0 clamp(48px, 7.9vw, 137px); }
.contacts__title{
  font-size:clamp(32px, 3.7vw, 64px);
  font-weight:600; line-height:1; letter-spacing:-.03em;
  color:var(--text-body);
}

.contacts__grid{
  display:grid; grid-template-columns:minmax(0, 19.1%) minmax(0, 1fr);
  align-items:start;
  padding-bottom:clamp(40px, 5vw, 86px);
}

.ctabs{
  display:flex; flex-direction:column; align-items:flex-start;
  position:sticky; top:calc(var(--topbar-h) + 16px); align-self:start;
}
.ctabs__tab{
  font-size:15px; font-weight:600; line-height:2.6; letter-spacing:-.02em;
  color:var(--n-600);
  transition:color .18s ease;
}
.ctabs__tab:hover{ color:var(--brand); }
.ctabs__tab.is-current{ color:var(--brand); }

.cblock{
  padding:clamp(10px, 0.7vw, 12px) 0 clamp(20px, 2.2vw, 38px);
  border-top:1px solid var(--tint);
}
.cblock__label{
  font-size:15px; font-weight:600; line-height:26px; letter-spacing:-.02em;
  color:var(--n-600);
}

.cblock__row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  align-items:center;
  column-gap:clamp(20px, 2.8vw, 48px);
  margin-top:clamp(6px, 0.7vw, 12px);
}
.cblock__phone{
  font-size:clamp(26px, 2.3vw, 40px);
  font-weight:600; line-height:1.25; letter-spacing:-.03em;
  color:var(--text-body);
}
/* номеров может быть несколько — каждый со своей строки */
.cblock__phone a{ display:block; transition:color .18s ease; }
.cblock__phone a + a{ margin-top:2px; }
.cblock__phone a:hover{ color:var(--link); }
.cblock__mail{
  font-size:15px; font-weight:600; line-height:26px; letter-spacing:-.02em;
  color:var(--link);
}
/* адресов может быть несколько — каждый со своей строки, как у телефонов */
.cblock__mail a{ display:block; }
.cblock__mail a + a{ margin-top:2px; }
.cblock__mail a:hover{ color:var(--b-400); }

.cblock__go{
  flex:none;
  width:174px; height:40px; gap:12px;
  padding:0 14px;
  justify-content:flex-start;
  background:var(--brand); color:var(--text-inv);
  transition:background .18s ease;
}
.cblock__go:hover{ background:var(--b-400); }
.cblock__go img{ width:22px; flex:none; }
.cblock__addr{
  margin-top:clamp(8px, 0.9vw, 14px);
  font-size:15px; font-weight:600; line-height:21px; letter-spacing:-.02em;
  color:var(--n-600);
}

.cblock__map{
  margin-top:clamp(20px, 2.4vw, 40px);
  aspect-ratio:1361 / 499;
  overflow:hidden;
  background:var(--n-050);
}
.cblock__frame{
  display:block;
  width:100%; height:100%;
  border:0;
}

@media (max-width:1023px){

  .contacts__grid{ grid-template-columns:minmax(0, 1fr); row-gap:clamp(14px, 2vw, 22px); }

  .ctabs{ flex-direction:row; gap:24px; position:static; }
  .cblock__map{ aspect-ratio:16 / 10; }
}

@media (max-width:767px){

  .cblock__row{
    grid-template-columns:minmax(0, 1fr);
    row-gap:12px;
    justify-items:stretch;
  }

  .cblock__go{ width:100%; justify-content:center; }
}

.hero--warranty{ min-height:clamp(438px, 40.6vw, 577px); padding-bottom:36px; }
.hero--warranty .hero__body{ padding-top:clamp(20px, 2vw, 35px); }

.hero__title--warranty{ max-width:951px; line-height:1.2; }

.hero__foot--warranty{
  display:grid; grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:clamp(20px, 2.4vw, 40px);
}
.hotline{ display:flex; align-items:center; gap:clamp(14px, 1.4vw, 19px); }
.hotline__face{
  flex:none;
  width:clamp(46px, 3.4vw, 59px); height:auto;
  border-radius:50%;
}
.hotline__label{
  font-size:clamp(13px, 1vw, 14px); font-weight:600; line-height:24px;
  color:var(--text-inv-cap);
}
.hotline__row{
  display:flex; flex-wrap:wrap; gap:6px clamp(14px, 2vw, 35px);
  margin-top:6px;
  font-size:clamp(13px, 1.05vw, 16px); font-weight:600;
  color:var(--text-inv);
}
.hotline__row a{ transition:color .18s ease; }
.hotline__row a:hover{ color:var(--b-100); }

.hero__calls{ display:flex; flex-wrap:wrap; gap:8px; }
.hero__centres{ width:202px; }
.hero__claim{ width:344px; }

.warranty{ background:var(--n-000); }

.wstd{
  display:grid; grid-template-columns:var(--col-text) minmax(0, 1fr);
  padding:clamp(44px, 6vw, 102px) 0 clamp(40px, 5vw, 86px);
}
.wstd__intro{
  position:sticky;

  top:calc(var(--stick-h) + clamp(20px, 2.4vw, 40px));
  align-self:start;
  padding-right:clamp(20px, 2.4vw, 40px);
}
.wstd__intro .block-title{ max-width:400px; }
.wstd__lead{
  max-width:486px; margin-top:clamp(20px, 2.4vw, 42px);
  font-size:clamp(14px, 1.05vw, 16px); font-weight:600; line-height:1.63;
  color:var(--text-mute);
}
.wstd__col{ min-width:0; }
.wstd__sub{
  max-width:690px;
  font-size:clamp(21px, 1.85vw, 32px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
  color:var(--text);
}
.wstd__sub--rules{ margin-top:clamp(40px, 5.5vw, 94px); }
.wstd__note{
  margin-top:clamp(18px, 2vw, 34px);
  font-size:15px; font-weight:600; line-height:26px;
  color:var(--text-mute);
}
.wstd__note--after{ max-width:660px; }

.wcards{
  list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(10px, 1vw, 15px);
  margin-top:clamp(20px, 2.4vw, 42px);
}
.wcard{
  position:relative;
  display:flex;
  aspect-ratio:493/268;
  background:var(--tint);
  overflow:hidden;
}

.wcard__link{
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%; height:100%;
  padding:clamp(18px, 1.7vw, 28px);
}
.wcard__link:focus-visible{ outline:2px solid var(--brand); outline-offset:-4px; }

.wcard__grid{
  position:absolute; left:23.5%; top:0; z-index:0;
  width:76.9%; height:85.8%;
  pointer-events:none;
}

.wcard__shot{
  position:absolute; z-index:0;
  right:var(--shot-r, 8%); bottom:var(--shot-b, 0%);
  width:var(--shot-w, 60%); height:var(--shot-h, 70%);
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .3s ease;
}

.wcard--cover-left .wcard__shot{ object-fit:cover; object-position:left center; }
.wcard__link:hover .wcard__shot{ transform:translateY(-6px); }
.wcard__name{
  position:relative; z-index:1;
  max-width:46%;
  font-size:clamp(17px, 1.4vw, 24px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
  color:var(--text);
  transition:color .18s ease;
}
.wcard__link:hover .wcard__name{ color:var(--link); }
.wcard__term{
  position:relative; z-index:1;
  margin-top:clamp(14px, 1.4vw, 24px);
  padding:4px 11px;
  border-radius:4px;
  background:var(--a-check-ink);
  font-size:clamp(13px, 1.05vw, 16px); font-weight:600; line-height:26px;
  color:var(--text-inv);
}

.wrules{
  list-style:none; padding:0;
  margin-top:clamp(18px, 2.2vw, 38px);
  border-top:1px solid var(--tint);
}
.wrule{
  display:grid; grid-template-columns:64px minmax(0, 1fr);
  align-items:start;
  padding:clamp(14px, 1.5vw, 26px) 0;
  border-bottom:1px solid var(--tint);
}
.wrule__num{
  font-size:15px; font-weight:600; line-height:26px;
  color:var(--text-mute);
}
.wrule__text{
  max-width:626px;
  font-size:16px; font-weight:600; line-height:26px;
  color:var(--text-body);
}

.asp{
  position:relative;
  display:flow-root;
  padding:clamp(34px, 3.7vw, 64px) 0 0;
  color:var(--text-inv);
  background:var(--surface-dark);
}

.asp__frame{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.asp__photo{
  position:absolute; left:0;

  top:-13%; width:100%; height:126%;
  object-fit:cover;
  will-change:transform;
}
.asp__veil{
  position:absolute; inset:0; z-index:1;
  background:rgb(0 0 0 / .43);
  pointer-events:none;
}

.asp__inner,
.wpres__inner{ padding-inline:clamp(0px, 2.4vw, 41px); }
.asp__inner{ position:relative; z-index:2; }
.asp.is-armed .asp__kicker,
.asp.is-armed .asp__title,
.asp.is-armed .asp__lead{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease var(--in-lag, 0s),
             transform .6s cubic-bezier(.22, .61, .36, 1) var(--in-lag, 0s);
}
.asp.is-armed .asp__kicker.is-in,
.asp.is-armed .asp__title.is-in,
.asp.is-armed .asp__lead.is-in{ opacity:1; transform:none; }

.asp.is-armed .asp__tile{
  --lag:0s;
  opacity:0;
  transform:translateY(28px) scale(.97);
  transition:opacity .55s ease var(--lag),
             transform .65s cubic-bezier(.22, .61, .36, 1) var(--lag);
}
.asp.is-armed .asp__tile:nth-child(2){ --lag:.11s; }
.asp.is-armed .asp__tile:nth-child(3){ --lag:.22s; }
.asp.is-armed .asp__tile:nth-child(4){ --lag:.33s; }
.asp.is-armed .asp__tile.is-in{ opacity:1; transform:none; }

.asp.is-armed .asp__tile .wi{
  opacity:0;
  transform:scale(.82);
  transition:opacity .45s ease calc(var(--lag) + .18s),
             transform .55s cubic-bezier(.2, .9, .3, 1.3) calc(var(--lag) + .18s);
}
.asp.is-armed .asp__tile.is-in .wi{ opacity:1; transform:none; }

.asp__kicker{
  font-size:clamp(14px, 1vw, 16px); font-weight:500; line-height:1.4;
  color:var(--text-inv-dim);
}
.asp__title{
  max-width:489px; margin-top:clamp(10px, 1vw, 18px);
  font-size:clamp(34px, 3.7vw, 64px);
  font-weight:500; line-height:1.1;
  color:var(--a-check);
}
.asp__lead{
  max-width:459px; margin-top:clamp(20px, 3.2vw, 55px);
  font-size:clamp(14px, 1.05vw, 18px); font-weight:500; line-height:1.6;
  color:var(--text-inv);
}
.asp__tiles{

  --asp-drop:clamp(48px, 7vw, 121px);
  position:relative; z-index:3;
  list-style:none;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:9px;
  margin-top:clamp(40px, 15vw, 258px);
  margin-bottom:calc(-1 * var(--asp-drop));
}
.asp__tile{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(24px, 3vw, 52px);
  aspect-ratio:392/349;
  padding:clamp(18px, 1.9vw, 32px) clamp(18px, 1.9vw, 32px) clamp(20px, 2vw, 35px);
  background:rgb(39 39 39 / .49);

  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
}
.asp__icon{ display:block; }
.asp__icon svg{ display:block; width:clamp(64px, 6vw, 104px); height:auto; }

.asp__icon--lg svg{ width:clamp(86px, 8.1vw, 140px); }

/* ---- the band as a page block ----
   Dropped into a page, the band may come without its four plates: then
   nothing hangs below it, and it closes with the same step it opens with
   instead of the tall run-up the plates needed. */
/* Копия без плиток занимает мало места, и полоса в 34-64px воздуха читалась
   узкой полоской. Даём ей воздуха поровну сверху и снизу — примерно как
   отступ, на который плитки свисали вниз. */
.asp--slim{
  padding-top:clamp(48px, 5.2vw, 90px);
  padding-bottom:clamp(48px, 5.2vw, 90px);
}

/* An uploaded mark in place of the drawn one — same box, so a plate with a
   picture and a plate with the animated mark keep the same rhythm. */
.asp__icon img{
  display:block;
  width:clamp(64px, 6vw, 104px); height:auto;
  object-fit:contain;
}

.wi__spin,
.wi__rays,
.wi__ray,
.wi__arc,
.wi__corner,
.wi__bar,
.wi--turn .wi__ring,
.wi--lock .wi__ring{ transform-box:view-box; transform-origin:50% 50%; }
.wi__ring{ stroke:var(--n-000); stroke-width:1.5; fill:none; }
.wi__dot{ fill:var(--a-check); }

.asp__tile:hover .wi--turn .wi__spin{ animation:wi-turn 5s linear infinite reverse; }
.asp__tile:hover .wi--turn .wi__ring{ animation:wi-turn 9s linear infinite; }

.asp__tile:hover .wi--send .wi__arc{ animation:wi-ping 1.9s ease-out infinite; }
.asp__tile:hover .wi--send .wi__arc:nth-child(3){ animation-delay:.19s; }
.asp__tile:hover .wi--send .wi__arc:nth-child(4){ animation-delay:.38s; }

.asp__tile:hover .wi--scan .wi__rays{ animation:wi-turn 14s linear infinite; }
.asp__tile:hover .wi--scan .wi__ray{ animation:wi-flick 1.8s ease-in-out infinite; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(2){  animation-delay:.15s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(3){  animation-delay:.30s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(4){  animation-delay:.45s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(5){  animation-delay:.60s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(6){  animation-delay:.75s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(7){  animation-delay:.90s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(8){  animation-delay:1.05s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(9){  animation-delay:1.20s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(10){ animation-delay:1.35s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(11){ animation-delay:1.50s; }
.asp__tile:hover .wi--scan .wi__ray:nth-child(12){ animation-delay:1.65s; }

.asp__tile:hover .wi--lock .wi__ring{ animation:wi-lock 2.1s ease-out infinite; }
.asp__tile:hover .wi--lock .wi__ring:nth-of-type(2){ animation-delay:.16s; }
.asp__tile:hover .wi--lock .wi__ring:nth-of-type(3){ animation-delay:.32s; }
.asp__tile:hover .wi--lock .wi__corner{ animation:wi-breathe 2.1s ease-in-out infinite; }
.asp__tile:hover .wi--lock .wi__bar{ animation:wi-breathe 2.1s ease-in-out infinite .2s; }

@keyframes wi-turn{ to{ transform:rotate(360deg); } }
@keyframes wi-ping{
  0%   { transform:scale(.86); opacity:.25; }
  45%  { opacity:1; }
  100% { transform:scale(1.06); opacity:0; }
}
@keyframes wi-flick{
  0%, 100% { opacity:.35; }
  50%      { opacity:1; }
}
@keyframes wi-lock{
  0%   { transform:scale(.72); opacity:0; }
  35%  { opacity:1; }
  100% { transform:scale(1.08); opacity:0; }
}
@keyframes wi-breathe{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.05); }
}

@media (prefers-reduced-motion:reduce){

  .wi *{ animation:none !important; }
}
.asp__text{
  font-size:clamp(13px, 1.05vw, 18px); font-weight:500; line-height:1.6;
  color:var(--text-inv);
}

.wpres{
  position:relative;
  padding:clamp(120px, 15.7vw, 271px) 0 clamp(60px, 10.7vw, 185px);
  color:var(--text-inv);
  background:var(--surface-dark);
}

.wpres__copy{ position:relative; z-index:1; }
.wpres__title{
  max-width:340px;
  font-size:clamp(26px, 2.4vw, 40px);
  font-weight:500; line-height:1.2;
  color:var(--text-inv);
}
.wpres__go{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(14px, 1.6vw, 28px);
  font-size:clamp(13px, 1vw, 16px); font-weight:500; line-height:1.6;
  color:var(--text-inv);
}
.wpres__caret{
  display:grid; place-items:center;
  width:23px; height:23px; flex:none;
  border:1px solid rgb(255 255 255 / .35); border-radius:50%;
  transition:background .18s ease, border-color .18s ease;
}
.wpres__caret::before{
  content:"";
  width:10px; height:5px;
  background:var(--text-inv);
  -webkit-mask:var(--caret-mask) no-repeat center / contain;
          mask:var(--caret-mask) no-repeat center / contain;
  transform:rotate(-90deg);
  transition:background .18s ease;
}
.wpres__go:hover .wpres__caret{ border-color:var(--a-check); background:var(--a-check); }

.smap{
  --pin:1;
  --tip:1;

  --map-fill:#161616;
  --map-line:#2e2e2e;
  --map-fill-on:#1f2a2a;
  --map-line-on:#3b4a4a;
  display:block;
  width:100%; max-width:1299px; height:auto;

  margin:clamp(-111px, -6.4vw, 0px) auto 0;
  overflow:visible;
}

.smap.is-armed .smap__reg{ opacity:0; }
.smap.is-armed .smap__reg.is-in{
  animation:smap-in .75s ease var(--in-lag, 0s) both;
}
@keyframes smap-in{
  from{ opacity:0; stroke:var(--a-check); stroke-width:1.6; }
  50% { opacity:1; stroke:var(--a-check); stroke-width:1.6; }
  to  { opacity:1; stroke:var(--line);    stroke-width:1; }
}

.smap.is-armed .smap__pin{
  opacity:0;
  transform:scale(.35);
  transform-box:fill-box; transform-origin:center;
  transition:opacity .35s ease var(--in-lag, 0s),
             transform .5s cubic-bezier(.2, .9, .3, 1.35) var(--in-lag, 0s);
}
.smap.is-armed .smap__pin.is-in{ opacity:1; transform:none; }

.smap__reg{
  --fill:var(--map-fill);
  --line:var(--map-line);
  fill:var(--fill);
  stroke:var(--line); stroke-width:1;
  transition:fill .18s ease, stroke .18s ease;
}

.smap__reg--on{ --fill:var(--map-fill-on); --line:var(--map-line-on); }
.smap__reg:hover{ fill:#283636; stroke:var(--a-check); }
.smap__reg--on:hover{ fill:#2f4442; }

.smap__pin{ cursor:pointer; }
.smap__pin:focus{ outline:none; }
.smap__mark{
  transform:scale(var(--pin));
  transform-box:fill-box; transform-origin:center;
}
.smap__hit{ fill:transparent; stroke:none; }
.smap__ring{
  fill:none;
  stroke:var(--a-check); stroke-width:1.5;
  transition:stroke .18s ease;
}
.smap__dot{ fill:var(--a-check); }

.smap__wave{
  fill:none;
  stroke:var(--a-check); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  animation:smap-wave 2.8s ease-out infinite;
}

.smap__pin:nth-child(3n+2) .smap__wave{ animation-delay:.9s; }
.smap__pin:nth-child(3n+3) .smap__wave{ animation-delay:1.8s; }
@keyframes smap-wave{
  0%   { transform:scale(1);   opacity:.55; }
  70%  { transform:scale(3.2); opacity:0; }
  100% { transform:scale(3.2); opacity:0; }
}
.smap__pin:hover .smap__ring,
.smap__pin:focus-visible .smap__ring{ stroke:var(--n-000); }
.smap__pin:focus-visible .smap__hit{ stroke:var(--n-000); stroke-width:1.5; }

.smap__tipbox{
  transform:scale(var(--tip));
  transform-box:fill-box; transform-origin:bottom center;
  opacity:0;
  transition:opacity .16s ease;
  pointer-events:none;
}
.smap__tipbox rect{ fill:#3d3d3d; }
.smap__tipbox text{
  fill:var(--text-inv);
  font-family:var(--font); font-size:13px; font-weight:600;
  text-anchor:middle;
}
.smap__pin:hover .smap__tipbox,
.smap__pin:focus-visible .smap__tipbox{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .smap__wave{ animation:none; opacity:.28; }
}

@media (max-width:1023px){
  .hero__foot--warranty{ grid-template-columns:minmax(0, 1fr); align-items:start; }
  .wstd{ grid-template-columns:minmax(0, 1fr); row-gap:clamp(26px, 4vw, 44px); }

  .wstd__intro{ position:static; padding-right:0; }
  .asp__tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .asp__tile{ aspect-ratio:auto; min-height:230px; }

  .smap{
    --pin:1.5; --tip:1.6;
    margin-top:clamp(16px, 2vw, 30px);
  }
}

@media (max-width:767px){
  .hero__foot--warranty{ margin-left:0; }
  .hero__centres,
  .hero__claim{ width:100%; }
  .wcards{ grid-template-columns:minmax(0, 1fr); }
  .wcard__name{ max-width:64%; }
  .asp__tiles{ grid-template-columns:minmax(0, 1fr); }
  .asp__tile{ min-height:0; gap:20px; }
  .wrule{ grid-template-columns:44px minmax(0, 1fr); }
  .wrule__text{ font-size:15px; line-height:24px; }
  .wpres__title{ max-width:none; }
  .smap{ --pin:2.9; --tip:3.2; }
}

.hero--solution{
  min-height:clamp(438px, 40.6vw, 577px);
  padding-bottom:clamp(28px, 2.7vw, 46px);
}

.hero--solution .hero__body{ padding-top:clamp(14px, 1.6vw, 27px); }

.hero--solution .hero__lead{ max-width:606px; }

.hero__blend{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  mix-blend-mode:lighten;

  opacity:var(--hero-blend, .3);
  pointer-events:none;
}

.hero__back{
  position:absolute; left:5px; top:clamp(24px, 2.4vw, 41px); z-index:2;
  width:34px; height:34px;
}
.hero__back::before{ width:13px; height:7px; }

.hero__foot--solution{ align-items:flex-end; }
.hero__foot--solution .btn--quote{ height:45px; min-width:228px; }

@media (max-width:1023px){

  .hero--solution .hero__body{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-rows:auto minmax(0, 1fr);
    column-gap:clamp(12px, 2vw, 18px);
    align-items:center;
  }
  .hero--solution .hero__back{ position:static; grid-column:1; grid-row:1; }
  .hero--solution .hero__title{ grid-column:2; grid-row:1; }

  .hero--solution .hero__foot{ grid-column:1 / -1; grid-row:2; align-self:end; }
}

@media (max-width:767px){

  .hero__foot--solution .btn--quote{ width:100%; min-width:0; }

  .hero--solution .hero__back{ display:none; }
  .hero--solution .hero__body{ grid-template-columns:minmax(0, 1fr); column-gap:0; }
  .hero--solution .hero__title{ grid-column:1; grid-row:1; }
}

.rise .rise__w{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em);

  transition:opacity .5s ease calc(var(--w, 0) * 45ms),
             transform .7s cubic-bezier(.22, .61, .36, 1) calc(var(--w, 0) * 45ms);
}
.rise.is-in .rise__w{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rise .rise__w{ opacity:1; transform:none; transition:none; }
}

@media (max-width:767px){

  input,
  textarea,
  select,
  .field input,
  .pfield input,
  .pfield textarea,
  .pfield select,
  .pform input,
  .pform textarea,
  .pform select,
  .bsel__button,
  .psearch__field,
  .sitesearch__field,
  .hero__search input{ font-size:16px; }

  .article__grid{ grid-template-columns:minmax(0, 1fr); column-gap:0; }
  .article__back{ display:none; }
  .article__head{ grid-column:1; grid-row:1; }
  .author,
  .article__body,
  .article__also,
  .also{ grid-column:1 / -1; }

  .breadcrumbs,
  .crumbs{
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .breadcrumbs::-webkit-scrollbar,
  .crumbs::-webkit-scrollbar{ display:none; }
  .breadcrumbs > *,
  .crumbs > *{ flex:none; }

  .crumbs{ padding-right:var(--pad); }
}

.bsp-t-none.bsp-t-none,
.bsp-t-xs.bsp-t-xs,
.bsp-t-s.bsp-t-s,
.bsp-t-m.bsp-t-m,
.bsp-t-l.bsp-t-l,
.bsp-t-xl.bsp-t-xl{ margin-top:var(--bsp-t); }

.bsp-b-none.bsp-b-none,
.bsp-b-xs.bsp-b-xs,
.bsp-b-s.bsp-b-s,
.bsp-b-m.bsp-b-m,
.bsp-b-l.bsp-b-l,
.bsp-b-xl.bsp-b-xl{ margin-bottom:var(--bsp-b); }

.bbg{
  --bbg:transparent;
  --bbg-pad:clamp(20px, 3.4vw, 48px);
}
.bbg.bbg{
  background:var(--bbg);
  padding:var(--bbg-pad);
}

.bbg-full.bbg-full{
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml, calc(50% - var(--vw, 100vw) / 2));
  margin-right:var(--bleed-mr, calc(50% - var(--vw, 100vw) / 2));
  padding-left:max(var(--pad), calc((var(--vw, 100vw) - var(--maxw)) / 2));
  padding-right:max(var(--pad), calc((var(--vw, 100vw) - var(--maxw)) / 2));
}

.bbg-white{ --bbg:var(--n-000); }
.bbg-grey{ --bbg:var(--n-100); }
.bbg-sky{ --bbg:var(--b-100); }
.bbg-blue{ --bbg:var(--b-400); }
.bbg-navy{ --bbg:var(--b-950); }
.bbg-dark{ --bbg:var(--n-950); }

.bbg-full.bbg-wide{
  padding-left:var(--bbg-pad);
  padding-right:var(--bbg-pad);
}

.blockgrid__cell .bbg-full.bbg-full{
  width:auto;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:var(--bbg-pad);
  padding-right:var(--bbg-pad);
}

.bbg-inv,
.bbg-inv :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd,
  table, thead, tbody, tr, td, th, figcaption, blockquote, span, small,
  strong, b, em, i, time, label, summary, address):not(:where(
  button, button *, input, select, textarea,
  [class*="btn"], [class*="btn"] *, [class*="button"], [class*="button"] *,
  .chip, .chip *, .badge, .badge *, .tag, .tag *, .pill, .pill *)){ color:var(--n-000); }
.bbg-inv a{ color:var(--b-200); }
.bbg-inv a:hover{ color:var(--n-000); }
.bbg-inv hr, .bbg-inv table, .bbg-inv td, .bbg-inv th{ border-color:rgba(255,255,255,.24); }

@media (max-width:760px){
  .bbg.bbg{ --bbg-pad:18px; }
}

/* =========================================================
   LEAD FORM — the call as a block of its own
   The same request the footer takes, but as a band that can be dropped
   between the blocks of a solution or a text page. Nothing here is a new
   control: the fields, the button, the consent box and the attach plate
   are the components the footer form and the quote panel already use —
   the block only lays them out on the blue and repaints the plate, which
   was drawn for white. Figma 2561:277 (band 630 tall in the 1728 frame).
   ========================================================= */
.leadform{
  position:relative;
  /* Full bleed. Half the column minus half the window is only the right
     answer while that column is centred; on a page that indents its text
     column it lands off by half the indent, so the script measures the
     offset and hands it back as --bleed-ml. --vw is the window without its
     scrollbar — with plain 100vw the band would push the page sideways. */
  --bleed-ml:calc(50% - var(--vw, 100vw) / 2);
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml);
  margin-right:0;
  padding-top:clamp(34px, 3.7vw, 64px);
  padding-bottom:clamp(40px, 4.3vw, 74px);
  color:var(--text-inv);
  /* teal rising from below the right-hand edge, over the same deep blue
     the footer stands on */
  background:
    radial-gradient(68% 138% at 72% 154%,
      rgba(0, 223, 203, .44) 0%,
      rgba(0, 223, 203, .44) 58%,
      rgba(0, 223, 203, 0) 100%),
    linear-gradient(179deg, var(--b-700) 40%, var(--b-550) 100%);
  overflow:hidden;
}

/* the same two tracks as the footer: the copy hangs off --col-text, the
   form starts on the second guide */
.leadform__grid{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  align-items:start;
}
.leadform__main{ min-width:0; }

.leadform__title{
  max-width:421px;
  font-size:clamp(24px, 2.32vw, 40px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
}
.leadform__lead{
  max-width:384px;
  margin-top:clamp(22px, 2.43vw, 42px);
  font-size:clamp(15px, 0.93vw, 16px);
  font-weight:500; line-height:1.5; letter-spacing:-.03em;
}
.leadform__formtitle{
  font-size:16px; font-weight:600;
  text-transform:uppercase; letter-spacing:-.03em;
}

/* ---- the attach plate on the blue ----
   .drop is written for the white panel; on this band the line, the cloud
   and the two labels take the light palette instead. */
.leadform__attach{ margin-top:6px; }
.leadform .drop{ border-color:var(--a-attach); }
.leadform .drop:hover,
.leadform .drop.is-over{
  border-color:var(--text-inv);
  background:rgba(255, 255, 255, .07);
}
.leadform .drop__icon{ background:var(--a-attach); }
.leadform .drop:hover .drop__icon,
.leadform .drop.is-over .drop__icon{ background:var(--text-inv); }
.leadform .drop__title{ color:var(--text-inv); }
.leadform .drop__note,
.leadform .drop__list{ color:var(--text-inv-note); }
.leadform .drop__list b{ color:var(--text-inv); }
.leadform .drop input:focus-visible + .drop__body{ outline-color:var(--text-inv); }

/* the mock leaves more air under the plate than the footer form does */
.leadform .btn--submit{ margin-top:clamp(18px, 1.6vw, 27px); }

/* the footer keeps a line free under the form so its answer does not shift
   the page; here the band ends right under the consent, and the slot only
   takes room once there is something to say */
.leadform .form__status:empty{ min-height:0; margin-top:0; }

/* A post keeps a sticky contents rail beside its copy, so there the band stays
   in the column of running text rather than crossing the whole window — the
   inner .shell still holds the copy the same distance from its edge. */
.article__body .leadform,
.article__body .steps,
.article__body .imgtext,
.article__body .imgsolo{
  width:auto; max-width:none;
  margin-left:0; margin-right:0;
}

@media (max-width:1023px){
  .leadform__grid{ grid-template-columns:1fr; }
  .leadform__copy{ margin-bottom:36px; }
  .leadform__lead{ max-width:none; }
}

/* ---- the same plate when the upload plugin draws it ----
   Contact Form 7 renders the attach control through Drag & Drop Upload, so
   on the live site the plate is the plugin's container, restyled for the
   white panel further up this file. On the band it takes the same light
   palette as .drop above. */
.leadform .pform__attach .codedropz-upload-container{ border-color:var(--a-attach); }
.leadform .pform__attach .codedropz-upload-container:hover,
.leadform .pform__attach .codedropz-upload-wrapper.dnd-upload-active .codedropz-upload-container{
  border-color:var(--text-inv);
  background:rgba(255, 255, 255, .07);
}
.leadform .pform__attach .codedropz-upload-inner::before{ background:var(--a-attach); }
.leadform .pform__attach .codedropz-upload-container:hover .codedropz-upload-inner::before,
.leadform .pform__attach .codedropz-upload-wrapper.dnd-upload-active .codedropz-upload-inner::before{
  background:var(--text-inv);
}
.leadform .pform__attach .codedropz-upload-inner h3{ color:var(--text-inv); }
.leadform .pform__attach .cd-upload-btn{ color:var(--text-inv-note); }
.leadform .pform__attach .cd-upload-btn:hover{ color:var(--text-inv); }
.leadform .pform__attach .dnd-upload-counter,
.leadform .pform__attach-note{ color:var(--text-inv-note); }
.leadform .pform__attach .dnd-upload-status .dnd-upload-details .name{ color:var(--text-inv); }
.leadform .pform__attach .dnd-upload-status .dnd-upload-details .name em{ color:var(--text-inv-note); }
.leadform .pform__attach .dnd-upload-status .dnd-upload-details .dnd-progress-bar{ background:rgba(255, 255, 255, .22); }
.leadform .pform__attach .dnd-upload-status .dnd-upload-details .dnd-progress-bar span{ background:var(--a-attach); }
.leadform .pform__attach .dnd-upload-status .dnd-upload-details .dnd-icon-remove::before,
.leadform .pform__attach .dnd-upload-status .dnd-upload-details .dnd-icon-remove::after{ background:var(--text-inv); }

/* the marching-ants outline the script lays over the plate */
.leadform .drop__ants{ color:var(--a-attach); }
.leadform .drop:hover .drop__ants,
.leadform .drop.is-over .drop__ants,
.leadform .pform__attach .codedropz-upload-container:hover .drop__ants,
.leadform .pform__attach .codedropz-upload-wrapper.dnd-upload-active .drop__ants{ color:var(--text-inv); }

/* Once that outline is in place it IS the plate's edge, and the element's own
   dashed border has to step aside — the recolouring above would otherwise
   bring it back and the plate would carry two dashed lines, one inside the
   other. The plain rules further up cannot do this on their own: they weigh
   the same as the theme's .has-ants rule and stand later in the file. */
.leadform .drop.has-ants,
.leadform .drop.has-ants:hover,
.leadform .drop.has-ants.is-over,
.leadform .pform__attach .codedropz-upload-container.has-ants,
.leadform .pform__attach .codedropz-upload-container.has-ants:hover,
.leadform .pform__attach .codedropz-upload-wrapper.dnd-upload-active .codedropz-upload-container.has-ants{
  border-color:transparent;
}

/* CF7 prints its own answer under the form; on the blue it takes the
   footer form's colours rather than the plugin's black on white */
.leadform .form .wpcf7-response-output{ color:var(--text-inv); }
.leadform .form .wpcf7-not-valid-tip{ color:var(--a-danger); }


/* =========================================================
   STAGES — a band of cards the editor drops into a page
   «Как мы работаем»: a heading and a row of steps, each a white disc with
   the step's mark, a name, a paragraph and — where there is one — a link.
   The row is written once as a self-fitting grid rather than a stack of
   breakpoints: the block holds however many cards were added, and the
   tracks that are left empty collapse, so five cards always share the row
   evenly. Figma 2561:330 (band 599 tall in the 1728 frame).
   ========================================================= */
.steps{
  position:relative;
  /* full bleed — see .leadform for why the offset is measured */
  --bleed-ml:calc(50% - var(--vw, 100vw) / 2);
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml);
  margin-right:0;
  padding-top:clamp(30px, 3.13vw, 54px);
  padding-bottom:clamp(40px, 5.44vw, 94px);
  /* the mock's plate, unless the editor picked a colour from the palette */
  background:var(--bbg, var(--tint));
}

.steps__list{
  display:grid;
  /* min(100%, …) keeps the track from outgrowing a narrow screen. 178px is
     chosen, not rounded: it is the widest track that still lets five cards
     share one row on a 1280 laptop once the scrollbar is off the width, so
     the five of the mock do not strand a single card on a second line. */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 178px), 1fr));
  gap:clamp(28px, 4.75vw, 82px);
  margin-top:clamp(34px, 5.4vw, 93px);
  /* the cards stand a little inside the page column, as in the mock */
  padding-inline:clamp(0px, 2vw, 34px);
  list-style:none;
}

.steps__item{ min-width:0; }

/* the disc: an icon when one was given, otherwise the step's number */
.steps__mark{
  display:grid; place-items:center;
  width:clamp(64px, 5.61vw, 97px); height:clamp(64px, 5.61vw, 97px);
  border-radius:50%;
  background:var(--n-000);
  font-size:clamp(20px, 1.62vw, 28px); font-weight:600; letter-spacing:-.03em;
  color:var(--brand);
}
.steps__mark img{
  width:52%; height:52%;
  object-fit:contain;
}

.steps__name{
  margin-top:clamp(18px, 1.85vw, 32px);
  font-size:clamp(15px, 0.93vw, 16px);
  font-weight:600; line-height:1.2; letter-spacing:-.03em;
  color:var(--text);
}
.steps__text{
  margin-top:clamp(12px, 1.1vw, 19px);
  font-size:14px; font-weight:500; line-height:1.4; letter-spacing:-.02em;
  /* the mock's #919191 gives 2.8:1 on this plate; the site's muted grey is
     the same role and clears AA */
  color:var(--text-mute);
}
.steps__link{
  display:inline-block;
  margin-top:clamp(16px, 1.45vw, 25px);
  font-size:14px; font-weight:500; letter-spacing:-.03em;
  color:var(--link);
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.steps__link:hover{ color:var(--brand); border-bottom-color:currentColor; }

/* ---- how far the band and its content reach ----
   Two switches in the editor, the same pair every block already has:
   «фон во всю ширину» — off, and the band keeps to the page column;
   «контент тоже во всю ширину» — on, and the copy leaves that column too.
   The colour, where the block offers one, comes in as --bbg. */
.leadform--boxed,
.steps--boxed,
.imgtext--boxed,
.imgsolo--boxed,
.asp--boxed{
  width:auto; max-width:none;
  margin-left:0; margin-right:0;
}
.leadform--wide > .shell,
.steps--wide > .shell,
.imgtext--wide > .shell,
.imgsolo--wide > .shell,
.asp--wide > .shell{
  width:100%; max-width:none;
  padding-inline:var(--pad);
}

/* on a dark plate the card copy takes the light palette; .bbg-inv paints the
   running text, but these three are set by class and would out-weigh it */
.bbg-inv .steps__name{ color:var(--n-000); }
.bbg-inv .steps__text{ color:rgb(255 255 255 / .72); }
.bbg-inv .steps__link{ color:var(--b-200); }
.bbg-inv .steps__link:hover{ color:var(--n-000); }

/* Below the laptop five in a row would be too thin, so the track widens and
   the row breaks where it reads best rather than leaving one card alone:
   three and two down to the tablet, two and one below it. */
@media (max-width:1279px){
  .steps__list{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
@media (max-width:1199px){
  .steps__list{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 236px), 1fr)); }
}


/* =========================================================
   IMAGE AND TEXT — the numbered rows as a page block
   «Слева изображение, справа текст» (Figma 2556:174) is the partnership
   page's row, down to the column widths: the number on the page's left
   edge, a 394x334 plate, then the copy under a hairline with a link at
   its foot. So the block brings no layout of its own — it reuses .partner
   and only teaches the plate to hold a photograph instead of a partner's
   logo, which is centred and greyed.
   ========================================================= */
.imgtext{
  position:relative;
  --bleed-ml:calc(50% - var(--vw, 100vw) / 2);
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml);
  margin-right:0;
  /* no plate of its own — the colour only appears if the editor picks one */
  background:var(--bbg, transparent);
}
/* padding only when there is something to pad against */
.imgtext.bbg-white,
.imgtext.bbg-grey,
.imgtext.bbg-sky,
.imgtext.bbg-blue,
.imgtext.bbg-navy,
.imgtext.bbg-dark{
  padding-top:clamp(30px, 3.13vw, 54px);
  padding-bottom:clamp(30px, 3.13vw, 54px);
}

.imgtext__list{ margin-top:clamp(30px, 5.27vw, 91px); }
.imgtext__list > .partner:last-child{ margin-bottom:0; }

/* the plate as a photograph: it fills the frame instead of standing in the
   middle of it, and keeps its colour */
.partner__logo--shot{ padding:0; background:none; overflow:hidden; }
.partner__logo--shot img{
  width:100%; height:100%;
  object-fit:cover;
  filter:none;
}

/* on a dark plate the two parts .bbg-inv does not reach take the light
   palette themselves: the number is a <div>, the copy is coloured by class */
.bbg-inv .partner__num{ color:var(--text-inv-dim); }
.bbg-inv .partner__text,
.bbg-inv .partner__prose p{ color:rgb(255 255 255 / .72); }

@media (max-width:767px){
  /* the phone rule squares the logo plate off at 150px; a photograph keeps
     the mock's proportion instead */
  .partner__logo--shot{ height:auto; aspect-ratio:394 / 334; padding:0; }
}


/* =========================================================
   ONE PICTURE AND TEXT — a single row with a large photograph
   «Слева изображение, справа текст (одно изображение)» (Figma 2561:269):
   one 575x487 frame at the page's left edge and the copy on the same
   vertical spine every other block hangs off (--col-text). No number and
   no rule over the copy — that pair belongs to the numbered rows; what is
   shared with them is the copy itself, so the title, the prose and the
   link are the same three components.
   ========================================================= */
.imgsolo{
  position:relative;
  --bleed-ml:calc(50% - var(--vw, 100vw) / 2);
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml);
  margin-right:0;
  background:var(--bbg, transparent);
}
.imgsolo.bbg-white,
.imgsolo.bbg-grey,
.imgsolo.bbg-sky,
.imgsolo.bbg-blue,
.imgsolo.bbg-navy,
.imgsolo.bbg-dark{
  padding-top:clamp(30px, 3.13vw, 54px);
  padding-bottom:clamp(30px, 3.13vw, 54px);
}

.imgsolo__grid{
  display:grid;
  grid-template-columns:var(--col-text) 1fr;
  align-items:start;
  margin-top:clamp(24px, 2.08vw, 36px);
}
/* the mock drops the picture a little below the heading of the copy.
   The width is a share of the column, not a flat 575px: at 1728 the two are
   the same number, but on a narrower screen a flat cap would let the picture
   fill its whole track and butt straight into the copy — the tracks carry no
   gap of their own, because the copy has to stay on the page's spine. */
.imgsolo__shot{
  margin:clamp(0px, 1.04vw, 18px) 0 0;
  max-width:min(575px, 86%);
}
.imgsolo__shot img{
  display:block;
  width:100%; height:auto;
  aspect-ratio:575 / 487;
  object-fit:cover;
}
.imgsolo__body{
  display:flex; flex-direction:column; align-items:flex-start;
  min-width:0;
}
/* here the link follows the copy instead of being pushed to the foot of the
   picture — the mock leaves the rest of that height empty */
.imgsolo__body .partner__link{ margin-top:0; padding-top:clamp(20px, 2.5vw, 43px); }

@media (max-width:1023px){
  .imgsolo__grid{ grid-template-columns:1fr; }
  .imgsolo__shot{ max-width:none; margin:0 0 clamp(20px, 3vw, 34px); }
}


/* =========================================================
   ANCHOR LINE — the solution page's own docked bar
   Figma 2561:248. Nothing here is new: the strip is the product page's
   .subbar skin (white, the same 0 4px 4px shadow, the same height slot),
   and the links are .anchors with the labels the mock draws — 12/700
   uppercase, black, and the one being read in --link (#0263bb is the
   palette's --b-500). What differs from the product bar is only how it
   docks: nothing at the very top, so the hero opens the page as drawn, and
   from the reader's first movement the line slides out from under the header
   and travels with them. That is the product bar's own mechanism — .subbar
   plus :root.subbar-on — with a different trigger, so no positioning of its
   own is written here; only the height changes, through --subbar-h.
   ========================================================= */
.has-subbar--anchors{ --subbar-h:47px; }

.anchors--bar{
  display:flex; align-items:center;
  /* Центрируем, но безопасно: когда подписи шире экрана, обычный center
     выталкивает ряд за оба края сразу, и до крайних пунктов не доскроллить —
     прокрутка не умеет уходить левее нуля. Ключевое слово safe в этом случае
     прижимает ряд к началу. Порядок объявлений — запасной вариант вперёд:
     браузер, который safe не знает, оставит себе обычный center. */
  justify-content:center;
  justify-content:safe center;
  flex-wrap:nowrap;
  gap:clamp(18px, 3.41vw, 59px);
  height:100%;
  margin-top:0;
  border-bottom:0;
  /* five labels do not fit a phone: the row scrolls instead of wrapping,
     the same way the catalogue's category row does */
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.anchors--bar::-webkit-scrollbar{ display:none; }

.anchors--bar .anchors__link{
  flex:none;
  padding:0;
  font-size:12px; font-weight:700; line-height:16px; letter-spacing:0;
  text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
}
.anchors--bar .anchors__link:hover,
.anchors--bar .anchors__link[aria-current="true"]{ color:var(--link); }

/* На телефоне подписей столько же, а места нет: кегль уходит на ступень
   вниз (11px — тот же, что у надписи на кнопках), а промежуток сжимается.
   Ряд всё равно умеет прокручиваться вбок, но прокручивать приходится
   меньше, и за раз видно больше пунктов. */
@media (max-width:767px){
  .anchors--bar{ gap:clamp(14px, 4.6vw, 24px); }
  .anchors--bar .anchors__link{ font-size:11px; }
}


/* a block the reader jumped to must clear both bars — the offset is the one
   [id] already uses, so nothing is added here beyond the anchor's own box */
.anchorpoint{ display:block; }

/* Полоса Service Pack как блок страницы: на «Гарантии» она лежит прямо в
   main и потому во всю ширину сама, а внутри колонки блоков ей нужен тот же
   выход за поля, что и остальным полосам. */
.asp--block{
  --bleed-ml:calc(50% - var(--vw, 100vw) / 2);
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml);
  margin-right:0;
}

/* Свес плиток вниз — приём страницы гарантии: там под полосой своя тёмная
   плита, и плитки ложатся на неё. Блоку страницы не известно, что окажется
   ниже (следом может идти хоть синяя полоса заявки), поэтому здесь плитки
   остаются внутри полосы, а разбег до них короче — иначе блок вырастает
   почти вдвое против макета. */
.asp--block .asp__tiles{
  margin-top:clamp(36px, 6vw, 104px);
  margin-bottom:0;
}
.asp--block:not(.asp--slim){
  padding-bottom:clamp(34px, 3.7vw, 64px);
}


/* ==========================================================================
   Раздел ниже перенесён со страницы решения макета как есть. Единственная
   правка — раскладка шести карточек «какие задачи решаем»: в макете её
   включал класс на секции, а блок «Этапы работы» в теме о нём не знает,
   поэтому правило теперь срабатывает от самого числа карточек.
   ========================================================================== */

/* =========================================================
   ИТ-БЕЗОПАСНОСТЬ — блоки страницы решения
   Страница собрана из готовых компонентов (.hero, .subbar + .anchors,
   .steps, .solbands, .faq, .leadform), а здесь лежит только то, чего в
   наборе не было: шапка с объектом справа, схема с расшифровкой, сетка
   карточек «заголовок + текст» и акцентная полоса с цепочкой подбора.
   Ни одного нового цвета и ни одного нового размера — всё через токены.
   ========================================================= */

/* ---- шапка: объект слева, копия на общей вертикали ----
   Текст стоит там же, где на всех страницах сайта, — своего смещения у этой
   шапки нет. Слева от него освободившееся место занимает объект. */
.hero--sec{ min-height:clamp(500px, 43vw, 640px); }

/* Объект опущен ниже нижнего края шапки: у неё overflow:hidden, поэтому
   нижняя часть уходит под срез. Так предмет перестаёт «стоять» на границе
   блока, как поставленный на полку, и садится к тексту свободнее. */
.hero--sec .hero__object{ bottom:clamp(-44px, -2.6vw, -20px); }

/* Низ шапки собран как в каталоге: подпись слева, действия справа у края,
   обе стороны прижаты к нижнему краю блока (это уже умеет .hero__foot).
   Своего здесь — только столбец из двух кнопок вместо одной. */
/* Строка под заголовком. В шапках сайта такой строки не было — вся подпись
   лежит внизу блока, — поэтому набор берём у .hero__lead, меняется только
   место. Ширина по подписи внизу, чтобы обе висели на одной мере. */
.hero__sub{
  max-width:606px;
  margin-top:clamp(14px, 1.5vw, 26px);
  font-size:15px; font-weight:600; line-height:1.73;
  color:var(--text-inv-soft);
}

.hero__copy{ max-width:606px; }
/* внизу осталась одна строка — отступ, который отделял её от первой, не нужен */
.hero__copy > .hero__lead:first-child{ margin-top:0; }
.hero__lead--sub{
  margin-top:clamp(10px, 1vw, 16px);
  font-weight:500;
  color:var(--text-inv-cap);
}
.hero__acts--sec{
  flex:none;
  flex-direction:column; align-items:stretch; flex-wrap:nowrap;
  gap:12px;
  margin-top:0;
}

/* Объект слева, как машина в каталоге: стоит на нижнем крае шапки и так же
   поднимается на место при загрузке. Ширину считаем от левой границы колонки
   текста — она уже посчитана в --col-x, поэтому объект не может на неё
   налезть ни на какой ширине экрана. */
.hero__object{
  position:absolute; z-index:0;
  left:var(--shell-x); bottom:0;
  width:calc(var(--col-x) - var(--shell-x) - clamp(16px, 2vw, 34px));
  height:auto;
  pointer-events:none;
  animation:hero-shot-rise .9s cubic-bezier(.22, .61, .36, 1) .12s both;
}

/* Вторая кнопка: тот же размер, что у .btn--light, только обводка вместо
   заливки — чтобы главное действие читалось первым, а пара стояла ровно. */
.btn--ghost{
  height:40px; padding:0 16px;
  color:var(--text-inv);
  background:transparent;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .55);
}
.btn--ghost:hover{ background:rgb(255 255 255 / .12); }

@media (max-width:1023px){
  /* колонки текста здесь уже нет, и объект спорил бы с ним за ширину —
     он уходит в фон, как куб на «О компании» */
  .hero__object{ left:-40px; width:min(72%, 420px); opacity:.32; }
  /* на этой ширине шапка решения раскладывает тело сеткой: к её двум рядам
     добавляется третий — под строку, которая стоит под заголовком.
     Привязано к самой шапке решения, а не к наличию объёмного объекта:
     строка под заголовком бывает и без него, и тогда она забирала себе
     первую колонку — ту, что отведена кнопке возврата. */
  .hero--solution .hero__body{ grid-template-rows:auto auto minmax(0, 1fr); }
  .hero--solution .hero__sub{ grid-column:1 / -1; grid-row:2; max-width:none; }
  .hero--solution .hero__foot{ grid-row:3; }
  /* места на две стороны не остаётся: действия встают под подписью */
  .hero__foot--sec{ display:block; }
  .hero__copy{ max-width:none; }
  .hero__acts--sec{ display:flex; margin-top:clamp(20px, 3vw, 32px); }
}
@media (max-width:767px){
  .hero__acts--sec .btn{ width:100%; }
}


/* ---- вертикальный ритм белых секций страницы ---- */
.secsect{ margin-top:clamp(44px, 5.2vw, 90px); }
/* последняя белая секция упирается в цветную плиту «Частые вопросы»:
   у плиты своё внутреннее поле, но снаружи её край режет карточки вплотную */
.secsect--tail{ margin-bottom:clamp(44px, 5.2vw, 90px); }

/* Блок проектов кончается волосяной линией, а не плотной плиткой, как у
   соседних блоков, — при том же отступе воздуха под ним читается меньше.
   Поэтому шаг до FAQ здесь крупнее. */
/* Сверху линию от текста отводит ещё и интерлиньяж строки отрасли — 32px при
   кегле 14. Снизу такого запаса нет, поэтому поле там крупнее: просветы над
   первой строкой и под последней получаются одинаковыми. */
.secsect--cases .posts--3 > .post{ padding-bottom:47px; }

/* Перечень программ стоит в правой колонке, под текстом, а не полосой во всю
   ширину: шаги там мельче, и ограничение ширины сноски не нужно. */
.secaccent__copy .secaccent__subtitle{ margin-top:clamp(24px, 2.6vw, 40px); }
.secaccent__copy .secaccent__note{ max-width:none; margin-top:clamp(18px, 1.8vw, 28px); }

/* ---- подтверждённые программы на акцентной плите ----
   Метки те же, что у новостей, только в инверсии: на синем тёмная обводка
   и тёмный текст пропали бы. Подпись может стать ссылкой на сертификат —
   тогда у неё появляется наведение. */
.secaccent__tags{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:clamp(16px, 1.8vw, 26px);
}
.secaccent__tags .tag,
.secaccent__tags .tag:hover{
  height:26px; padding:0 11px;
  border-color:rgb(255 255 255 / .34);
  background:none;
  color:var(--text-inv);
}

.secsect--cases{ margin-bottom:clamp(72px, 8.4vw, 146px); }
/* лента новостей начинается сразу разлиновкой, без отбивки от заголовка —
   даём ей тот же шаг, что у сеток карточек в соседних блоках */
.secsect--cases .posts{ margin-top:clamp(26px, 3vw, 50px); }


/* Секция на плите во всю ширину — тот же приём, что у «Этапов работы»:
   ширину окна меряет сценарий и кладёт в --vw, потому что 100vw включает
   полосу прокрутки и дал бы горизонтальный сдвиг. Цвет — из палитры блоков
   (--bbg), по умолчанию общий светлый тон плит. */
.secsect--plate{
  position:relative;
  --bleed-ml:calc(50% - var(--vw, 100vw) / 2);
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml);
  margin-right:0;
  padding-block:clamp(34px, 3.9vw, 68px);
  background:var(--bbg, var(--tint));
}
/* заголовок плиты уже отбит её полем — свой отступ ему не нужен */
.secsect--plate > .shell > .block-title{ margin-top:0; }

/* Плита и акцентная полоса идут подряд и обе во всю ширину: белая полоска
   между ними читалась бы как обрыв страницы. Стыкуем их вплотную — своё
   внутреннее поле у каждой остаётся, воздух не теряется.
   Правил несколько, потому что обёртка у блока разная: в макете у каждого
   блока своя .shell, в теме блоки — соседи в одной, и часть из них ещё
   завёрнута в .anchorpoint. Специфичность подобрана так, чтобы перебить
   общий шаг между блоками .solview > .shell > * + *. */
.shell:has(.secsect--plate) + .shell .secaccent,
.anchorpoint:has(> .secsect--plate) + .secaccent,
.anchorpoint:has(> .secsect--plate) + .anchorpoint > .secaccent,
.secsect--plate + .anchorpoint > .secaccent,
.solview > .shell > .secsect--plate + .secaccent{ margin-top:0; }
.secsect__intro{
  max-width:900px;
  margin-top:clamp(14px, 1.4vw, 24px);
  font-size:15px; font-weight:500; line-height:1.6;
  color:var(--text-body);
}


/* ---- задачи: тот же .steps, но шестью карточками ----
   Самоподгоняющаяся сетка компонента разложила бы шесть карточек как
   4 + 2. Здесь колонки заданы явно, поэтому получается ровно 3 × 2. */
.steps__list:has(> :nth-child(6):last-child){
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(26px, 3vw, 52px) clamp(24px, 3.4vw, 58px);
}
@media (max-width:1023px){
  .steps__list:has(> :nth-child(6):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .steps__list:has(> :nth-child(6):last-child){ grid-template-columns:minmax(0, 1fr); }
}


/* =========================================================
   СХЕМА РЕШЕНИЯ
   Слева — цепочка участков, справа — расшифровка, что на каждом стоит.
   Стрелки рисуются на псевдоэлементах узлов, поэтому в разметке остаётся
   только текст: список читается голосом сверху вниз без «стрелка вниз».
   ========================================================= */
/* Схема слева, расшифровка справа — та же пара колонок, что и в акцентном
   блоке ниже. */
.secmap__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap:clamp(24px, 3.4vw, 58px);
  margin-top:clamp(26px, 3vw, 50px);
}

/* ---- схемы: плоская векторная графика ----
   Обе схемы страницы — inline SVG, а не картинка: подписи набираются тем же
   Montserrat, что и вся страница, поэтому остаются резкими на любом экране и
   переживают правку текста без перерисовки файла. Размер подписей живёт
   здесь, а не в разметке: в SVG он задан бы в единицах холста и не подчинялся
   бы медиазапросам. */
.secscheme{ display:block; width:100%; height:auto; }
.secscheme__label{
  font-family:var(--font);
  font-size:15px; font-weight:600; letter-spacing:-.02em;
}
.secscheme__label--sm{ font-size:13.5px; }
/* Схема тянется на всю ширину колонки, поэтому набор внутри неё виден
   крупнее своего кегля: 620 единиц холста растягиваются до ~760px.
   У схемы, вынесенной в файл, размер подписей запечён при сборке. */
.secscheme__label--xs{ font-size:11px; }
/* На узком экране схема просто сжимается вместе с колонкой. Полосы прокрутки
   тут быть не должно: горизонтальный скролл внутри страницы читается как
   поломка. Подписи становятся мелкими, но всё, что на схеме названо, слово в
   слово повторено в расшифровке под ней. */

/* Схема изображением. Держится по верху колонки, рядом с первой парой
   расшифровки: у картинки своя пропорция, и растягивать её под высоту
   соседней колонки нельзя. */
/* Подложку несёт сама картинка: её холст залит светло-серым и с полями,
   поэтому своей подложки под ней быть не должно — иначе на стыке двух
   почти одинаковых серых виден шов. */
.secmap__pic{ margin:0; }
.secmap__pic img{
  display:block;
  width:100%; height:auto;
}

/* обходной путь: филиалы и удалённые сотрудники входят в тот же контур */
.secmap__side{
  margin-top:clamp(16px, 1.6vw, 26px);
  padding-left:clamp(14px, 1.4vw, 24px);
  border-left:1px solid var(--rail);
  font-size:13px; font-weight:600; line-height:1.55; letter-spacing:-.02em;
  color:var(--text-mute);
}
.secmap__side b{ color:var(--link); font-weight:700; }

/* расшифровка: пары «что стоит — что делает» */
/* Расшифровка тянется во всю высоту схемы: колонка растягивается сама
   (align-items:stretch у сетки), а строки внутри распределяются по ней
   поровну. На узком экране колонка одна, высота у списка своя — и правило
   ничего не делает. */
.secmap__legend{
  margin:0;
  display:flex; flex-direction:column; justify-content:space-between;
}
.secmap__legend > div{ padding:clamp(14px, 1.35vw, 22px) 0; border-top:1px solid var(--tint); }
.secmap__legend > div:first-child{ border-top:0; padding-top:0; }
.secmap__term{
  font-size:15px; font-weight:600; line-height:1.25; letter-spacing:-.03em;
  color:var(--text);
}
.secmap__def{
  margin:clamp(6px, 0.6vw, 10px) 0 0;
  font-size:14px; font-weight:500; line-height:1.45; letter-spacing:-.02em;
  color:var(--text-mute);
}

@media (max-width:1023px){
  .secmap__grid{ grid-template-columns:minmax(0, 1fr); }
}


/* =========================================================
   СЕТКА КАРТОЧЕК «ЗАГОЛОВОК + ТЕКСТ»
   Один компонент на три места страницы: параметры проекта, что проверяем
   при подборе и почему БАЙТ. Число колонок задаётся модификатором, потому
   что от него зависит только раскладка, а не вид карточки.
   ========================================================= */
.secgrid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  margin-top:clamp(26px, 3vw, 50px);
  background:var(--tint);
  box-shadow:0 0 0 1px var(--tint);
}
.secgrid--four{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

.secgrid__item{
  padding:clamp(20px, 2vw, 34px) clamp(18px, 1.8vw, 30px);
  background:var(--n-000);
}
/* Значок карточки. Рисунок подаётся маской, а не картинкой: цвет тогда
   берётся от текста — на белой карточке значок синий, на синей плите
   «Что проверяем» белый, и второго набора файлов не нужно. */
.secgrid__ico{
  display:block;
  width:30px; height:30px;
  margin-bottom:clamp(12px, 1.1vw, 18px);
  background:currentColor;
  color:var(--brand);
  -webkit-mask-image:var(--ico);  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
/* на синей плите значок светлеет вместе с остальным */
.secaccent .secgrid__ico{ color:var(--text-inv); }


.secgrid__name{
  font-size:15px; font-weight:600; line-height:1.25; letter-spacing:-.03em;
  color:var(--text);
}
.secgrid__text{
  margin-top:clamp(10px, 1vw, 16px);
  font-size:14px; font-weight:500; line-height:1.45; letter-spacing:-.02em;
  color:var(--text-mute);
}

/* кнопка под сеткой */
.secgrid + .btn{ margin-top:clamp(24px, 2.6vw, 44px); }

@media (max-width:1023px){
  .secgrid,
  .secgrid--four{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .secgrid,
  .secgrid--four{ grid-template-columns:minmax(0, 1fr); }
}


/* ---- ссылка на раздел каталога внутри синей плиты ----
   Плита .solband кликабельна целиком, но техзадание просит видимую
   подпись — она же подсказывает, куда ведёт карточка. */
.solband__more{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(10px, 1vw, 16px);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--text-inv);
}
.solband__more::after{
  content:"";
  width:14px; height:8px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg width=%226.14805%22 height=%229.41526%22 viewBox=%220 0 6.14805 9.41526%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M0.73279 0.680451L4.73279 4.98814L0.73279 8.68045%22 stroke=%22%235C5C5C%22 stroke-width=%222%22/%3E%3C/svg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg width=%226.14805%22 height=%229.41526%22 viewBox=%220 0 6.14805 9.41526%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M0.73279 0.680451L4.73279 4.98814L0.73279 8.68045%22 stroke=%22%235C5C5C%22 stroke-width=%222%22/%3E%3C/svg%3E") no-repeat center / contain;
  transition:transform .3s cubic-bezier(.22, .61, .36, 1);
}
.solband__link:hover .solband__more::after{ transform:translateX(5px); }
/* подпись стоит под текстом плиты, поэтому нижний ряд перестаёт быть
   прижатым к краю — расстояние до него задаёт сама подпись */
.solbands--sec .solband__link{ row-gap:clamp(10px, 1.2vw, 20px); align-content:end; }

/* ---- превью товара в плитке ----
   Снимок из раздела, к которому ведёт плитка: правый нижний угол, под
   текстом. Размер задаём высотой, а не шириной: у снимков разные пропорции
   (сервер стоймя, коммутатор лежмя), а к одной линии низа их нужно прижать
   одинаково. Плитка с overflow:hidden, поэтому широкий снимок аккуратно
   срезается краем, а не ломает сетку. */
.solband__pic{
  position:absolute; z-index:0;
  /* чуть выше середины плитки: слева на этой высоте идут заголовок и первые
     строки текста, и снимок справа встаёт вровень с ними */
  right:-10%; top:42%;
  transform:translateY(-50%);
  height:56%;
  width:auto; max-width:50%;
  object-fit:contain; object-position:right bottom;
  pointer-events:none;
}


/* Лежачий снимок (стоечный корпус) незачем сажать на самый срез плитки: он
   не «стоит» на полу, как башня или системный блок. Поднимаем его над строкой
   ссылки и уводим за правый край — так корпус виден крупно, а места он
   занимает столько же: левая кромка остаётся правее текста, обрезается только
   то, что ушло за край плитки.
   Ширина холста 87.5 %, а не 84 %: у правого края плитки холст кончается
   всегда на одном месте, и лишние 3.5 % прирастают влево — видимая полоса
   становится шире, и вертикальный корпус помещается в неё целиком. Снимки,
   заполняющие холст целиком, на этот прирост отвечают прозрачным полем слева
   в 1/24 ширины файла и остаются на прежнем месте. */
.solband__pic--lift{
  width:87.5%; height:auto; max-width:none;
  /* холст уходит за правый край плитки, но не до самого её среза: 52 %, а не
     60 %, — снимок отступает от края примерно на ширину правого поля плитки,
     то есть встаёт по той же линии, что и текст слева */
  right:-52%;
}

/* текст не должен заезжать на снимок */
.solbands--sec .solband__title{ max-width:min(520px, 62%); }
.solbands--sec .solband__note{ max-width:56%; }

@media (max-width:1023px){
  .solband__pic{ height:46%; max-width:44%; }
  .solbands--sec .solband__title{ max-width:64%; }
  .solbands--sec .solband__note{ max-width:60%; }
}
/* на телефоне плитка узкая: снимок отобрал бы у текста последнюю строку */
@media (max-width:600px){
  .solband__pic{ display:none; }
  .solbands--sec .solband__title,
  .solbands--sec .solband__note{ max-width:none; }
}
/* Плитки крупнее карточек соседних блоков, и общий шаг в 26–50px их к
   вступлению приклеивал. Берём шаг поля самой плиты — тогда воздух над
   плитками равен воздуху над заголовком. */
.solbands--sec{ margin-top:clamp(34px, 3.9vw, 68px); }

@media (prefers-reduced-motion:reduce){
  .solband__more::after{ transition:none; }
  .solband__link:hover .solband__more::after{ transform:none; }
}


/* =========================================================
   АКЦЕНТНАЯ ПОЛОСА — как подбирается конфигурация
   Во всю ширину, на той же синей заливке, что и блок заявки, чтобы полоса
   читалась как вывод, а не как ещё одна секция.
   ========================================================= */
.secaccent{
  position:relative;
  --bleed-ml:calc(50% - var(--vw, 100vw) / 2);
  width:var(--vw, 100vw);
  max-width:var(--vw, 100vw);
  margin-left:var(--bleed-ml);
  margin-right:0;
  margin-top:clamp(44px, 5.2vw, 90px);
  padding-top:clamp(40px, 4.3vw, 74px);
  padding-bottom:clamp(40px, 4.3vw, 74px);
  color:var(--text-inv);
  background:
    radial-gradient(68% 138% at 72% 154%,
      rgba(0, 223, 203, .34) 0%,
      rgba(0, 223, 203, .34) 58%,
      rgba(0, 223, 203, 0) 100%),
    linear-gradient(179deg, var(--b-700) 40%, var(--b-550) 100%);
  overflow:hidden;
}
/* Две колонки, как в схеме архитектуры: слева цепочка подбора, справа
   заголовок и текст. Пропорция та же, что у .secmap__grid, — чтобы два
   блока страницы стояли на одной сетке. В разметке копия идёт первой, а
   на место её ставит сетка, поэтому порядок чтения остаётся прямым. */
.secaccent__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap:clamp(24px, 3.4vw, 58px);
  /* Копия встаёт по середине схемы: заголовок с двумя абзацами вдвое ниже
     рисунка, и по верхнему краю под ним оставалась бы пустая колонка. */
  align-items:center;
}
.secaccent__copy{ grid-column:2; grid-row:1; }
.secaccent__grid .secaccent__pic{ grid-column:1; grid-row:1; }
.secaccent__pic{ margin:0; }

.secaccent__claim{
  font-size:clamp(22px, 2.4vw, 40px);
  font-weight:500; line-height:1.2; letter-spacing:-.03em;
  color:var(--text-inv);
}
.secaccent__lead{
  /* заголовок здесь крупный, и прежние 26px читались как слипание: первый
     абзац отбиваем заметнее, между собой абзацы остаются ближе */
  margin-top:clamp(24px, 2.6vw, 44px);
  font-size:15px; font-weight:500; line-height:1.6;
  color:var(--text-inv-soft);
}
.secaccent__lead + .secaccent__lead{ margin-top:clamp(10px, 1vw, 16px); }

.secaccent__subtitle{
  margin-top:clamp(34px, 3.7vw, 64px);
  font-size:15px; font-weight:700; letter-spacing:-.02em;
  color:var(--text-inv);
}
/* та же сетка карточек, но на синем: плиты полупрозрачные, а разделителем
   служит не заливка сетки, а собственная обводка карточки */
.secaccent .secgrid{
  margin-top:clamp(16px, 1.6vw, 26px);
  gap:10px;
  background:none;
  box-shadow:none;
}
.secaccent .secgrid__item{
  background:rgb(255 255 255 / .1);
}
.secaccent .secgrid__name{ color:var(--text-inv); }
.secaccent .secgrid__text{ color:var(--text-inv-soft); }

.secaccent__note{
  max-width:900px;
  margin-top:clamp(24px, 2.6vw, 44px);
  padding-left:clamp(14px, 1.4vw, 24px);
  border-left:1px solid rgb(255 255 255 / .4);
  font-size:14px; font-weight:500; line-height:1.55;
  color:var(--text-inv-soft);
}
.secaccent__acts{ margin-top:clamp(24px, 2.6vw, 44px); }
.secaccent__acts .btn--light{ height:48px; min-width:180px; padding:0 26px; font-size:12px; }

@media (max-width:1023px){
  /* колонка одна — копия сверху, цепочка под ней, как она и лежит в разметке */
  .secaccent__grid{ grid-template-columns:minmax(0, 1fr); }
  .secaccent__copy,
    .secaccent__grid .secaccent__pic{ grid-column:1; grid-row:auto; }
}
@media (max-width:767px){
  .secaccent__acts .btn--light{ width:100%; }
}


/* ---- вторая кнопка рядом с отправкой формы ---- */
.leadform__second{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:48px;
  margin-top:12px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--text-inv);
  background:transparent;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .55);
  transition:background .18s ease;
}
.leadform__second:hover{ background:rgb(255 255 255 / .12); }
.leadform__types{
  margin-top:14px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--text-inv-note);
}