@font-face {
  font-family: "MEDAVELA Sans";
  src: url("fonts/NotoSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MEDAVELA Sans";
  src: url("fonts/NotoSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --navy: #071f4c;
  --blue: #087bd8;
  --cyan: #59d9df;
  --muted: #6a7f9e;
  --white: #fff;
  --container: 1480px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--navy);
  background: var(--white);
  font: 400 16px/1.5 "MEDAVELA Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.mvg-gateway { display: flex; min-height: 100vh; min-height: 100svh; flex-direction: column; }
body.mvg-gateway.admin-bar { min-height: calc(100vh - 32px); min-height: calc(100svh - 32px); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.container { width: 88%; max-width: var(--container); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { z-index: 10000; top: 10px; left: 10px; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; color: var(--white); background: var(--navy); }

/* Header: the supplied brand and three language links, as in the PNG. */
.site-header { flex: 0 0 auto; background: var(--white); }
.header-inner { display: flex; min-height: clamp(88px, 7.1vw, 114px); align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.brand { display: flex; width: clamp(230px, 26.5vw, 424px); flex: 0 1 auto; align-items: center; gap: 4%; text-decoration: none; }
.brand-symbol { width: 30%; flex: 0 0 30%; height: auto; }
.brand-wordmark { display: block; width: 66%; aspect-ratio: 628 / 120; background: url("images/medavela-logo.webp") center bottom / 100% auto no-repeat; }
.custom-logo-link { display: inline-flex; max-width: 40%; align-items: center; }
.custom-logo { width: auto; max-height: 78px; object-fit: contain; }
.language-switcher { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.language-switcher a { display: grid; min-width: 50px; min-height: 44px; padding: 7px 10px; place-items: center; border-radius: 999px; color: var(--navy); font-size: clamp(14px, 1.2vw, 19px); line-height: 1; text-decoration: none; transition: background .15s ease, color .15s ease; }
.language-switcher a:hover { background: #eef5fb; }
.language-switcher a[aria-current="page"] { min-width: 76px; color: var(--white); background: var(--navy); }

/* A single hero fills the space between the small header and footer. */
.gateway-main { display: flex; flex: 1 0 auto; }
.hero { position: relative; isolation: isolate; display: flex; width: 100%; flex-direction: column; overflow: hidden; color: var(--white); background: #04244c; }
.hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.hero::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2,19,47,.48), rgba(2,22,50,.15) 45%, rgba(2,22,50,0) 68%); content: ""; }
.hero-layout { display: flex; min-height: 500px; flex: 1 0 auto; align-items: center; padding-block: clamp(48px, 6vh, 86px); }
.hero-copy { width: min(100%, 790px); }
.eyebrow { margin: 0 0 24px; color: #32d8ef; font-size: clamp(11px, 1.23vw, 20px); line-height: 1.4; font-weight: 700; letter-spacing: .22em; }
.hero h1 { margin: 0; color: var(--white); font-size: clamp(42px, 4.9vw, 80px); line-height: 1.05; font-weight: 700; letter-spacing: -.045em; }
.hero-title-line { display: block; }
.hero-accent { color: #81c9f5; }
.hero-copy--pl h1 { font-size: clamp(38px, 4.35vw, 70px); }
.hero-copy--vi h1 { line-height: 1.2; }
.hero-lead { margin: 24px 0 38px; color: #f0f5fb; font-size: clamp(17px, 1.72vw, 28px); line-height: 1.5; }
.hero-lead span { display: block; }
.main-button { display: inline-flex; max-width: 100%; min-height: 80px; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 10px 9px 38px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px; color: var(--navy); background: var(--white); font-size: clamp(20px, 2vw, 32px); font-weight: 700; line-height: 1.3; letter-spacing: -.035em; text-decoration: none; transition: background .16s ease, box-shadow .16s ease; }
.main-button:hover { background: #eaf7ff; box-shadow: 0 10px 32px rgba(0,15,40,.22); }
.main-button:focus-visible { outline-color: var(--cyan); }
.button-arrow { display: grid; width: 66px; height: 66px; flex: 0 0 66px; place-items: center; border-radius: 50%; color: var(--white); background: #0069ce; }
.hero-note { margin: 14px 0 0; color: #bbcade; font-size: clamp(13px, 1.17vw, 19px); }
.strengths { position: relative; border-top: 1px solid rgba(255,255,255,.1); background: rgba(3,29,64,.63); backdrop-filter: blur(9px); }
.strengths-inner { display: grid; min-height: 80px; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: center; margin-block: 0; padding: 21px 0; list-style: none; }
.strengths li { padding: 2px 24px; font-size: clamp(13px, 1.22vw, 20px); line-height: 1.45; text-align: center; }
.strengths li + li { border-left: 1px solid rgba(255,255,255,.55); }

.site-footer { flex: 0 0 auto; background: #fff; }
.footer-inner { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; color: var(--muted); font-size: clamp(12px, 1vw, 16px); }
.inner-page { min-height: 65vh; padding-block: 64px; }
.prose { max-width: 900px; }
.inner-page h1 { margin: 0 0 28px; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; }
.inner-page article { margin-bottom: 32px; }
.inner-page p { overflow-wrap: anywhere; }
.inner-page img { max-width: 100%; }
.inner-page a { color: #0866b8; }

@media (max-width: 1200px) {
  .hero-copy { width: 65%; }
  .hero-lead { font-size: clamp(17px, 1.8vw, 22px); }
  .main-button { min-height: 68px; padding: 8px 9px 8px 27px; font-size: 24px; }
  .button-arrow { width: 54px; height: 54px; flex-basis: 54px; }
  .eyebrow { margin-bottom: 20px; }
  .strengths-inner { min-height: 68px; }
  .footer-inner { min-height: 72px; }
}
@media (max-width: 800px) {
  .hero-copy { width: 83%; }
  .hero::before { background: linear-gradient(90deg, rgba(2,19,47,.88), rgba(2,22,50,.72) 55%, rgba(2,22,50,.28)); }
  .hero h1 { font-size: clamp(38px, 6.3vw, 50px); }
  .hero-copy--pl h1 { font-size: clamp(34px, 5.6vw, 45px); }
  .language-switcher { gap: 5px; }
  .language-switcher a { min-width: 42px; }
  .language-switcher a[aria-current="page"] { min-width: 56px; }
  .strengths li { padding-inline: 12px; }
  body.mvg-gateway.admin-bar { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); }
}
@media (max-width: 540px) {
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 80px; gap: 12px; padding-block: 14px; }
  .brand { width: 190px; min-width: 148px; }
  .custom-logo-link { max-width: 55%; }
  .custom-logo { max-height: 52px; }
  .language-switcher { gap: 2px; }
  .language-switcher a { min-width: 33px; min-height: 40px; padding: 6px; font-size: 12px; }
  .language-switcher a[aria-current="page"] { min-width: 42px; }
  .hero-image { object-position: 66% center; }
  .hero::before { background: linear-gradient(180deg, rgba(2,19,47,.84), rgba(2,22,50,.8) 65%, rgba(2,22,50,.72)); }
  .hero-layout { min-height: 438px; padding-block: 44px; }
  .hero-copy { width: 100%; }
  .eyebrow { margin-bottom: 19px; font-size: 10px; letter-spacing: .19em; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 45px); line-height: 1.1; }
  .hero-copy--pl h1 { font-size: clamp(27px, 7.25vw, 39px); }
  .hero-copy--vi h1 { line-height: 1.25; }
  .hero-lead { margin: 22px 0 29px; font-size: 16px; line-height: 1.55; }
  .hero-lead span + span { margin-top: 6px; }
  .main-button { min-height: 64px; gap: 14px; padding: 8px 9px 8px 23px; font-size: 21px; }
  .hero-copy--pl .main-button, .hero-copy--vi .main-button { font-size: 18px; }
  .button-arrow { width: 48px; height: 48px; flex-basis: 48px; }
  .button-arrow svg { width: 25px; height: 25px; }
  .hero-note { margin-top: 14px; font-size: 12px; }
  .strengths-inner { min-height: 96px; gap: 10px; padding-block: 19px; }
  .strengths li { padding: 2px 8px; font-size: 11px; }
  .footer-inner { min-height: 64px; gap: 12px; padding-block: 17px; font-size: 10px; }
}
@media (max-width: 350px) {
  .container { width: calc(100% - 30px); }
  .brand { min-width: 133px; }
  .language-switcher a { min-width: 29px; }
  .language-switcher a[aria-current="page"] { min-width: 36px; }
  .main-button { padding-left: 18px; gap: 10px; font-size: 19px; }
  .hero-copy--pl .main-button, .hero-copy--vi .main-button { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}