/*
 * Prominvest compact desktop patch.
 * Keeps the three-screen homepage stable on small desktop/notebook viewports
 * without changing the existing mobile layout.
 */

/* The factory photo must always keep its native proportions. */
.screen1__hero .hero__media{
  min-height:0 !important;
}

.screen1__hero .hero__image{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Home footer is already a part of the third screen; its generic page margin
   used to consume valuable height and push blocks into each other. */
.screen3__footer .footer{
  margin-top:0 !important;
}

/* Native smooth scrolling and mandatory snap can fight each other in Chromium.
   The companion JS performs one deterministic animation per wheel/key action. */
@media (min-width:981px) and (min-height:601px){
  .fullpage{
    scroll-behavior:auto !important;
    overscroll-behavior:contain;
  }

  .screen{
    contain:layout paint;
  }
}


/* Wide but very short notebook windows must stay in desktop full-page mode.
   The original max-height:600 rule switched them to the mobile document flow,
   which is why wheel navigation disappeared. Phones/tablets are unaffected
   because this override starts only at 981 CSS pixels. */
@media (min-width:981px) and (min-height:500px) and (max-height:600px){
  .app--home{
    height:100vh !important;
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .main--home{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .fullpage{
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scroll-snap-type:y mandatory !important;
  }

  .screen{
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
  }

  .screen1,
  .screenScope,
  .screen3{
    height:100% !important;
    overflow:hidden !important;
  }

  .screen1__spacer{
    display:block !important;
  }

  .screenControls{
    display:flex !important;
  }
}

/* Compact desktop: 1366x768 class notebooks, browser content areas reduced by
   Windows scaling, and resolutions down to 1024x768. */
@media (min-width:981px) and (max-width:1440px),
       (min-width:981px) and (max-height:820px){
  .container{
    max-width:1120px;
  }

  /* Header */
  .header__inner{
    gap:14px !important;
    padding:7px 18px 6px !important;
  }

  .brand{
    flex-basis:240px !important;
    min-width:240px !important;
  }

  .brand__logo{
    width:228px !important;
    height:46px !important;
  }

  .nav{
    gap:2px !important;
  }

  .nav__link{
    padding:8px 8px !important;
    border-radius:10px !important;
    font-size:13px !important;
  }

  .header__actions{
    flex-basis:250px !important;
    min-width:250px !important;
    gap:8px !important;
  }

  .header__themeBtn{
    padding:9px 11px !important;
    font-size:13px !important;
  }

  .header__callBtn{
    height:42px !important;
    padding:0 18px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  /* Screen 1 */
  .screen1__hero .hero{
    padding:10px 0 4px !important;
  }

  .screen1__hero .hero__inner{
    grid-template-columns:minmax(0, 1.18fr) minmax(280px, .82fr) !important;
    gap:clamp(16px, 2vw, 28px) !important;
  }

  .screen1__hero .hero__left{
    padding:2px 0 !important;
  }

  .screen1__hero .h1{
    font-size:clamp(28px, 3vw, 38px) !important;
    line-height:1.06 !important;
  }

  .screen1__hero .p{
    margin-top:10px !important;
    margin-bottom:0 !important;
    font-size:13px !important;
    line-height:1.38 !important;
  }

  .screen1__hero .hero__actions{
    margin-top:10px !important;
  }

  .screen1__hero .hero__right{
    min-height:0 !important;
    max-height:190px !important;
    padding:10px !important;
    align-self:center !important;
  }

  .screen1__hero .hero__panel,
  .screen1__hero .hero__media{
    height:100% !important;
  }

  .screen1__work{
    width:min(1120px, calc(100% - 36px)) !important;
    max-width:1120px !important;
    padding:4px 0 8px !important;
  }

  .stepsShowcase__head{
    grid-template-columns:minmax(0, .92fr) minmax(300px, 1.08fr) !important;
    gap:22px !important;
    margin-bottom:8px !important;
  }

  .stepsShowcase__title{
    font-size:30px !important;
    line-height:1.04 !important;
  }

  .stepsShowcase__lead{
    padding-top:3px !important;
    font-size:12.5px !important;
    line-height:1.38 !important;
  }

  .stepsShowcase__panel{
    border-radius:18px !important;
  }

  .stepsShowcase__item{
    min-height:114px !important;
    padding:11px 12px !important;
  }

  .stepsShowcase__number{
    width:40px !important;
    height:40px !important;
    margin-bottom:7px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .stepsShowcase__itemTitle{
    font-size:13.5px !important;
    line-height:1.16 !important;
  }

  .stepsShowcase__itemText{
    margin-top:4px !important;
    font-size:11.5px !important;
    line-height:1.3 !important;
  }

  /* Screen 2 */
  .companyAbout{
    padding:18px 0 !important;
  }

  .companyAbout__head{
    grid-template-columns:minmax(0, .92fr) minmax(300px, 1.08fr) !important;
    gap:22px !important;
    margin-bottom:12px !important;
  }

  .companyAbout__title{
    font-size:32px !important;
    line-height:1.04 !important;
  }

  .companyAbout__lead{
    font-size:12.5px !important;
    line-height:1.4 !important;
  }

  .companyAbout__panel{
    border-radius:18px !important;
  }

  .companyAbout__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  }

  .aboutItem{
    min-height:126px !important;
    padding:12px 9px !important;
    border-right:1px solid var(--line) !important;
    border-bottom:0 !important;
  }

  .aboutItem:last-child{
    border-right:0 !important;
  }

  .aboutItem__icon{
    width:44px !important;
    height:44px !important;
    margin-bottom:8px !important;
    border-radius:12px !important;
  }

  .aboutItem__title{
    min-height:0 !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
  }

  /* Screen 3 */
  .screen3__top{
    align-items:center !important;
    overflow:hidden !important;
  }

  .screen3__top .sec{
    padding:18px 0 12px !important;
  }

  .screen3__top .head{
    margin-bottom:12px !important;
  }

  .screen3__top .title{
    font-size:34px !important;
    line-height:1.04 !important;
  }

  .screen3__top .card,
  .screen3__top .skeletonCard{
    height:120px !important;
  }

  .screen3__top .name{
    font-size:15px !important;
  }

  .screen3__footer .footer{
    margin-top:0 !important;
    padding:16px 0 11px !important;
  }

  .screen3__footer .footer__grid{
    gap:0 28px !important;
  }

  .screen3__footer .footer__title,
  .screen3__footer .footer__brandTitle{
    margin-bottom:7px !important;
    font-size:15px !important;
  }

  .screen3__footer .footer__brandSub,
  .screen3__footer .footer__muted,
  .screen3__footer .footer__link{
    font-size:11.5px !important;
  }

  .screen3__footer .footer__link{
    padding:4px 0 !important;
  }

  .screen3__footer .footer__copyright{
    margin-top:7px !important;
  }

  .screen3__footer .footer__bottom{
    margin-top:10px !important;
  }

  .screen3__footer .footer__requisites{
    margin-top:7px !important;
    font-size:10.5px !important;
  }

  .screen3__footer .footer__creatorLogo{
    width:19px !important;
    height:19px !important;
    flex-basis:19px !important;
  }

  .screenControls{
    right:18px !important;
    bottom:14px !important;
  }

  .scrollControl{
    padding:8px 10px !important;
  }

  .scrollControl__mouse{
    width:19px !important;
    height:29px !important;
    flex-basis:19px !important;
  }

  .scrollControl__text{
    font-size:10px !important;
  }
}

/* Extra fit for very short desktop windows. */
@media (min-width:981px) and (max-height:700px){
  .screen1__hero .hero{
    padding-top:6px !important;
  }

  .screen1__hero .h1{
    font-size:27px !important;
  }

  .screen1__hero .p{
    font-size:12px !important;
  }

  .screen1__hero .hero__right{
    max-height:150px !important;
  }

  .stepsShowcase__title,
  .companyAbout__title{
    font-size:27px !important;
  }

  .stepsShowcase__item{
    min-height:98px !important;
    padding:8px 10px !important;
  }

  .stepsShowcase__number{
    width:34px !important;
    height:34px !important;
    margin-bottom:5px !important;
  }

  .stepsShowcase__itemText{
    font-size:10.5px !important;
  }

  .aboutItem{
    min-height:104px !important;
    padding:9px 7px !important;
  }

  .aboutItem__icon{
    width:38px !important;
    height:38px !important;
    margin-bottom:6px !important;
  }

  .screen3__top .card,
  .screen3__top .skeletonCard{
    height:104px !important;
  }

  .screen3__footer .footer{
    padding:11px 0 8px !important;
  }
}

/* 1024px desktop header: keep one line instead of wrapping/overlapping. */
@media (min-width:981px) and (max-width:1120px){
  .header__inner{
    gap:9px !important;
  }

  .brand{
    flex-basis:202px !important;
    min-width:202px !important;
  }

  .brand__logo{
    width:194px !important;
    height:42px !important;
  }

  .nav__link{
    padding:7px 5px !important;
    font-size:11.5px !important;
  }

  .header__actions{
    flex-basis:228px !important;
    min-width:228px !important;
    gap:6px !important;
  }

  .header__themeBtn{
    padding:8px 8px !important;
    font-size:11.5px !important;
  }

  .header__callBtn{
    height:39px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .screen1__hero .hero__inner{
    grid-template-columns:minmax(0, 1.22fr) minmax(250px, .78fr) !important;
  }
}

/* ===== REVISION 2: proportional hero photo + true vertical centering =====
   On 1366x768 the browser's usable content area is often exactly 600px high.
   The original low-height fallback enabled a flexible spacer below the content,
   which consumed all free height and visually pinned the composition to the top. */
@media (min-width:981px) and (max-width:1800px),
       (min-width:981px) and (max-height:940px){
  .screen--first > .screen1{
    height:100% !important;
    min-height:100% !important;
    justify-content:center !important;
    align-content:center !important;
  }

  .screen--first > .screen1 > .screen1__spacer{
    display:none !important;
    flex:0 0 0 !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
  }

  .screen--first > .screen1 > .screen1__work{
    margin-top:0 !important;
  }
}

/* The source photo is 4:3. Keep both the card and the image close to this
   proportion instead of squeezing the same photo into a panoramic slot. */
@media (min-width:981px) and (max-width:1800px){
  .screen--first .screen1__hero .hero__inner{
    grid-template-columns:minmax(0, 1fr) clamp(300px, 22.5vw, 360px) !important;
    align-items:center !important;
  }

  .screen--first .screen1__hero .hero__right{
    box-sizing:border-box !important;
    width:clamp(300px, 22.5vw, 360px) !important;
    height:auto !important;
    min-height:0 !important;
    max-width:360px !important;
    max-height:none !important;
    aspect-ratio:4 / 3 !important;
    justify-self:end !important;
    align-self:center !important;
  }

  .screen--first .screen1__hero .hero__right .hero__panel,
  .screen--first .screen1__hero .hero__right .hero__media{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
  }

  .screen--first .screen1__hero .hero__right .hero__media > img.hero__image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}

@media (min-width:981px) and (max-width:1120px){
  .screen--first .screen1__hero .hero__inner{
    grid-template-columns:minmax(0, 1fr) 300px !important;
  }

  .screen--first .screen1__hero .hero__right{
    width:300px !important;
    max-width:300px !important;
  }
}

/* ===== REVISION 3: centre the second screen in short desktop viewports =====
   The source stylesheet treats every viewport up to 600px high as a mobile
   document, even when its width is 1366px. Restore the desktop flex container
   so the compact "About company" composition occupies the visual centre. */
@media (min-width:981px) and (min-height:500px) and (max-height:600px){
  .screen--scope{
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
  }

  .screen--scope > .screenScope{
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .screen--scope > .screenScope > .companyAbout{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 auto !important;
  }
}

/* Mobile landscape is intentionally blocked. A normal website cannot forbid
   the operating system from rotating, so the page is replaced with a clear
   portrait-orientation screen whenever a touch device is held sideways. */
.portraitOnlyNotice{
  display:none;
}

html.portrait-only-landscape,
html.portrait-only-landscape body{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

html.portrait-only-landscape #app{
  display:none !important;
}

html.portrait-only-landscape .portraitOnlyNotice{
  position:fixed;
  inset:0;
  z-index:2147483647;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:28px;
  color:#f4f7fb;
  text-align:center;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,212,255,.14), transparent 38%),
    linear-gradient(145deg, #0c1728, #07101d 70%);
}

.portraitOnlyNotice__icon{
  position:relative;
  width:42px;
  height:68px;
  margin-bottom:6px;
  border:3px solid currentColor;
  border-radius:10px;
  transform:rotate(-90deg);
  animation:portraitOnlyTurn 1.6s ease-in-out infinite alternate;
}

.portraitOnlyNotice__icon::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  transform:translateX(-50%);
}

.portraitOnlyNotice__title{
  font-size:clamp(23px, 5vw, 34px);
  line-height:1.1;
  font-weight:900;
}

.portraitOnlyNotice__text{
  max-width:520px;
  color:#aebbd0;
  font-size:clamp(14px, 2.8vw, 18px);
  line-height:1.45;
}

@keyframes portraitOnlyTurn{
  to{ transform:rotate(0deg); }
}

@media (prefers-reduced-motion:reduce){
  .portraitOnlyNotice__icon{
    animation:none;
    transform:none;
  }
}

/* ===== REVISION 4: restore reference proportions on short desktop viewports =====
   At 1600x900 the 1120px composition has the correct proportions. When the
   usable browser height falls below ~720px (typical 1366x768 notebook), keeping
   the same width makes the whole first screen look horizontally stretched.
   The width therefore follows viewport height (154vh), preserving the same
   visual aspect ratio while leaving 1600x900 and larger layouts untouched. */
@media (min-width:981px) and (max-height:722px){
  .header > .header__inner,
  .screen--first .hero__inner,
  .screen--first .screen1__work{
    box-sizing:border-box !important;
    width:calc(100% - 36px) !important;
    max-width:min(1120px, 154vh) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .screen--first .screen1__hero .hero__inner{
    grid-template-columns:minmax(0, 1fr) 300px !important;
  }

  .screen--first .screen1__hero .hero__right{
    width:300px !important;
    max-width:300px !important;
  }
}

/* ===== REVISION 8: centre and enlarge the logo in reveal animations =====
   The R7 logo file intentionally keeps a wide transparent canvas so that the
   header preserves its old dimensions. Its visible artwork occupies the left
   62.84% of that canvas, therefore centring the canvas itself makes the logo
   look shifted to the left. The stack is shifted by the measured difference
   between the canvas centre and the artwork centre. */
.introReveal__stack,
.themeReveal__stack{
  width:min(1280px, 84vw) !important;
  max-width:none !important;
  aspect-ratio:2048 / 294 !important;
  transform:translate3d(16.14%, 0, 0) !important;
  transform-origin:center center !important;
}

@media (max-width:640px){
  .introReveal__stack,
  .themeReveal__stack{
    width:min(620px, 110vw) !important;
    max-width:none !important;
    aspect-ratio:2048 / 294 !important;
    transform:translate3d(16.14%, 0, 0) !important;
  }
}

/* ===== REVISION 9: larger header logo, two-row mobile header, full intro cover ===== */

/* The logo files used by the reveal animation have a deliberately wide
   transparent canvas. For the header use cropped, cache-busted copies so the
   visible artwork can fill the available box without clipping any letters. */
.brand__logo{
  overflow:visible !important;
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:contain !important;
}

html[data-theme="dark"] .brand__logo{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}

.brand__logoImg{
  display:none !important;
}

/* More room is available beside the brand on desktop, so the visible logo may
   be enlarged without increasing the overall header height excessively. */
@media (min-width:1441px){
  .brand{
    flex-basis:360px !important;
    min-width:360px !important;
  }

  .brand__logo{
    width:342px !important;
    height:72px !important;
  }
}

@media (min-width:1121px) and (max-width:1440px),
       (min-width:1121px) and (max-height:820px){
  .brand{
    flex-basis:286px !important;
    min-width:286px !important;
  }

  .brand__logo{
    width:274px !important;
    height:60px !important;
  }
}

@media (min-width:981px) and (max-width:1120px){
  .brand{
    flex-basis:232px !important;
    min-width:232px !important;
  }

  .brand__logo{
    width:222px !important;
    height:50px !important;
  }
}

/* On phones the first row now contains the logo and both actions; navigation
   occupies the second row. This removes the previous three-row header. */
@media (max-width:640px){
  .header__inner{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "nav nav" !important;
    align-items:center !important;
    column-gap:7px !important;
    row-gap:7px !important;
    padding:8px 10px 7px !important;
  }

  .brand{
    grid-area:brand !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:none !important;
    align-self:center !important;
  }

  .brand__logo{
    width:clamp(150px, 48vw, 195px) !important;
    height:clamp(32px, 9.5vw, 42px) !important;
  }

  .header__actions{
    grid-area:actions !important;
    display:flex !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:none !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:4px !important;
  }

  .header__themeBtn,
  .header__callBtn{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    height:34px !important;
    padding:0 clamp(5px, 1.5vw, 8px) !important;
    border-radius:11px !important;
    font-size:clamp(8.5px, 2.35vw, 11px) !important;
    line-height:1 !important;
    letter-spacing:-.01em !important;
    white-space:nowrap !important;
  }

  .nav{
    grid-area:nav !important;
    order:initial !important;
    width:100% !important;
    margin:0 !important;
    padding-top:0 !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:clamp(2px, 1vw, 6px) !important;
  }

  .nav__link{
    min-width:0 !important;
    padding:7px clamp(5px, 2vw, 9px) !important;
    font-size:clamp(10px, 2.8vw, 13px) !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }
}

@media (max-width:360px){
  .header__inner{
    column-gap:4px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .brand__logo{
    width:150px !important;
    height:32px !important;
  }

  .header__themeBtn,
  .header__callBtn{
    height:32px !important;
    padding-left:4px !important;
    padding-right:4px !important;
    font-size:8.2px !important;
  }
}

/* The intro is positioned against the live visual viewport. A generous
   background overscan prevents a one-pixel/bottom strip from appearing while
   mobile browser chrome expands, collapses or changes safe-area geometry. */
.introReveal{
  position:absolute !important;
  inset:auto !important;
  top:var(--intro-reveal-top, 0px) !important;
  left:var(--intro-reveal-left, 0px) !important;
  right:auto !important;
  bottom:auto !important;
  width:var(--intro-reveal-width, 100vw) !important;
  height:var(--intro-reveal-height, 100vh) !important;
  min-width:0 !important;
  min-height:0 !important;
  box-sizing:border-box !important;
}

.introReveal::before{
  content:"";
  position:absolute;
  inset:-128px;
  z-index:-1;
  background:inherit;
  pointer-events:none;
}


/* ===== REVISION 10: new corporate logos, refined desktop header, unified mobile directions ===== */

.brand__logo{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
}

html[data-theme="dark"] .brand__logo{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}

@media (min-width: 861px){
  .header__inner{
    gap: 18px !important;
    padding: 9px 18px 8px !important;
  }

  .brand{
    flex: 0 0 320px !important;
    min-width: 320px !important;
  }

  .brand__logo{
    width: 302px !important;
    height: 64px !important;
  }

  .nav{
    justify-content: center !important;
    gap: 10px !important;
  }

  .nav__link{
    padding: 10px 14px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .header__actions{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .header__themeBtn{
    min-width: 136px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  .header__callBtn{
    height: 44px !important;
    padding: 0 20px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 1121px){
  .brand{
    flex-basis: 334px !important;
    min-width: 334px !important;
  }

  .brand__logo{
    width: 316px !important;
    height: 66px !important;
  }
}

@media (min-width: 1441px){
  .brand{
    flex-basis: 346px !important;
    min-width: 346px !important;
  }

  .brand__logo{
    width: 328px !important;
    height: 68px !important;
  }
}

@media (max-width: 640px){
  .directions-page__inner{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .directions-page .head{
    margin-bottom: 12px !important;
  }

  .directions-page .head .h2{
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }

  .directions-page .directions-grid{
    gap: 12px !important;
  }
}

@media (max-width: 420px){
  .directions-page .head .h2{
    font-size: 17px !important;
  }
}

/* ===== R10 HERO FULL-FIT: factory photo fully inside its framed card =====
   The outer card previously had a 4:3 ratio including its padding, so the
   actual inner image area was no longer 4:3. The source image is exactly 4:3.
   Give the media area that ratio instead and let the card wrap around it. */
.screen1__hero .hero__right{
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.screen1__hero .hero__panel{
  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.screen1__hero .hero__media{
  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:none !important;
  aspect-ratio:4 / 3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
}

.screen1__hero .hero__media > img.hero__image{
  display:block !important;
  flex:0 0 100% !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  transform:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}

@media (max-width:980px){
  .screen1__hero .hero__right{
    min-height:0 !important;
  }

  .screen1__hero .hero__media{
    min-height:0 !important;
  }
}


/* ===== R10 HERO FIX2: restore strong header logo sizes and one-line mobile header ===== */

/* Header logos: make them visibly larger and more premium on desktop. */
@media (min-width: 981px){
  .header__inner{
    gap: 16px !important;
    padding: 10px 18px 8px !important;
  }

  .brand{
    flex: 0 0 390px !important;
    min-width: 390px !important;
  }

  .brand__logo{
    width: 372px !important;
    height: 82px !important;
    background-position: left center !important;
    background-size: contain !important;
  }

  .nav{
    gap: 8px !important;
  }

  .nav__link{
    padding: 10px 13px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .header__actions{
    gap: 10px !important;
  }

  .header__themeBtn{
    min-width: 144px !important;
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  .header__callBtn{
    height: 44px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 981px) and (max-width: 1366px){
  .brand{
    flex-basis: 352px !important;
    min-width: 352px !important;
  }

  .brand__logo{
    width: 336px !important;
    height: 74px !important;
  }

  .nav__link{
    padding: 9px 11px !important;
    font-size: 13px !important;
  }

  .header__themeBtn{
    min-width: 134px !important;
    font-size: 13px !important;
  }

  .header__callBtn{
    padding: 0 18px !important;
    font-size: 13px !important;
  }
}

/* Intro / theme reveal logo: larger and exactly centered now that the logo
   asset is cropped. */
.introReveal,
.themeReveal{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.introReveal__stack,
.themeReveal__stack{
  width:min(1180px, 82vw) !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  transform:none !important;
  transform-origin:center center !important;
  margin:0 auto !important;
}

.introReveal__stack img,
.themeReveal__stack img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
}

@media (max-width: 640px){
  .introReveal__stack,
  .themeReveal__stack{
    width:min(92vw, 430px) !important;
    transform:none !important;
  }
}

/* Mobile header in one row: logo + 2 links + theme icon + phone icon. */
@media (max-width: 640px){
  .header__inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    padding:8px 8px 7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .header__inner::-webkit-scrollbar{
    display:none !important;
  }

  .brand{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    order:1 !important;
  }

  .brand__logo{
    width:128px !important;
    height:34px !important;
  }

  .nav{
    order:2 !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding-top:0 !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
  }

  .nav__link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
    padding:7px 9px !important;
    border-radius:11px !important;
    font-size:10.5px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  .header__actions{
    order:3 !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    margin-left:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-direction:row !important;
    gap:5px !important;
  }

  .header__themeBtn,
  .header__callBtn{
    flex:0 0 auto !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    padding:0 !important;
    border-radius:11px !important;
    font-size:18px !important;
    line-height:1 !important;
    justify-content:center !important;
  }
}

@media (max-width: 420px){
  .brand__logo{
    width:118px !important;
    height:32px !important;
  }

  .nav__link{
    padding:7px 8px !important;
    font-size:10px !important;
  }

  .header__themeBtn,
  .header__callBtn{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    font-size:17px !important;
  }

  .introReveal__stack,
  .themeReveal__stack{
    width:min(94vw, 360px) !important;
  }
}


/* ===== R10 HERO FIX3: readable desktop header, centered intro logo, compact one-line mobile header ===== */

.brand__logo{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:contain !important;
}

html[data-theme="dark"] .brand__logo{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}

.brand__logoImg{
  display:none !important;
}

@media (min-width: 981px){
  .header__inner{
    gap: 18px !important;
    padding: 10px 20px 8px !important;
  }

  .brand{
    flex: 0 0 270px !important;
    min-width: 270px !important;
  }

  .brand__logo{
    width: 252px !important;
    height: 52px !important;
  }

  .nav{
    gap: 10px !important;
    justify-content: center !important;
  }

  .nav__link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    border:1px solid var(--line) !important;
    background:transparent !important;
  }

  .nav__link.active{
    background: var(--surface-soft) !important;
  }

  .header__actions{
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
  }

  .header__themeBtn{
    min-width: 178px !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .header__callBtn{
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 981px) and (max-width: 1366px){
  .brand{
    flex-basis: 246px !important;
    min-width: 246px !important;
  }

  .brand__logo{
    width: 228px !important;
    height: 48px !important;
  }

  .nav__link{
    padding: 9px 13px !important;
    font-size: 13px !important;
  }

  .header__themeBtn{
    min-width: 160px !important;
    font-size: 13px !important;
  }

  .header__callBtn{
    padding: 0 20px !important;
    font-size: 13px !important;
  }
}

/* Re-center and enlarge intro/theme logo animation using tightly cropped logo assets. */
.introReveal,
.themeReveal{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.introReveal__stack,
.themeReveal__stack{
  width:min(920px, 70vw) !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  transform:none !important;
  margin:0 auto !important;
  position:relative !important;
  inset:auto !important;
}

.introReveal__stack img,
.themeReveal__stack img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}

@media (max-width: 640px){
  .header__inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px !important;
    padding:8px 6px 7px !important;
    overflow:hidden !important;
  }

  .brand{
    flex:0 0 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    order:1 !important;
  }

  .brand__logo{
    width:96px !important;
    height:24px !important;
  }

  .nav{
    order:2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    gap:4px !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  .nav__link{
    flex:0 1 auto !important;
    min-width:0 !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    font-size:9.8px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    border:1px solid var(--line) !important;
    background:transparent !important;
  }

  .nav__link.active{
    background:var(--surface-soft) !important;
  }

  .header__actions{
    order:3 !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
  }

  .header__themeBtn,
  .header__callBtn{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    padding:0 !important;
    border-radius:999px !important;
    font-size:16px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .introReveal__stack,
  .themeReveal__stack{
    width:min(84vw, 320px) !important;
  }
}

@media (max-width: 420px){
  .brand__logo{
    width:88px !important;
    height:22px !important;
  }

  .nav__link{
    padding:6px 6px !important;
    font-size:9px !important;
  }

  .header__themeBtn,
  .header__callBtn{
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    font-size:15px !important;
  }

  .introReveal__stack,
  .themeReveal__stack{
    width:min(88vw, 296px) !important;
  }
}


/* ===== R10 HERO FIX4: remove Home button and refine desktop theme pill ===== */

/* Hide the Home button in the header on all breakpoints. */
.header .nav a[href="/"],
.header .nav a[href="/index.html"],
.header .nav a[href="/p/home.html"],
.header .nav .nav__home-link{
  display:none !important;
}

@media (min-width: 981px){
  .header__inner{
    gap: 20px !important;
    padding: 10px 20px 8px !important;
  }

  .brand{
    flex: 0 0 282px !important;
    min-width: 282px !important;
  }

  .brand__logo{
    width: 262px !important;
    height: 54px !important;
  }

  .nav{
    gap: 12px !important;
    justify-content: center !important;
  }

  .nav__link{
    padding: 10px 16px !important;
    border-radius: 999px !important;
  }

  .header__actions{
    margin-left: auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .header__themeBtn{
    min-width: 138px !important;
    width: auto !important;
    max-width: none !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header__callBtn{
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
  }
}

@media (min-width: 981px) and (max-width: 1366px){
  .brand{
    flex-basis: 254px !important;
    min-width: 254px !important;
  }

  .brand__logo{
    width: 234px !important;
    height: 49px !important;
  }

  .nav{
    gap: 10px !important;
  }

  .nav__link{
    padding: 9px 14px !important;
    font-size: 13px !important;
  }

  .header__themeBtn{
    min-width: 126px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .header__callBtn{
    padding: 0 18px !important;
    font-size: 13px !important;
  }
}


/* ===== R10 HERO FIX5: stronger buttons, instant theme logo, full mobile overlays ===== */

/* All header controls are intentionally bolder and lifted from the background. */
.header .nav__link,
.header .header__themeBtn,
.header .header__callBtn{
  font-weight: 700 !important;
  text-rendering: geometricPrecision;
}

.header .nav__link,
.header .header__themeBtn{
  box-shadow:
    0 7px 18px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html[data-theme="light"] .header .nav__link,
html[data-theme="light"] .header .header__themeBtn{
  box-shadow:
    0 7px 18px rgba(31,45,61,.14),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.header .header__callBtn{
  box-shadow:
    0 9px 22px rgba(0,0,0,.24),
    0 3px 9px rgba(255,183,3,.20),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.header .nav__link:hover,
.header .header__themeBtn:hover,
.header .header__callBtn:hover{
  transform: translateY(-1px);
}

/* Give mobile navigation breathing room after the logo without causing scroll. */
@media (max-width:640px){
  .header .brand{
    margin-right: 8px !important;
  }

  .header .nav{
    gap: 3px !important;
  }

  .header .nav__link{
    font-weight: 700 !important;
  }

  .header .header__themeBtn,
  .header .header__callBtn{
    font-weight: 800 !important;
    box-shadow:
      0 6px 14px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
}

@media (max-width:380px){
  .header .brand{
    margin-right: 5px !important;
  }
}

/* The reveal class already contains the destination theme. Use that class
   directly so the correct black/white logo is painted before Vue switches the
   document theme 430 ms later. */
.introReveal--light .introReveal__part,
.themeReveal--light .themeReveal__part{
  content: url("/assets/prominvest-logo-light-r23.png") !important;
}

.introReveal--dark .introReveal__part,
.themeReveal--dark .themeReveal__part{
  content: url("/assets/prominvest-logo-dark-r23.png") !important;
}

/* Both Vue image layers currently contain the complete logo. Keep only one
   visual layer so it cannot look darker or briefly show the previous theme. */
.introReveal__part--top,
.themeReveal__part--top{
  visibility: hidden !important;
}

/* iOS visualViewport can briefly report a shorter height while browser chrome
   is moving. A fixed overscan background prevents the page from appearing at
   the bottom or sides during intro/theme transitions. */
.introReveal,
.themeReveal{
  overflow: visible !important;
}

.introReveal::before,
.themeReveal::before{
  content: "" !important;
  position: fixed !important;
  inset: -220px !important;
  z-index: -1 !important;
  background: inherit !important;
  pointer-events: none !important;
}

@media (max-width:640px){
  .introReveal,
  .themeReveal{
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
}

/* Feedback form: do not allow the underlying page to show around the dialog. */
.callModal{
  isolation: isolate !important;
  overflow: visible !important;
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.callModal::before{
  content: "";
  position: fixed;
  inset: -220px;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

@media (max-width:640px){
  .callModal{
    width: 100vw !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
  }
}


/* ===== R10 HERO FIX6: no shadows, minimal mobile icons, gap-proof overlays, hero fill ===== */

/* Home-page direction cards: flat, without drop shadows. */
.screen3__top .sec .grid > .card,
.screen3__top .sec .grid > .card:hover{
  box-shadow:none !important;
  filter:none !important;
}

/* Header buttons and navigation: keep borders, remove all shadows. */
.header .nav__link,
.header .header__themeBtn,
.header .header__callBtn,
.header .nav__link:hover,
.header .header__themeBtn:hover,
.header .header__callBtn:hover,
.header .nav__link:active,
.header .header__themeBtn:active,
.header .header__callBtn:active{
  box-shadow:none !important;
  filter:none !important;
}

/* Factory image fills the existing framed window; cropping is allowed. */
.screen1__hero .hero__right{
  padding:8px !important;
  overflow:hidden !important;
}

.screen1__hero .hero__panel{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.screen1__hero .hero__media{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:4 / 3 !important;
  border-radius:12px !important;
  overflow:hidden !important;
}

.screen1__hero .hero__media > img.hero__image{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  margin:0 !important;
}

/* Target theme controls the reveal logo before Vue changes data-theme. */
:root{
  --prominvest-theme-reveal-logo:url("/assets/prominvest-logo-light-r23.png");
  --prominvest-theme-reveal-bg:#d6dde5;
}

html[data-theme="dark"],
html.prominvest-theme-target-dark{
  --prominvest-theme-reveal-logo:url("/assets/prominvest-logo-dark-r23.png");
  --prominvest-theme-reveal-bg:#0b1220;
}

html.prominvest-theme-target-light{
  --prominvest-theme-reveal-logo:url("/assets/prominvest-logo-light-r23.png");
  --prominvest-theme-reveal-bg:#d6dde5;
}

.themeReveal__stack{
  background-image:var(--prominvest-theme-reveal-logo) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
}

.themeReveal__stack .themeReveal__part{
  visibility:hidden !important;
}

/* Extra fixed shield prevents the page from showing at the bottom or left edge. */
#prominvest-theme-shield{
  position:fixed !important;
  inset:-260px !important;
  z-index:2147482500 !important;
  background:var(--prominvest-theme-reveal-bg) !important;
  pointer-events:none !important;
  transform:translate3d(0,0,0) !important;
  -webkit-transform:translate3d(0,0,0) !important;
}

.themeReveal,
.introReveal{
  position:fixed !important;
  inset:-180px !important;
  top:-180px !important;
  right:-180px !important;
  bottom:-180px !important;
  left:-180px !important;
  width:auto !important;
  height:auto !important;
  min-width:calc(100vw + 360px) !important;
  min-height:calc(100lvh + 360px) !important;
  overflow:hidden !important;
}

/* Contact modal fully covers the page instead of showing it around the dialog. */
.callModal{
  position:fixed !important;
  inset:-180px !important;
  top:-180px !important;
  right:-180px !important;
  bottom:-180px !important;
  left:-180px !important;
  width:auto !important;
  height:auto !important;
  min-width:calc(100vw + 360px) !important;
  min-height:calc(100lvh + 360px) !important;
  background:var(--bg) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:hidden !important;
  isolation:isolate !important;
  z-index:2147483000 !important;
}

.callModal::before{
  content:"";
  position:fixed !important;
  inset:-300px !important;
  background:var(--bg) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}

@media (max-width:640px){
  .screen1__hero .hero__right{
    padding:6px !important;
  }

  /* Move navigation/actions slightly away from the logo without adding scrolling. */
  .header .nav{
    margin-left:8px !important;
  }

  /* Hide emoji/text glyphs and draw minimal monochrome site-style icons. */
  .header .header__themeBtn,
  .header .header__callBtn{
    font-size:0 !important;
    color:currentColor !important;
  }

  .header .header__themeBtn::before,
  .header .header__callBtn::before{
    content:"";
    display:block;
    width:16px;
    height:16px;
    background:currentColor;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
  }

  html:not([data-theme="dark"]) .header .header__themeBtn::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M20.5%2014.5A8.5%208.5%200%200%201%209.5%203.5a8.5%208.5%200%201%200%2011%2011Z%22%2F%3E%3C%2Fsvg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M20.5%2014.5A8.5%208.5%200%200%201%209.5%203.5a8.5%208.5%200%201%200%2011%2011Z%22%2F%3E%3C%2Fsvg%3E");
  }

  html[data-theme="dark"] .header .header__themeBtn::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M12%202v2M12%2020v2M4.93%204.93l1.42%201.42M17.65%2017.65l1.42%201.42M2%2012h2M20%2012h2M4.93%2019.07l1.42-1.42M17.65%206.35l1.42-1.42%22%2F%3E%3C%2Fsvg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M12%202v2M12%2020v2M4.93%204.93l1.42%201.42M17.65%2017.65l1.42%201.42M2%2012h2M20%2012h2M4.93%2019.07l1.42-1.42M17.65%206.35l1.42-1.42%22%2F%3E%3C%2Fsvg%3E");
  }

  .header .header__callBtn::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.2%203.5%2010%207.2%208.1%209.1a15.4%2015.4%200%200%200%206.8%206.8l1.9-1.9%203.7%202.8-1.2%203a2%202%200%200%201-2.1%201.2C9.9%2020%204%2014.1%203%206.8a2%202%200%200%201%201.2-2.1l3-1.2Z%22%2F%3E%3C%2Fsvg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.2%203.5%2010%207.2%208.1%209.1a15.4%2015.4%200%200%200%206.8%206.8l1.9-1.9%203.7%202.8-1.2%203a2%202%200%200%201-2.1%201.2C9.9%2020%204%2014.1%203%206.8a2%202%200%200%201%201.2-2.1l3-1.2Z%22%2F%3E%3C%2Fsvg%3E");
  }
}


/* ===== R10 HERO FIX7: new logos + directions mobile tweaks ===== */
.brand__logo{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:contain !important;
}

html[data-theme="dark"] .brand__logo,
html.prominvest-theme-target-dark .brand__logo{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}

html[data-theme="light"] .brand__logo,
html.prominvest-theme-target-light .brand__logo{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
}

/* Main page: replace big text CTA with small blue arrow button beside the title. */
.head .btn[href="/directions"],
.head .btn[href="/directions.html"]{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  padding:0 !important;
  border-radius:12px !important;
  gap:0 !important;
  justify-content:center !important;
  align-self:center !important;
}

.head .btn[href="/directions"] span:first-child,
.head .btn[href="/directions.html"] span:first-child{
  display:none !important;
}

.head .btn[href="/directions"] .btnIcon,
.head .btn[href="/directions.html"] .btnIcon{
  font-size:18px !important;
  line-height:1 !important;
}

@media (max-width:560px){
  .head{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .head .title{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
}

/* Mobile directions page: make card image area as tall and readable as on the home page. */
@media (max-width:768px){
  .directions-page .dir__img{
    height:150px !important;
  }
}

@media (max-width:480px){
  .directions-page .dir__img{
    height:150px !important;
  }
}


/* ===== R10 HERO FIX8: repair mobile callback form, simplify mobile icons, force new centered reveal logos ===== */

/* Force reveal animations to use the new centered logos via CSS backgrounds,
   independent from older JS/image sources. */
.introReveal__stack,
.themeReveal__stack{
  position:relative !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
}

.introReveal--light .introReveal__stack,
.themeReveal--light .themeReveal__stack{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
}

.introReveal--dark .introReveal__stack,
.themeReveal--dark .themeReveal__stack{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}

.introReveal__part,
.themeReveal__part{
  opacity:0 !important;
}

.introReveal__stack{
  width:min(900px, 74vw) !important;
  aspect-ratio:1015 / 217 !important;
}

.themeReveal__stack{
  width:min(860px, 70vw) !important;
  aspect-ratio:1015 / 217 !important;
}

@media (max-width:640px){
  .introReveal__stack{
    width:min(340px, 84vw) !important;
  }

  .themeReveal__stack{
    width:min(300px, 76vw) !important;
  }
}

/* Repair callback modal on mobile: keep a proper dialog card instead of the whole
   page-blue canvas, while preserving full-page shielding underneath. */
.callModal{
  background:rgba(3, 8, 20, .68) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

.callModal::before{
  background:rgba(3, 8, 20, .72) !important;
}

.callModal__dialog{
  position:relative !important;
  width:min(540px, calc(100vw - 24px)) !important;
  max-width:540px !important;
  margin:0 auto !important;
  border-radius:24px !important;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(0, 212, 255, .08), transparent 40%),
    radial-gradient(120% 120% at 100% 0%, rgba(255, 183, 3, .10), transparent 36%),
    linear-gradient(180deg, var(--card2), var(--card)) !important;
  border:1px solid var(--surface-border) !important;
  overflow-y:auto !important;
  box-shadow:0 24px 90px rgba(0,0,0,.46) !important;
}

@media (max-width:640px){
  .callModal{
    padding:12px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .callModal__dialog{
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    max-height:calc(var(--call-modal-height, 100dvh) - 24px) !important;
    padding:22px 18px 18px !important;
  }

  .callModal__title{
    font-size:26px !important;
  }
}

/* Simpler mobile header icons that render reliably on Safari. */
@media (max-width:640px){
  .header .header__themeBtn,
  .header .header__callBtn{
    font-size:0 !important;
    color:transparent !important;
    position:relative !important;
  }

  .header .header__themeBtn::before,
  .header .header__callBtn::before{
    content:"" !important;
    display:block !important;
    width:16px !important;
    height:16px !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
  }

  html:not([data-theme="dark"]) .header .header__themeBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5A8.5 8.5 0 0 1 8.5 4a8.5 8.5 0 1 0 11.5 11.5Z' fill='none' stroke='%23f5f7fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  html[data-theme="dark"] .header .header__themeBtn::before,
  html.prominvest-theme-target-dark .header .header__themeBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='none' stroke='%23f5f7fb' stroke-width='2'/%3E%3Cpath d='M12 2v2.2M12 19.8V22M4.93 4.93l1.56 1.56M17.51 17.51l1.56 1.56M2 12h2.2M19.8 12H22M4.93 19.07l1.56-1.56M17.51 6.49l1.56-1.56' fill='none' stroke='%23f5f7fb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }

  .header .header__callBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 3.8 9.6 6.7 7.8 8.5a14 14 0 0 0 7.7 7.7l1.8-1.8 2.9 2.8-1.2 3a2 2 0 0 1-2 1.2C10.3 20.1 3.9 13.7 2.8 5.8a2 2 0 0 1 1.2-2l2.8-1.1Z' fill='none' stroke='%230b1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
}


/* ===== R10 HERO FIX9: dark logo repair, mobile icon alignment, 1366 directions block scaling ===== */

/* Use the new r13 logo assets everywhere. */
.brand__logo{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:contain !important;
}
html[data-theme="dark"] .brand__logo,
html.prominvest-theme-target-dark .brand__logo{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}
html[data-theme="light"] .brand__logo,
html.prominvest-theme-target-light .brand__logo{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
}

/* Desktop header: give the logo a little more breathing room to avoid visual clipping. */
@media (min-width:981px){
  .brand{
    flex:0 0 318px !important;
    min-width:318px !important;
  }
  .brand__logo{
    width:300px !important;
    height:66px !important;
  }
}

@media (min-width:981px) and (max-width:1366px){
  .brand{
    flex-basis:288px !important;
    min-width:288px !important;
  }
  .brand__logo{
    width:270px !important;
    height:60px !important;
  }
}

/* Mobile header: slightly larger readable logo without cropping. */
@media (max-width:640px){
  .brand__logo{
    width:116px !important;
    height:30px !important;
  }
}
@media (max-width:420px){
  .brand__logo{
    width:108px !important;
    height:28px !important;
  }
}

/* Force reveal layers to use the new centered logo assets. */
.introReveal--light .introReveal__stack,
.themeReveal--light .themeReveal__stack{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
}
.introReveal--dark .introReveal__stack,
.themeReveal--dark .themeReveal__stack{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}

.introReveal__stack{
  width:min(940px, 74vw) !important;
  aspect-ratio:1107 / 292 !important;
}
.themeReveal__stack{
  width:min(900px, 70vw) !important;
  aspect-ratio:1107 / 292 !important;
}
@media (max-width:640px){
  .introReveal__stack{ width:min(330px, 84vw) !important; }
  .themeReveal__stack{ width:min(292px, 76vw) !important; }
}

/* Mobile icons: center pseudo-icons precisely inside the circle buttons. */
@media (max-width:640px){
  .header .header__themeBtn,
  .header .header__callBtn{
    position:relative !important;
    font-size:0 !important;
    color:transparent !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .header .header__themeBtn::before,
  .header .header__callBtn::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    margin:auto !important;
    width:14px !important;
    height:14px !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:14px 14px !important;
  }

  html:not([data-theme="dark"]) .header .header__themeBtn::before,
  html.prominvest-theme-target-light .header .header__themeBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.4A8.4 8.4 0 0 1 8.6 4 8.5 8.5 0 1 0 20 15.4Z' fill='none' stroke='%23f5f7fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  html[data-theme="dark"] .header .header__themeBtn::before,
  html.prominvest-theme-target-dark .header .header__themeBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='none' stroke='%23f5f7fb' stroke-width='2'/%3E%3Cpath d='M12 2.4v2.1M12 19.5v2.1M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M2.4 12h2.1M19.5 12h2.1M4.9 19.1l1.5-1.5M17.6 6.4l1.5-1.5' fill='none' stroke='%23f5f7fb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }

  .header .header__callBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.8 9.3 6.5 7.7 8.2a13.6 13.6 0 0 0 8 8l1.6-1.6 2.7 2.7-1.1 2.7a1.9 1.9 0 0 1-1.9 1.2C10.3 20.3 3.7 13.7 2.8 6.8a1.9 1.9 0 0 1 1.2-1.9l2.6-1.1Z' fill='none' stroke='%230b1220' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
}

/* 1366 and below: keep the main-page directions screen closer to the other screens. */
@media (max-width:1366px) and (min-width:981px){
  .screen3__top :is(.sec){
    padding:30px 0 !important;
  }
  .screen3__top :is(.head){
    margin-bottom:16px !important;
  }
  .screen3__top :is(.title){
    font-size:42px !important;
  }
  .screen3__top :is(.grid){
    gap:12px !important;
  }
  .screen3__top :is(.card),
  .screen3__top :is(.skeletonCard){
    height:136px !important;
  }
}


/* ===== R10 HERO FIX10: desktop directions CTA, light-theme weights, reveal timing ===== */

/* On desktop/tablet restore the full “Все направления” button.
   The compact arrow-only CTA remains exclusive to mobile. */
@media (min-width:641px){
  .screen3__top .head .btn[href="/directions"],
  .screen3__top .head .btn[href="/directions.html"]{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    padding:12px 16px !important;
    border-radius:10px !important;
    gap:10px !important;
    justify-content:center !important;
    align-self:center !important;
  }

  .screen3__top .head .btn[href="/directions"] span:first-child,
  .screen3__top .head .btn[href="/directions.html"] span:first-child{
    display:inline !important;
  }

  .screen3__top .head .btn[href="/directions"] .btnIcon,
  .screen3__top .head .btn[href="/directions.html"] .btnIcon{
    font-size:16px !important;
    line-height:1 !important;
  }
}

/* Light theme: button labels should be readable but not bold. */
html[data-theme="light"] button,
html[data-theme="light"] .btn,
html[data-theme="light"] .nav__link,
html[data-theme="light"] .header__themeBtn,
html[data-theme="light"] .header__callBtn,
html[data-theme="light"] .scrollControl{
  font-weight:500 !important;
}

/* Keep the logo visible until the reveal overlay itself finishes.
   Older content animation started hiding it around 80% of the timeline. */
.themeReveal--running{
  animation:themeFadeFix10 1.2s ease-out both !important;
}

.themeReveal__content,
.themeReveal--running .themeReveal__content{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

.themeReveal__stack,
.themeReveal--running .themeReveal__stack{
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
}

@keyframes themeFadeFix10{
  0%{ opacity:0; }
  15%{ opacity:1; }
  92%{ opacity:1; }
  100%{ opacity:0; }
}


/* ===== R10 HERO FIX11: smooth reveal appearance + bold light header buttons ===== */

/* Return bold labels specifically in the header for the light theme. */
html[data-theme="light"] .header .nav__link,
html[data-theme="light"] .header .header__themeBtn,
html[data-theme="light"] .header .header__callBtn{
  font-weight:700 !important;
}

/* The logo is rendered through an animated pseudo-element. This avoids the
   abrupt appearance caused by the static background while keeping it visible
   until the overlay itself fades out. */
.introReveal__stack,
.themeReveal__stack{
  background-image:none !important;
}

.introReveal__stack::before,
.themeReveal__stack::before{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  pointer-events:none;
  will-change:opacity, transform, filter;
}

.introReveal--light .introReveal__stack::before,
.themeReveal--light .themeReveal__stack::before{
  background-image:url("/assets/prominvest-logo-light-r23.png");
}

.introReveal--dark .introReveal__stack::before,
.themeReveal--dark .themeReveal__stack::before{
  background-image:url("/assets/prominvest-logo-dark-r23.png");
}

.introReveal__stack::before{
  opacity:0;
  animation:introLogoSmoothFix11 1s cubic-bezier(.16,1,.3,1) forwards;
}

.themeReveal__stack::before{
  opacity:0;
}

.themeReveal--running .themeReveal__stack::before{
  animation:themeLogoSmoothFix11 1.2s cubic-bezier(.16,1,.3,1) both;
}

@keyframes introLogoSmoothFix11{
  0%{
    opacity:0;
    transform:scale(.94);
    filter:blur(7px);
  }
  55%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
}

@keyframes themeLogoSmoothFix11{
  0%{
    opacity:0;
    transform:scale(.94);
    filter:blur(7px);
  }
  24%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
}


/* ===== R10 HERO FIX12: compact-desktop icon actions + smaller directions screen ===== */

/* 1366px desktop class: replace long action labels with the same compact
   icon treatment used on mobile, while retaining desktop spacing and borders. */
@media (min-width:981px) and (max-width:1366px){
  .header__actions{
    flex:0 0 auto !important;
    min-width:0 !important;
    gap:10px !important;
  }

  .header .header__themeBtn,
  .header .header__callBtn{
    position:relative !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    padding:0 !important;
    border-radius:999px !important;
    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .header .header__themeBtn::before,
  .header .header__callBtn::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    margin:auto !important;
    width:17px !important;
    height:17px !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:17px 17px !important;
  }

  html:not([data-theme="dark"]) .header .header__themeBtn::before,
  html.prominvest-theme-target-light .header .header__themeBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.4A8.4 8.4 0 0 1 8.6 4 8.5 8.5 0 1 0 20 15.4Z' fill='none' stroke='%23f5f7fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  html[data-theme="dark"] .header .header__themeBtn::before,
  html.prominvest-theme-target-dark .header .header__themeBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='none' stroke='%23f5f7fb' stroke-width='2'/%3E%3Cpath d='M12 2.4v2.1M12 19.5v2.1M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M2.4 12h2.1M19.5 12h2.1M4.9 19.1l1.5-1.5M17.6 6.4l1.5-1.5' fill='none' stroke='%23f5f7fb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }

  .header .header__callBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.8 9.3 6.5 7.7 8.2a13.6 13.6 0 0 0 8 8l1.6-1.6 2.7 2.7-1.1 2.7a1.9 1.9 0 0 1-1.9 1.2C10.3 20.3 3.7 13.7 2.8 6.8a1.9 1.9 0 0 1 1.2-1.9l2.6-1.1Z' fill='none' stroke='%230b1220' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
}

/* Make the third full-page screen visually comparable with “О компании” on
   1366×768-class desktops. Earlier patches accidentally enlarged it again. */
@media (min-width:981px) and (max-width:1366px){
  .screen3__top{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .screen3__top > .sec,
  .screen3__top .sec{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .screen3__top .wrap{
    width:100% !important;
    max-width:1080px !important;
    padding:0 18px !important;
    margin:0 auto !important;
  }

  .screen3__top .head{
    margin-bottom:10px !important;
    gap:12px !important;
  }

  .screen3__top .title{
    font-size:30px !important;
    line-height:1.04 !important;
    letter-spacing:-.3px !important;
  }

  .screen3__top .grid{
    gap:10px !important;
  }

  .screen3__top .card,
  .screen3__top .skeletonCard{
    height:102px !important;
    border-radius:14px !important;
  }

  .screen3__top .meta{
    inset:auto 12px 9px 12px !important;
  }

  .screen3__top .name{
    font-size:13px !important;
    line-height:1.08 !important;
  }

  .screen3__top .arrow{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
  }

  .screen3__top .head .btn[href="/directions"],
  .screen3__top .head .btn[href="/directions.html"]{
    padding:9px 12px !important;
    border-radius:10px !important;
    font-size:10px !important;
    gap:7px !important;
  }
}

@media (min-width:981px) and (max-width:1366px) and (max-height:700px){
  .screen3__top .wrap{
    max-width:1040px !important;
  }

  .screen3__top .title{
    font-size:28px !important;
  }

  .screen3__top .card,
  .screen3__top .skeletonCard{
    height:94px !important;
  }
}


/* ===== R10 HERO FIX13: taller mobile header, smoother reveal, black moon outline, smaller 1366 directions block ===== */

/* 1) Mobile header: slightly taller so circular buttons are not clipped. */
@media (max-width:640px){
  .header{
    overflow:visible !important;
  }

  .header__inner{
    min-height:58px !important;
    padding:12px 6px 11px !important;
    gap:6px !important;
    overflow:visible !important;
    align-items:center !important;
  }

  .brand__logo{
    width:112px !important;
    height:30px !important;
  }

  .header .header__themeBtn,
  .header .header__callBtn{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
  }
}

/* 2) Theme reveal / intro reveal: remove side jerk and keep only smooth fade/scale. */
.introReveal__content,
.themeReveal__content{
  transform:translate3d(0,0,0) !important;
  -webkit-transform:translate3d(0,0,0) !important;
  will-change:opacity !important;
}

.introReveal__stack,
.themeReveal__stack{
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
  transform-origin:center center !important;
  will-change:opacity, transform !important;
}

.introReveal__part--base{
  animation:introBaseInFix13 .72s cubic-bezier(.16,1,.3,1) forwards !important;
}

.introReveal__part--top{
  animation:introTopFadeInFix13 .8s cubic-bezier(.16,1,.3,1) forwards !important;
  animation-delay:.34s !important;
}

.themeReveal--running .themeReveal__content{
  animation:themeFadeContentFix13 1.2s ease-out forwards !important;
}

.themeReveal--running .themeReveal__part--base{
  animation:themeRevealBaseInFix13 1.2s cubic-bezier(.16,1,.3,1) forwards !important;
}

.themeReveal--running .themeReveal__part--top{
  animation:themeRevealTopInFix13 1.2s cubic-bezier(.16,1,.3,1) forwards !important;
  animation-delay:.28s !important;
}

@keyframes introBaseInFix13{
  0%{ opacity:0; transform:scale(.985) translate3d(0,0,0); }
  100%{ opacity:1; transform:scale(1) translate3d(0,0,0); }
}

@keyframes introTopFadeInFix13{
  0%{ opacity:0; transform:none; }
  100%{ opacity:1; transform:none; }
}

@keyframes themeFadeContentFix13{
  0%{ opacity:0; transform:scale(.985) translate3d(0,0,0); }
  20%{ opacity:1; transform:scale(1) translate3d(0,0,0); }
  80%{ opacity:1; transform:scale(1) translate3d(0,0,0); }
  100%{ opacity:0; transform:scale(1) translate3d(0,0,0); }
}

@keyframes themeRevealBaseInFix13{
  0%{ opacity:0; transform:scale(.985) translate3d(0,0,0); }
  100%{ opacity:1; transform:scale(1) translate3d(0,0,0); }
}

@keyframes themeRevealTopInFix13{
  0%{ opacity:0; transform:none; }
  100%{ opacity:1; transform:none; }
}

/* 3) Moon icon: black outline instead of white where moon is displayed. */
@media (max-width:640px), (min-width:981px) and (max-width:1366px){
  html:not([data-theme="dark"]) .header .header__themeBtn::before,
  html.prominvest-theme-target-light .header .header__themeBtn::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.4A8.4 8.4 0 0 1 8.6 4 8.5 8.5 0 1 0 20 15.4Z' fill='none' stroke='%230b1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
}

/* 4) 1366x768-class desktop: shrink the whole directions block further. */
@media (min-width:981px) and (max-width:1366px) and (max-height:768px){
  .screen3__top{
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .screen3__top > .sec,
  .screen3__top .sec{
    padding:0 !important;
    margin:0 !important;
  }

  .screen3__top .wrap{
    max-width:980px !important;
    padding:0 10px !important;
    margin:0 auto !important;
    transform:scale(.84) !important;
    transform-origin:center center !important;
  }

  .screen3__top .head{
    margin-bottom:8px !important;
    gap:10px !important;
  }

  .screen3__top .title{
    font-size:26px !important;
    line-height:1.02 !important;
  }

  .screen3__top .card,
  .screen3__top .skeletonCard{
    height:88px !important;
    border-radius:12px !important;
  }

  .screen3__top .name{
    font-size:12px !important;
    line-height:1.06 !important;
  }

  .screen3__top .arrow{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
  }

  .screen3__top .head .btn[href="/directions"],
  .screen3__top .head .btn[href="/directions.html"]{
    padding:8px 11px !important;
    font-size:9px !important;
    gap:6px !important;
    border-radius:9px !important;
  }
}


/* ===== R10 HERO FIX14: unified 1366 screens + genuinely smooth reveal ===== */

/*
  A single logo layer is used for both opening and theme-switch reveals.
  All legacy two-image parts are hidden from the first frame so they cannot
  appear at an old position and then jump sideways when JS corrects them.
*/
.introReveal__stack,
.themeReveal__stack{
  position:relative !important;
  transform:none !important;
  -webkit-transform:none !important;
  margin:0 auto !important;
  background:none !important;
  aspect-ratio:1107 / 292 !important;
  overflow:visible !important;
  will-change:auto !important;
}

.introReveal__part,
.themeReveal__part{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  animation:none !important;
  transform:none !important;
}

.introReveal__stack::before,
.themeReveal__stack::before{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  opacity:0;
  transform:scale(.985);
  transform-origin:center center;
  will-change:opacity, transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.introReveal--light .introReveal__stack::before,
.themeReveal--light .themeReveal__stack::before{
  background-image:url("/assets/prominvest-logo-light-r23.png");
}

.introReveal--dark .introReveal__stack::before,
.themeReveal--dark .themeReveal__stack::before{
  background-image:url("/assets/prominvest-logo-dark-r23.png");
}

.introReveal__stack{
  width:min(920px, 70vw) !important;
}

.themeReveal__stack{
  width:min(880px, 68vw) !important;
}

.introReveal__stack::before{
  animation:prominvestIntroLogoFix14 1.05s cubic-bezier(.2,.75,.25,1) both;
}

.themeReveal--running .themeReveal__stack::before{
  animation:prominvestThemeLogoFix14 1.2s cubic-bezier(.2,.75,.25,1) both;
}

.introReveal__content,
.themeReveal__content{
  transform:none !important;
  -webkit-transform:none !important;
}

.themeReveal--running .themeReveal__content{
  animation:prominvestThemeContentFix14 1.2s ease-out both !important;
}

@keyframes prominvestIntroLogoFix14{
  0%{opacity:0; transform:scale(.985);}
  30%{opacity:1; transform:scale(1);}
  100%{opacity:1; transform:scale(1);}
}

@keyframes prominvestThemeLogoFix14{
  0%{opacity:0; transform:scale(.985);}
  25%{opacity:1; transform:scale(1);}
  100%{opacity:1; transform:scale(1);}
}

@keyframes prominvestThemeContentFix14{
  0%{opacity:0; transform:none;}
  16%{opacity:1; transform:none;}
  92%{opacity:1; transform:none;}
  100%{opacity:0; transform:none;}
}

@media (max-width:640px){
  .introReveal__stack{
    width:min(340px, 84vw) !important;
  }

  .themeReveal__stack{
    width:min(310px, 78vw) !important;
  }
}

/*
  1366×768 and lower desktop viewports:
  do not scale/narrow the directions cards. Keep the same content width as
  “О компании”, and align only typography, vertical density and card height.
  The long selector intentionally outranks scoped HomePage styles that set the
  title to 52px with !important.
*/
@media (min-width:981px) and (max-width:1366px),
       (min-width:981px) and (max-height:768px){
  .screen--third .screen3 .screen3__top{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .screen--third .screen3 .screen3__top > .sec,
  .screen--third .screen3 .screen3__top .sec{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap{
    width:calc(100% - 40px) !important;
    max-width:1084px !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .head{
    margin:0 0 12px !important;
    gap:14px !important;
    align-items:center !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .head .title{
    font-size:30px !important;
    line-height:1.04 !important;
    letter-spacing:-.25px !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .grid .card,
  .screen--third .screen3 .screen3__top .sec .wrap .skeletonGrid .skeletonCard{
    height:106px !important;
    border-radius:14px !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .grid .card .meta{
    inset:auto 12px 9px 12px !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .grid .card .name{
    font-size:13px !important;
    line-height:1.08 !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .grid .card .arrow{
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .head .btn[href="/directions"],
  .screen--third .screen3 .screen3__top .sec .wrap .head .btn[href="/directions.html"]{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    padding:9px 13px !important;
    border-radius:10px !important;
    gap:7px !important;
    font-size:10px !important;
    transform:none !important;
  }

  .screen--third .screen3 .screen3__top .sec .wrap .head .btn[href="/directions"] span:first-child,
  .screen--third .screen3 .screen3__top .sec .wrap .head .btn[href="/directions.html"] span:first-child{
    display:inline !important;
  }
}


/* ===== R10 HERO FIX15: crisp header logo, centered smooth animations, mobile modal top, no mobile header shadows ===== */

/* Header logo: use the img itself (not CSS background rendering) for sharper output. */
.brand__logo{
  background:none !important;
}

.brand__logoImg{
  display:block !important;
  width:auto !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:left center !important;
  image-rendering:auto !important;
  filter:none !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
}

/* Make the mobile call modal sit a bit higher. */
@media (max-width:640px){
  .callModal{
    align-items:flex-start !important;
    justify-content:center !important;
    padding-top:max(10px, env(safe-area-inset-top) + 8px) !important;
  }

  .callModal__dialog{
    margin:0 auto !important;
  }

  /* Remove any mobile header button shadows. */
  .header .header__themeBtn,
  .header .header__callBtn{
    box-shadow:none !important;
    filter:none !important;
  }
}

/* Reveal animations: one centered crisp logo without broken overlay parts. */
.introReveal__content,
.themeReveal__content{
  transform:none !important;
  -webkit-transform:none !important;
  will-change:opacity !important;
}

.introReveal__stack,
.themeReveal__stack{
  position:relative !important;
  width:min(840px, 72vw) !important;
  max-width:none !important;
  aspect-ratio:1107 / 292 !important;
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
  transform-origin:center center !important;
  will-change:opacity, transform !important;
}

@media (max-width:640px){
  .introReveal__stack{ width:min(332px, 82vw) !important; }
  .themeReveal__stack{ width:min(304px, 78vw) !important; }
}

.introReveal__part,
.themeReveal__part{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  animation:none !important;
  transform:none !important;
}

.introReveal__part--top,
.themeReveal__part--top{
  display:none !important;
}

.introReveal__part--base,
.themeReveal__part--base{
  display:block !important;
  opacity:1 !important;
}

.introReveal__stack{
  opacity:0;
  animation:prominvestRevealLogoInFix15 .72s cubic-bezier(.16,1,.3,1) .06s forwards !important;
}

.themeReveal--running .themeReveal__content{
  opacity:1 !important;
  animation:prominvestRevealContentFix15 1.2s ease-out forwards !important;
}

.themeReveal--running .themeReveal__stack{
  opacity:0;
  animation:prominvestRevealLogoInFix15 .48s cubic-bezier(.16,1,.3,1) .04s forwards !important;
}

@keyframes prominvestRevealLogoInFix15{
  0%{ opacity:0; transform:scale(.985) translateZ(0); }
  100%{ opacity:1; transform:scale(1) translateZ(0); }
}

@keyframes prominvestRevealContentFix15{
  0%{ opacity:0; }
  14%{ opacity:1; }
  90%{ opacity:1; }
  100%{ opacity:0; }
}


/* ===== R17 FINAL HOTFIX: logos, mobile footer line, mobile header pills, captcha modal ===== */
@media (max-width:640px){
  html[data-theme="light"] .header .nav__link,
  html[data-theme="light"] .header .nav__link:hover,
  html[data-theme="light"] .header .nav__link:active,
  html[data-theme="light"] .header .header__themeBtn,
  html[data-theme="light"] .header .header__themeBtn:hover,
  html[data-theme="light"] .header .header__themeBtn:active,
  .header .nav__link,
  .header .nav__link:hover,
  .header .nav__link:active,
  .header .header__themeBtn,
  .header .header__themeBtn:hover,
  .header .header__themeBtn:active{
    box-shadow:none !important;
    filter:none !important;
  }

  .header .header__themeBtn{
    border:1px solid rgba(11,18,32,.18) !important;
    background:rgba(255,255,255,.72) !important;
  }

  html[data-theme="dark"] .header .header__themeBtn{
    border:1px solid rgba(255,255,255,.18) !important;
    background:rgba(11,18,32,.74) !important;
  }

  .callModal{
    top:0 !important;
    height:100dvh !important;
    min-height:100dvh !important;
    align-items:center !important;
  }

  .callModal__dialog{
    margin-top:-8px !important;
  }

  .callForm__captcha{
    display:flex !important;
    justify-content:center !important;
  }

  .footer__brand .footer__copyright{
    display:none !important;
  }

  .footer__brandSub{
    display:block !important;
  }

  .footer__requisites{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "data data"
      "copy creator" !important;
    align-items:center !important;
    gap:10px 12px !important;
  }

  .footer__requisitesData{
    grid-area:data !important;
    width:100% !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }

  .footer__requisites::after{
    content:"© 2026 Проминвест";
    grid-area:copy;
    color:var(--footer-muted) !important;
    font-size:11px;
    line-height:1.2;
  }

  .footer__creator{
    grid-area:creator !important;
    justify-self:end !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:420px){
  .footer__requisites{
    gap:8px 10px !important;
  }

  .footer__requisitesData{
    gap:6px !important;
  }

  .footer__creator{
    font-size:9.5px !important;
  }
}


/* ===== PROMINVEST R18: one logo, unclipped mobile header, full modal cover ===== */
.brand__logo{
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.brand__logo::before,
.brand__logo::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

.brand__logoImg{
  content:normal !important;
  background:none !important;
  background-image:none !important;
  opacity:1 !important;
  visibility:visible !important;
  object-fit:contain !important;
  object-position:left center !important;
  image-rendering:auto !important;
}

/* В заставке и анимации темы используется только один полный логотип.
   Старый слой-конструктор полностью выключен, поэтому изображения не наслаиваются. */
.introReveal__part--base,
.themeReveal__part--base{
  display:none !important;
  visibility:hidden !important;
}

.introReveal__part--top,
.themeReveal__part--top{
  display:block !important;
  visibility:visible !important;
  content:normal !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:none !important;
  background-image:none !important;
}

.introReveal__stack,
.themeReveal__stack{
  aspect-ratio:1000 / 201 !important;
}

/* Не даём нажатому пункту сдвинуться вверх и попасть под границу шапки. */
@media (max-width:900px), (max-height:700px){
  .header,
  .header__inner,
  .nav,
  .header__actions{
    overflow:visible !important;
  }

  .header__inner{
    padding-top:max(13px, env(safe-area-inset-top)) !important;
    padding-bottom:11px !important;
  }

  .header .nav__link,
  .header .nav__link:hover,
  .header .nav__link:focus,
  .header .nav__link:active,
  .header .header__themeBtn,
  .header .header__themeBtn:hover,
  .header .header__themeBtn:focus,
  .header .header__themeBtn:active,
  .header .header__callBtn,
  .header .header__callBtn:hover,
  .header .header__callBtn:focus,
  .header .header__callBtn:active{
    transform:none !important;
    translate:none !important;
    box-shadow:none !important;
    filter:none !important;
  }

  .header .nav__link{
    margin-top:1px !important;
    outline-offset:1px !important;
  }
}

/* iOS иногда оставляет снизу 1–2 px layout viewport. Расширяем фон модалки
   за все границы экрана, не меняя положение самой карточки формы. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .callModal{
    position:fixed !important;
    inset:-10px !important;
    top:-10px !important;
    right:-10px !important;
    bottom:-10px !important;
    left:-10px !important;
    width:auto !important;
    height:auto !important;
    min-width:calc(100vw + 20px) !important;
    min-height:calc(100dvh + 20px) !important;
    padding:
      calc(max(12px, env(safe-area-inset-top)) + 10px)
      calc(max(12px, env(safe-area-inset-right)) + 10px)
      calc(max(12px, env(safe-area-inset-bottom)) + 10px)
      calc(max(12px, env(safe-area-inset-left)) + 10px) !important;
    overflow:hidden !important;
    background:var(--bg) !important;
    background-color:var(--bg) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .callModal::before{
    content:"" !important;
    position:fixed !important;
    inset:-30px !important;
    z-index:-1 !important;
    display:block !important;
    background:var(--bg) !important;
    pointer-events:none !important;
  }

  .callModal__dialog{
    margin-top:0 !important;
    max-height:calc(100dvh - 24px) !important;
  }
}


/* R18 final specificity guard: старые правила responsive-fix больше не могут
   рисовать логотип фоном поверх единственного <img>. */
html body .header .brand__logo,
html[data-theme="light"] body .header .brand__logo,
html[data-theme="dark"] body .header .brand__logo{
  background:none !important;
  background-image:none !important;
}

html body .header .brand__logoImg,
html[data-theme="light"] body .header .brand__logoImg,
html[data-theme="dark"] body .header .brand__logoImg{
  content:normal !important;
}

.introReveal.introReveal--light .introReveal__part--top,
.introReveal.introReveal--dark .introReveal__part--top,
.themeReveal.themeReveal--light .themeReveal__part--top,
.themeReveal.themeReveal--dark .themeReveal__part--top{
  content:normal !important;
  visibility:visible !important;
  display:block !important;
}


/* ===== PROMINVEST R22: only requested targeted fixes ===== */

/* 1) Slightly smaller logo only on large desktop widths.
   1366x768 and smaller desktop layouts are intentionally untouched here. */
@media (min-width: 1441px){
  html body .header .brand,
  html[data-theme="light"] body .header .brand,
  html[data-theme="dark"] body .header .brand{
    flex-basis:300px !important;
    min-width:300px !important;
  }

  html body .header .brand__logo,
  html[data-theme="light"] body .header .brand__logo,
  html[data-theme="dark"] body .header .brand__logo{
    width:270px !important;
    height:55px !important;
  }
}

/* 2) Reveal/intro animations render exactly one of the latest provided logos.
   All old image layers stay hidden, so they cannot overlap. */
.introReveal__stack,
.themeReveal__stack{
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
}

.introReveal--light .introReveal__stack,
.themeReveal--light .themeReveal__stack{
  background-image:url("/assets/prominvest-logo-light-r23.png") !important;
}

.introReveal--dark .introReveal__stack,
.themeReveal--dark .themeReveal__stack{
  background-image:url("/assets/prominvest-logo-dark-r23.png") !important;
}

.introReveal__stack > img,
.themeReveal__stack > img,
.introReveal__part,
.themeReveal__part{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  animation:none !important;
  content:none !important;
}

/* 3) Mobile logo moved only a few pixels to the right. */
@media (max-width:640px){
  html body .header .brand__logo,
  html[data-theme="light"] body .header .brand__logo,
  html[data-theme="dark"] body .header .brand__logo{
    position:relative !important;
    left:3px !important;
  }
}

/* 4) Only the contact form is compacted for the 1366x768 desktop class.
   No other block at this resolution is changed. */
@media (min-width:981px) and (max-width:1366px) and (max-height:768px){
  .callModal{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:10px 16px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .callModal::before{
    position:fixed !important;
    inset:0 !important;
  }

  .callModal__dialog{
    width:min(500px, calc(100vw - 32px)) !important;
    max-width:500px !important;
    max-height:calc(100vh - 20px) !important;
    margin:0 auto !important;
    padding:18px 22px !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }

  .callModal__close{
    top:10px !important;
    right:10px !important;
    width:34px !important;
    height:34px !important;
  }

  .callModal__badge{
    padding:6px 10px !important;
  }

  .callModal__title{
    margin:10px 0 6px !important;
    font-size:28px !important;
    line-height:1.05 !important;
  }

  .callModal__text{
    margin:0 0 10px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  .callForm{
    gap:8px !important;
  }

  .callForm__field{
    gap:4px !important;
  }

  .callForm__label{
    font-size:12px !important;
  }

  .callForm__input,
  .callForm__textarea{
    padding:9px 12px !important;
    border-radius:12px !important;
  }

  .callForm__textarea{
    min-height:72px !important;
    max-height:72px !important;
    resize:none !important;
  }

  .callForm__captcha{
    min-height:70px !important;
  }

  .callForm__actions{
    margin-top:0 !important;
  }
}


/* ===== PROMINVEST R23: crisp high-resolution desktop header logo only ===== */
@media (min-width:1441px){
  html body .header .brand__logo,
  html[data-theme="light"] body .header .brand__logo,
  html[data-theme="dark"] body .header .brand__logo{
    width:270px !important;
    height:54px !important;
    overflow:visible !important;
  }

  html body .header .brand__logoImg,
  html[data-theme="light"] body .header .brand__logoImg,
  html[data-theme="dark"] body .header .brand__logoImg{
    display:block !important;
    width:270px !important;
    height:54px !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:left center !important;
    transform:none !important;
    -webkit-transform:none !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
    filter:none !important;
    image-rendering:auto !important;
  }
}

/* PROMINVEST_R24_1366_EQUAL_SCREEN_WIDTH
   Только ширина экранов «О компании» и «Направления деятельности»
   приводится к той же формуле ширины, что используется на первом экране. */
@media (min-width:1300px) and (max-width:1366px) and (max-height:768px){
  .screen--scope .companyAbout__inner,
  .screen3__top .wrap{
    box-sizing:border-box !important;
    width:calc(100% - 36px) !important;
    max-width:min(1120px, 154vh) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .screen3__top .wrap{
    padding-left:18px !important;
    padding-right:18px !important;
    transform:none !important;
  }
}