/* Основной цвет сайта задаёт навигация: кнопки, плашки и тёмные блоки берут его отсюда */
:root{--mrs-ink:#203832;--mrs-ink-hover:#42655b;--mrs-ink-soft:#dfe9e3}
/* A single asset-ready entrance replaces competing photo and page transitions. */
html.motion-on .home-page .hero-photo{animation:none;clip-path:none}
html.motion-on .reveal-item{transition:opacity 900ms var(--ease-out),transform 1100ms var(--ease-out)!important}
html:active-view-transition::view-transition-old(root),html:active-view-transition::view-transition-new(root){animation:none}
@view-transition{navigation:none}
@media(prefers-reduced-motion:reduce){html.entry-pending body{opacity:1}html.motion-on .reveal-item{transition:none!important}}
/* Fact layout studies, available only through ?facts=1|2|3. */
.facts-picker{position:fixed;bottom:14px;right:20px;z-index:50;display:flex;align-items:center;gap:6px;padding:7px;border:1px solid #cdd5d0;background:#fff;color:var(--mrs-ink);border-radius:30px;box-shadow:0 5px 30px #0002;font-size:12px}
.facts-picker>span{padding:0 10px;color:#64716a}
.facts-picker a{padding:9px 12px;border-radius:22px}
.facts-picker a[aria-current]{background:var(--mrs-ink);color:white}
.home-page[data-facts] .hero-foot{border-top:0;text-align:left;align-items:start}
.home-page[data-facts] .hero-foot .metric span{margin:12px 0 0;text-wrap:balance}
.home-page[data-facts] .hero-foot .metric strong{font-size:clamp(32px,3.5vw,56px);line-height:1.1}
.home-page[data-facts="1"] .hero-foot{display:flex;justify-content:flex-start;gap:clamp(36px,6vw,100px);padding-top:24px;padding-bottom:18px}
.home-page[data-facts="1"] .hero-foot .metric{flex:0 1 auto}
.home-page[data-facts="1"] .hero-foot .metric span{max-width:230px;font-size:14px}
.home-page[data-facts="2"] .hero-foot{grid-template-columns:1fr 1.5fr 1fr;gap:0;border-top:1px solid #ffffff50;padding-top:28px;padding-bottom:18px}
.home-page[data-facts="2"] .hero-foot .metric{padding:0 36px;border-left:1px solid #ffffff50}
.home-page[data-facts="2"] .hero-foot .metric:first-child{padding-left:0;border-left:0}
.home-page[data-facts="3"] .hero-foot{grid-template-columns:1fr 1.5fr 1fr;gap:36px;padding:24px 0 18px;border-top:1px solid #ffffff50}
.home-page[data-facts="3"] .hero-foot .metric{display:flex;align-items:center;gap:20px}
.home-page[data-facts="3"] .hero-foot .metric strong{font-size:clamp(28px,3vw,48px)}
.home-page[data-facts="3"] .hero-foot .metric span{margin:0;max-width:150px;font-size:13px;line-height:1.5}
@media(max-width:1000px){.home-page[data-facts="3"] .hero-foot{gap:20px}.home-page[data-facts="3"] .hero-foot .metric{flex-direction:column;align-items:flex-start;gap:12px}}
@media(max-width:650px){
 .facts-picker{left:10px;right:10px;bottom:10px;justify-content:center;font-size:10px;gap:0}.facts-picker>span{display:none}.facts-picker a{padding:9px}
 .home-page[data-facts] .hero-foot{padding-bottom:46px}
 .home-page[data-facts="1"] .hero-foot{flex-wrap:wrap;gap:24px 32px}.home-page[data-facts="1"] .hero-foot .metric{flex:1 1 120px}
 .home-page[data-facts="2"] .hero-foot{grid-template-columns:1fr;gap:18px}.home-page[data-facts="2"] .hero-foot .metric{padding:0 0 18px;border-left:0;border-bottom:1px solid #ffffff30}
 .home-page[data-facts="3"] .hero-foot{grid-template-columns:1fr;gap:24px}.home-page[data-facts="3"] .hero-foot .metric{flex-direction:row;align-items:center;justify-content:space-between}.home-page[data-facts="3"] .hero-foot .metric span{width:140px}
}

/* Persistent navigation layer for transitions between server-rendered pages. */
@view-transition{navigation:auto}
body>header{view-transition-name:mrs-header}
body>main{view-transition-name:mrs-page}
body>header .header nav a[aria-current="page"]{view-transition-name:mrs-active-nav;position:relative;border-bottom:0!important}
::view-transition-old(mrs-header),::view-transition-new(mrs-header){animation:none}
::view-transition-group(mrs-header){animation:nav-shell-settle 560ms cubic-bezier(.22,1,.36,1)}
::view-transition-old(mrs-page){animation:page-content-out 320ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(mrs-page){animation:page-content-in 620ms cubic-bezier(.22,1,.36,1) both}
::view-transition-old(mrs-active-nav){animation:nav-active-out 260ms ease both}
::view-transition-new(mrs-active-nav){animation:nav-active-in 500ms cubic-bezier(.22,1,.36,1) both}
body>header .header nav a[aria-current="page"]:after{content:'';position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:2px;background:currentColor;transform-origin:left center;animation:nav-underline-in 520ms cubic-bezier(.22,1,.36,1) both}
@keyframes nav-shell-settle{from{opacity:.97}to{opacity:1}}
@keyframes page-content-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes page-content-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes nav-active-out{to{opacity:.86}}
@keyframes nav-active-in{from{opacity:.86}to{opacity:1}}
@keyframes nav-underline-in{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.7}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(mrs-header),::view-transition-old(mrs-page),::view-transition-new(mrs-page),::view-transition-old(mrs-active-nav),::view-transition-new(mrs-active-nav){animation:none}
  body>header .header nav a[aria-current="page"]:after{animation:none}
}

/* Client-side page swaps keep this exact header node alive.  The capsules
   interpolate their theme instead of being replaced during navigation. */
body>header .header .logo,
body>header .header nav,
body>header .header .menu{
  transition:
    background-color 760ms cubic-bezier(.22,1,.36,1),
    color 760ms cubic-bezier(.22,1,.36,1),
    border-color 760ms cubic-bezier(.22,1,.36,1),
    box-shadow 760ms cubic-bezier(.22,1,.36,1) !important;
}
body>header .header .brand-name,
body>header .header nav a,
body>header .header .menu{
  transition:color 760ms cubic-bezier(.22,1,.36,1) !important;
}

/* The main element is the only thing replaced by prototype.js. */
body>main.mrs-page-leave{
  animation:mrs-page-leave 260ms cubic-bezier(.4,0,1,1) both;
  pointer-events:none;
}
body>main.mrs-page-enter{
  opacity:0;
  transform:translateY(18px);
}
body>main.mrs-page-enter-ready{
  animation:mrs-page-enter 700ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes mrs-page-leave{to{opacity:0;transform:translateY(-10px)}}
@keyframes mrs-page-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  body>main.mrs-page-leave,body>main.mrs-page-enter-ready{animation:none}
  body>main.mrs-page-enter{opacity:1;transform:none}
  body>header .header .logo,body>header .header nav,body>header .header .menu,
  body>header .header .brand-name,body>header .header nav a{transition:none!important}
}

/* Navigation interaction: weight on hover, one shared animated active line. */
body>header .header nav{position:relative}
body>header .header nav a,
body>header .header nav a:hover{ text-decoration:none!important; border-bottom:0!important }
body>header .header nav a{font-weight:400;-webkit-text-stroke:0 transparent;transition:-webkit-text-stroke-width 240ms cubic-bezier(.22,1,.36,1),color 760ms cubic-bezier(.22,1,.36,1)!important}
body>header .header nav a:hover{-webkit-text-stroke:.18px currentColor}
body>header .header nav a[aria-current="page"]{font-weight:500}
body>header .header nav a[aria-current="page"]:after{display:none!important}
body>header .header nav .nav-active-indicator{position:absolute;left:0;bottom:12px;height:2px;width:0;border-radius:999px;background:currentColor;opacity:.72;pointer-events:none;transform:translateX(0);transition:transform 520ms cubic-bezier(.22,1,.36,1),width 420ms cubic-bezier(.22,1,.36,1),opacity 220ms ease}
body>header .header nav:not(:has(a[aria-current="page"])) .nav-active-indicator{opacity:0}
@media(max-width:1000px){body>header .header nav .nav-active-indicator{bottom:8px}}
@media(prefers-reduced-motion:reduce){body>header .header nav a{transition:none!important}body>header .header nav .nav-active-indicator{transition:none}}

/* Continuous contrast interpolation while a capsule crosses light and dark sections. */
body>header .header nav,body>header .header .menu{background:var(--capsule-bg);color:var(--capsule-fg);border-color:var(--capsule-border);transition:background-color 180ms linear,color 180ms linear,border-color 180ms linear,box-shadow 180ms linear}
body>header .header .logo .brand-name,body>header .header nav a,body>header .header .menu{color:var(--capsule-fg)}
body>header .header .logo,body>header .header nav,body>header .header .menu{background:var(--capsule-bg)!important;color:var(--capsule-fg)!important;border-color:var(--capsule-border)!important}
body>header .header .logo .brand-name,body>header .header nav a,body>header .header .menu{color:var(--capsule-fg)!important}
/* Two floating capsules: brand and primary navigation. */
.header .logo .brand-name,.header nav a,.header .menu{text-transform:uppercase}
.header nav{font-size:13px}
.home-page .hero-foot{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;text-align:center}
.home-page .hero-foot .metric{min-width:0}
.home-page .hero-foot .metric strong{white-space:nowrap}
.home-page .hero-foot .metric span{max-width:320px;margin:12px auto 0;text-wrap:balance}
@media(max-width:650px){
 .home-page .hero-foot{grid-template-columns:1fr;gap:20px;padding-top:24px}
 .home-page .hero-foot .metric strong{font-size:32px}
 .home-page .hero-foot .metric span{font-size:13px;margin-top:6px}
}
.header .brand-symbol{display:block;position:relative;flex:0 0 54px;width:54px;height:58px;overflow:hidden}
.brand-symbol img{position:absolute;left:0;top:0;display:block;width:200px;height:58px;max-width:none}
.header .logo .brand-name{color:#111;font-family:MRS,Arial,sans-serif;font-weight:400;letter-spacing:-.02em}
.header .brand-symbol img{filter:grayscale(1) brightness(.6) contrast(8)}
.header .logo .brand-symbol{display:none}
body>header .header .logo,body>header .header nav,body>header .header .menu{border:1px solid rgba(17,17,17,.28);box-shadow:0 4px 18px rgba(0,0,0,.09)}
.home-page .hero h1{font-weight:400;letter-spacing:normal;line-height:1.18;font-size:clamp(40px,5.8vw,96px);font-kerning:normal}
.home-page .hero h1 .word-mask{overflow:visible;padding:0;margin:0;vertical-align:baseline}
.home-page .hero h1 .word-inner{padding-right:0}
.home-page .hero-photo img{transform:scale(1);transform-origin:58% 52%;animation:hero-slow-zoom 32s ease-in-out infinite alternate}
@keyframes hero-slow-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
html.motion-off .hero-photo img{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){.home-page .hero-photo img{animation:none;transform:none}}
.home-page>header .header .logo,.home-page>header .header nav,.home-page>header .header .menu{background:var(--mrs-ink);color:#fff;border-color:#ffffff55;transition:background-color 700ms var(--ease-in-out),color 700ms var(--ease-in-out),border-color 700ms var(--ease-in-out),box-shadow 700ms var(--ease-in-out)}
.home-page>header .header .logo .brand-name,.home-page>header .header nav a,.home-page>header .header .menu{color:#fff;transition:color 700ms var(--ease-in-out)}
.home-page>header.nav-light .header .logo,.home-page>header.nav-light .header nav,.home-page>header.nav-light .header .menu{background:#fff;color:#111;border-color:#1114;box-shadow:0 4px 22px #00000012}
.home-page>header.nav-light .header .logo .brand-name,.home-page>header.nav-light .header nav a,.home-page>header.nav-light .header .menu{color:#111}
@media(max-width:650px){.home-page .hero h1{font-size:clamp(32px,8.5vw,52px);line-height:1.2}.header .brand-symbol{flex-basis:36px;width:36px;height:39px}.brand-symbol img{width:134px;height:39px}}
body>header{position:sticky;top:0;z-index:30;background:transparent;border:0;pointer-events:none;--capsule-dark:1;--capsule-bg:color-mix(in srgb,var(--mrs-ink) calc(var(--capsule-dark)*100%),#fff);--capsule-fg:color-mix(in srgb,#fff calc(var(--capsule-dark)*100%),var(--mrs-ink));--capsule-border:color-mix(in srgb,#ffffff88 calc(var(--capsule-dark)*100%),#1114)}
body>header .header{width:calc(100% - 48px);max-width:1800px;height:100px;gap:24px;pointer-events:none}
.header .logo{display:flex;align-items:center;gap:18px;flex-shrink:0;background:var(--capsule-bg);border-radius:100px;padding:0 28px;height:68px;color:var(--capsule-fg);pointer-events:auto;box-shadow:0 4px 24px #1429230a;transition:background-color 180ms linear,color 180ms linear,border-color 180ms linear,box-shadow 180ms linear}
.brand-mark{font-family:Arial,sans-serif;font-size:38px;font-weight:900;letter-spacing:-2px;line-height:1}
.header .brand-name{font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--mrs-ink)}
.header nav{height:68px;padding:0 30px;gap:26px;border-radius:100px;background:#fff;box-shadow:0 4px 24px #1429230a;font-size:15px;pointer-events:auto}
.header nav a{white-space:nowrap;padding:12px 0}
.home-page>header{margin-bottom:-100px}
.home-page .hero{min-height:100svh;padding-top:160px;gap:50px}
.home-page .hero-photo:after{background:linear-gradient(180deg,rgba(15,32,31,.34),rgba(15,32,31,.28) 45%,rgba(15,32,31,.76))}
.home-page .hero-photo img{object-position:center center}
@media(max-width:1200px){
 .header .logo{gap:12px;padding:0 22px}.header .brand-name{font-size:14px}
 .header nav{gap:17px;padding:0 22px;font-size:13px}
}
@media(max-width:1000px){
 body>header .header{height:88px;width:calc(100% - 32px);gap:12px}
 .header .logo{height:60px;padding:0 20px}.brand-mark{font-size:32px}
 .header .menu{display:block;border:0;border-radius:100px;background:white;color:var(--mrs-ink);height:60px;padding:0 26px;pointer-events:auto;font-size:15px}
 .header nav{display:none;position:absolute;top:82px;left:auto;right:16px;width:min(340px,calc(100% - 32px));height:auto;max-height:calc(100svh - 100px);overflow:auto;border-radius:26px;padding:18px 26px;font-size:16px}
 .header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .header nav a{display:flex;align-items:center;min-height:46px}
 .home-page>header{margin-bottom:-88px}.home-page .hero{padding-top:130px}
}
@media(max-width:650px){
 body>header .header{width:calc(100% - 24px);height:80px;gap:8px}
 .header .logo{height:54px;padding:0 14px;gap:9px}.brand-mark{font-size:28px}.header .brand-name{font-size:12px}
 .header .menu{height:54px;padding:0 18px;font-size:13px}
 .header nav{top:74px;right:12px}
 .home-page>header{margin-bottom:-80px}.home-page .hero{padding-top:118px;min-height:100svh;gap:36px}
 .home-page .hero-photo img{object-position:58% center}
}
