@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/manrope-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/manrope-1.ttf) format('truetype');
}

*{box-sizing:border-box}html,body{margin:0}body{font-family:Manrope,Arial,sans-serif;color:#333;font-size:14px}p{margin:0 0 10px}img{vertical-align:middle;max-width:100%}a{display:inline-block} .platform-link img{width:24px;height:24px}
@media all {
  .hero { min-height: 100vh; background-color: rgb(239, 238, 235);  background-position: 50% 100%; background-size: cover; background-repeat: no-repeat; padding: 36px 5vw; display: block; line-height: 36px; position: relative; }
  .hero.hero-png-test { background-image: linear-gradient(rgb(184, 184, 184), rgb(208, 208, 208)); image-orientation: none; overflow: hidden; isolation: isolate; min-height: 100vh; }
  .platform-links { inset: 32px auto auto calc(60% - 232px); display: flex; gap: 12px; position: absolute; filter: brightness(0) invert(1); }
  .platform-link { transform: scale(1.25); transition-property: transform; transition-duration: 200ms; transition-timing-function: ease; width: 56px; height: 56px; padding: 11px; }
  .platform-link:hover { transform: scale(1.4); }
  .portrait-frame-test { position: absolute; width: 100vw; height: 100%; right: 0px; top: 0px; overflow: hidden; z-index: -1; }
  .image { position: absolute; width: 100%; max-width: none; height: 100%; left: 0px; top: 0px; z-index: -1; object-fit: cover; object-position: 50% 100%; }
  .image.portrait-mobile-layer { display: none; }
  .image.portrait-wide-layer { }
  .hero-title { width: 28%; font-family: Manrope, Arial, sans-serif; font-size: 36px; line-height: 40px; font-weight: 600; margin: 18vh 0px 12px; }
  .hero-description { width: 360px; font-family: Manrope, Arial, sans-serif; font-size: 14px; line-height: 22px; }
  .hero-description.mobile-role-copy { display: none; }
}
@media screen and (max-width: 991px) {
  .hero { background-position: 100% 100%; background-size: cover; }
  .platform-links { left: calc(50% - 166px); gap: 4px; }
  .platform-link { transform: scale(1.25); width: 44px; height: 44px; }
  .image { object-position: 100% 100%; }
  .hero-title { font-size: 26px; line-height: 32px; text-align: center; margin: 76px 0px 6px; width: 100%; }
  .hero-description { width: 100%; text-align: center; }
}
@media screen and (max-width: 767px) {
  .hero {  background-position: 73% 100%; background-size: cover; min-height: max(100svh, 700px); padding: 64px 6vw 24px; position: relative; height: 100svh; }
  .hero.hero-png-test { min-height: max(100svh, 600px); }
  .platform-links { display: flex; inset: 32px 0px auto; gap: 0px; justify-content: center; filter: brightness(0) invert(1); }
  .platform-link { width: 44px; height: 44px; padding: 11px; flex: 0 0 44px; }
  .image { object-position: 73% 100%; }
  .hero-title { width: 100%; font-size: 22px; line-height: 28px; text-align: center; margin: 36px 0px 6px; }
  .hero-description { width: 230px; max-width: 100%; display: none; }
  .hero-description.mobile-role-copy { display: block; width: 100%; font-size: 13px; }
}
@media screen and (max-width: 479px) {
  .hero {  background-position: 50% 100%; min-height: 100svh; }
  .platform-links { top: 32px; bottom: auto; }
  .image { width: 100%; left: 0px; top: 0px; object-position: 50% 100%; }
  .image.portrait-mobile-layer { display: block; }
  .image.portrait-wide-layer { display: none; }
}
 .platform-link:focus-visible{outline:2px solid #333;outline-offset:2px;transform:scale(1.4)} @media(prefers-reduced-motion:reduce){.platform-link{transition:none}}