@keyframes open {
	from { opacity: 0; }
	to { opacity: 1; }
}

:root { --swiper-navigation-size: unset; --swiper-navigation-sides-offset: 0; --swiper-navigation-top-offset: 0; --mint: #9effce; --mint-dark: #3a634e; --mint-light: #d2ffe7; --mint-muted: #89deb3; --teal: #9efff5; --teal-dark: #3a635f; --teal-light: #d2fffa; --teal-muted: #89ded5; --pink: #ff9ea8; --pink-dark: #633a3f; --pink-light: #ffcfd3; --pink-muted: #de8992; --gold: #ffce9e; --gold-dark: #634e3a; --gold-light: #ffe7cf; --gold-muted: #deb389; --blue: #9ee1ff; --blue-dark: #3a5663; --blue-light: #d0f0ff; --blue-muted: #89c4de; }
#ai-tour { margin-top: 48px; }
#ai-tour .swiper-slide .background { border: none; }
#ai-tour .swiper-slide .background .tags .tag { background-color: var(--mint); }
#ai-tour .swiper-slide .metadata a { background-color: var(--mint); }
#ai-tour .swiper-slide .metadata a:before { background-color: var(--mint-muted); background-position-y: -600%; }
#ai-tour .swiper-slide .metadata a:hover { background-color: var(--mint-muted); }
#ai-tour .swiper-slide.new:before { background-color: var(--mint-light); color: var(--mint-dark); }
#dialog-engagement .player button.play { background-color: var(--pink); }
#dialog-engagement .player button.play:hover { background-color: var(--pink-muted); }
#dialog-engagement .space { background-color: var(--pink); }
#dialog-experience .player button.play { background-color: var(--teal); }
#dialog-experience .player button.play:hover { background-color: var(--teal-muted); }
#dialog-experience .space { background-color: var(--teal); }
#dialog-innovation .player button.play { background-color: var(--blue); }
#dialog-innovation .player button.play:hover { background-color: var(--blue-muted); }
#dialog-innovation .space { background-color: var(--blue); }
#dialog-processes .player button.play { background-color: var(--gold); }
#dialog-processes .player button.play:hover { background-color: var(--gold-muted); }
#dialog-processes .space { background-color: var(--gold); }
#hero-dialog { height: 80px; display: flex; align-items: center; }
#hero-dialog img { height: 100%; aspect-ratio: 1; border-radius: 100px; }
#hero-dialog span { padding: 0 24px 0 12px; font-size: 14px; line-height: initial; }
#hero-dialog span strong { font-size: 16px; display: block; }
#theme-engagement .swiper-slide .background { border-color: var(--pink); }
#theme-engagement .swiper-slide .background .tags .tag { background-color: var(--pink); }
#theme-engagement .swiper-slide .metadata a { background-color: var(--pink); }
#theme-engagement .swiper-slide .metadata a:before { background-color: var(--pink-muted); background-position-y: -100%; }
#theme-engagement .swiper-slide .metadata a:hover { background-color: var(--pink-muted); }
#theme-engagement .swiper-slide.new:before { background-color: var(--pink-light); color: var(--pink-dark); }
#theme-experience .swiper-slide .background { border-color: var(--teal); }
#theme-experience .swiper-slide .background .tags .tag { background-color: var(--teal); }
#theme-experience .swiper-slide .metadata a { background-color: var(--teal); }
#theme-experience .swiper-slide .metadata a:before { background-color: var(--teal-muted); background-position-y: 0; }
#theme-experience .swiper-slide .metadata a:hover { background-color: var(--teal-muted); }
#theme-experience .swiper-slide.new:before { background-color: var(--teal-light); color: var(--teal-dark); }
#theme-innovation .swiper-slide .background { border-color: var(--blue); }
#theme-innovation .swiper-slide .background .tags .tag { background-color: var(--blue); }
#theme-innovation .swiper-slide .metadata a { background-color: var(--blue); }
#theme-innovation .swiper-slide .metadata a:before { background-color: var(--blue-muted); background-position-y: -300%; }
#theme-innovation .swiper-slide .metadata a:hover { background-color: var(--blue-muted); }
#theme-innovation .swiper-slide.new:before { background-color: var(--blue-light); color: var(--blue-dark); }
#theme-processes .swiper-slide .background { border-color: var(--gold); }
#theme-processes .swiper-slide .background .tags .tag { background-color: var(--gold); }
#theme-processes .swiper-slide .metadata a { background-color: var(--gold); }
#theme-processes .swiper-slide .metadata a:before { background-color: var(--gold-muted); background-position-y: -200%; }
#theme-processes .swiper-slide .metadata a:hover { background-color: var(--gold-muted); }
#theme-processes .swiper-slide.new:before { background-color: var(--gold-light); color: var(--gold-dark); }
#themes { margin: 48px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#themes a { padding: 24px; border-radius: 12px; background-color: #f2f2f2; color: #2f2f2f; transition: background-color 0.2s; display: flex; flex-direction: column; flex: 1; align-items: center; text-align: center; text-decoration: none; }
#themes a:after { content: ""; width: 40px; height: 40px; margin-top: auto; background-image: url("/en-gb/emea/business/aihttps://www.microsoft.com/images/icons.svg"); background-size: auto 700%; background-position: -200% -400%; }
#themes a:before { content: ""; width: 80px; height: 80px; margin-bottom: 12px; border-radius: 100px; background-image: url("/en-gb/emea/business/aihttps://www.microsoft.com/images/icons.svg"); background-size: auto 700%; }
#themes a:hover { background-color: #e6e6e6; }
#themes p { display: none; }
html { scroll-behavior: smooth; }
main { color: #2f2f2f; }
main .ad { margin: 0 24px 48px 24px; border-radius: 12px; background-color: #463668; color: #ffffff; transition: background-color 0.2s; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; cursor: pointer; }
main .ad > :first-child { padding: 24px; flex-basis: 50%; }
main .ad > :last-child { flex-basis: 50%; align-self: stretch; }
main .ad .button { background-color: #f0ecf8; color: #463668; }
main .ad .button:hover { background-color: #e2d9f1; }
main .ad img { width: 100%; height: 100%; object-fit: cover; object-position: left; }
main .ad strong { display: block; }
main .ad:hover { background-color: #34284e; }
main .bg-hero .card-background { position: relative; overflow: hidden; }
main .bg-hero .card-background picture { height: 240px; display: flex; justify-content: center; }
main .bg-hero .card-background picture img { width: auto; height: 100%; }
main .bg-hero .card-background:before { content: ""; width: 100%; height: 33%; bottom: 0; background-image: linear-gradient(hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); position: absolute; z-index: 1; }
main .bg-hero .card-foreground { position: relative; z-index: 2; }
main .card-body:has(.hero-dialog) { margin-bottom: -6px; }
main .columns { margin: 48px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
main .columns a { margin-top: auto; }
main .columns .column { width: 100%; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
main .columns .column img { width: 100%; height: auto; border-radius: 12px; }
main .columns .column img ~ * { margin-left: 24px; margin-right: 24px; }
main .container { padding: 0 12px; }
main .h-20 { height: 20px; }
main .h-30 { height: 30px; }
main .h-40 { height: 40px; }
main .immersive-reader { width: 32px; height: 32px; right: 0; top: 0; border: 0; border-radius: 0.2rem; background: #f2f2f2 url("https://ircdname.azureedge.net/permanent-static-resources/immersive-reader-icon.svg") no-repeat 6px 6px; background-size: 20px 20px; position: absolute; }
main .immersive-reader + h1 { padding-right: 52px; }
main .immersive-reader:hover { background-color: #e6e6e6; }
main .mb-12 { margin-bottom: 12px; }
main .mb-24 { margin-bottom: 24px; }
main .player { margin-top: 24px; padding: 6px; border-radius: 100px; background-color: #f2f2f2; display: flex; align-items: center; gap: 6px; }
main .player button { width: 40px; height: 40px; background: #e6e6e6 url("/en-gb/emea/business/aihttps://www.microsoft.com/images/icons.svg"); background-size: auto 700%; flex-shrink: 0; }
main .player button[role="link"] { background-position: -400% -500%; }
main .player button.mute { background-position: -200% -500%; }
main .player button.mute.on { background-position: -300% -500%; }
main .player button.play { background-position: 0 -500%; }
main .player button.play.on { background-position: -100% -500%; }
main .player button:hover { background-color: #d2d2d2; }
main .player div { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: #505050; position: relative; }
main .player div:first-of-type { display: none; }
main .player div:first-of-type:before { content: ""; width: 2px; height: 100%; right: -7px; background-color: #e6e6e6; position: absolute; }
main .player input[type="range"] { width: 100%; background: transparent; appearance: none; -webkit-appearance: none; }
main .player input[type="range"]:focus { outline: none; }
main .player input[type="range"]:focus::-moz-range-thumb { outline: 3px dotted #505050; }
main .player input[type="range"]:focus::-webkit-slider-thumb { outline: 3px dotted #505050; }
main .player input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 100px; background-color: #505050; }
main .player input[type="range"]::-moz-range-track { height: 6px; border-radius: 100px; background-color: #e6e6e6; }
main .player input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 100px; background-color: #e6e6e6; }
main .player input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 0; border-radius: 100px; background-color: #505050; -webkit-appearance: none; appearance: none; }
main .rounded-xl { border-radius: 12px !important; }
main .space { width: 66%; height: 2px; margin: auto; margin-bottom: 48px; border-radius: 100px; background-color: #f2f2f2; }
main .swiper { margin: 0 -12px 48px -12px; padding: 0 36px 24px 36px; }
main .swiper-button-next { width: 36px; height: calc(100% - 24px); margin: 0; outline-offset: -3px; background-color: #ffffff; color: #2f2f2f; }
main .swiper-button-next.swiper-button-disabled { color: #e6e6e6; opacity: 1; }
main .swiper-button-next:after { content: ""; font-family: "MWF-FLUENT-ICONS"; font-size: 18px; line-height: initial; transition: margin-left 0.2s; }
main .swiper-button-next:hover:after { margin-left: 6px; }
main .swiper-button-prev { width: 36px; height: calc(100% - 24px); margin: 0; outline-offset: -3px; background-color: #ffffff; color: #2f2f2f; }
main .swiper-button-prev.swiper-button-disabled { color: #e6e6e6; opacity: 1; }
main .swiper-button-prev:after { content: ""; font-family: "MWF-FLUENT-ICONS"; font-size: 18px; line-height: initial; transition: margin-right 0.2s; }
main .swiper-button-prev:hover:after { margin-right: 6px; }
main .swiper-pagination-horizontal.swiper-pagination { bottom: 0; line-height: 8px; }
main .swiper-pagination-horizontal.swiper-pagination .swiper-pagination-bullet { background-color: #e6e6e6; opacity: 1; }
main .swiper-pagination-horizontal.swiper-pagination .swiper-pagination-bullet-active { background-color: #2f2f2f; }
main .swiper-slide { max-width: 360px; height: auto; min-height: 480px; border-radius: 12px; background-color: #f2f2f2; transition: background-color 0.2s; display: flex; flex-direction: column; overflow: hidden; }
main .swiper-slide .background { height: 180px; border-bottom: 6px solid; display: flex; flex-direction: column; position: relative; overflow-y: hidden; }
main .swiper-slide .background .tags { margin: 24px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
main .swiper-slide .background .tags .tag { padding: 4px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; }
main .swiper-slide .background img { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 1; }
main .swiper-slide .background img.top { object-position: top; }
main .swiper-slide .metadata { padding: 24px; display: flex; flex-direction: column; flex: 1; }
main .swiper-slide .metadata a { margin-left: auto; margin-top: auto; padding: 8px 52px 8px 24px; border-radius: 100px; font-weight: 600; color: #2f2f2f; transition: background-color 0.2s; position: relative; text-decoration: none; }
main .swiper-slide .metadata a.listen:before { background-position-x: -400%; }
main .swiper-slide .metadata a.read:before { background-position-x: -100%; }
main .swiper-slide .metadata a.register:before { background-position-x: -200%; }
main .swiper-slide .metadata a.watch:before { background-position-x: -300%; }
main .swiper-slide .metadata a:before { content: ""; height: calc(100% - 4px); aspect-ratio: 1; right: 2px; top: 2px; border-radius: 100px; background-image: url("/en-gb/emea/business/aihttps://www.microsoft.com/images/icons.svg"); background-size: auto 700%; position: absolute; }
main .swiper-slide .metadata img { margin-bottom: 12px; align-self: start; }
main .swiper-slide .metadata p { margin-bottom: 12px; font-size: 14px; }
main .swiper-slide .metadata p:has(+ img) { margin-bottom: 24px; }
main .swiper-slide.new:before { content: "NEW"; width: 96px; height: 72px; left: 0; bottom: 0; padding: 12px; clip-path: polygon(0 0, 0 100%, 100% 100%); font-size: 12px; font-weight: 700; line-height: 1; display: flex; align-items: end; position: absolute; }
main .swiper-slide:has(a) { cursor: pointer; }
main .swiper-slide:has(a):hover { background-color: #e6e6e6; }
main .theme { margin-bottom: 48px; display: inline-flex; align-items: center; }
main .theme button { width: 40px; height: 40px; margin-left: 12px; background-image: url("/en-gb/emea/business/aihttps://www.microsoft.com/images/icons.svg"); background-size: auto 700%; background-position-y: -400%; flex: none; }
main .theme:before { content: ""; width: 60px; height: 60px; margin-right: 12px; border-radius: 100px; background-image: url("/en-gb/emea/business/aihttps://www.microsoft.com/images/icons.svg"); background-size: auto 700%; flex: none; }
main .theme-engagement:before { background-color: var(--pink); background-position-y: -100%; }
main .theme-experience:before { background-color: var(--teal); background-position-y: 0; }
main .theme-innovation:before { background-color: var(--blue); background-position-y: -300%; }
main .theme-processes:before { background-color: var(--gold); background-position-y: -200%; }
main ::backdrop { background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); animation: open 0.2s; }
main a { color: #2f2f2f; }
main a.button { padding: 8px 24px; border-radius: 100px; font-weight: 600; background-color: #505050; color: #ffffff; transition: background-color 0.2s; display: inline-block; position: relative; text-decoration: none; }
main a.button:focus { outline-color: #505050; }
main a.button:hover { background-color: #404040; }
main button { padding: 0; border: 0; border-radius: 100px; background-color: #f2f2f2; color: #2f2f2f; transition: background-color 0.2s; text-align: left; }
main button:hover { background-color: #e6e6e6; }
main dialog { width: calc(100% - 24px); max-width: 800px; padding: 24px; border: 0; border-radius: 12px; color: #2f2f2f; animation: open 0.2s; }
main dialog .close-dialog { right: 12px; top: 12px; width: 40px; height: 40px; background-image: url("/en-gb/emea/business/aihttps://www.microsoft.com/images/icons.svg"); background-size: auto 700%; background-position: -100% -400%; position: absolute; }
main dialog .space { margin: 24px auto; }
main dialog .theme { width: max-content; margin: 0 auto 24px auto; display: flex; }
main dialog .theme:before { width: 80px; height: 80px; margin-right: 0; }
main dialog img { margin: 0 auto 24px auto; display: flex; }
main dialog img.headshot { width: 100px; height: 100px; border-radius: 100px; }
main h1 { margin: 0; font-size: 22px; }
main h1:has(+ p) { margin-bottom: 6px; }
main h2 { margin: 0; font-size: 20px; }
main h2:has(+ p) { margin-bottom: 6px; }
main h3 { margin: 0; font-size: 18px; }
main h3:has(+ p) { margin-bottom: 6px; }
main h4 { margin: 0; font-size: 18px; }
main h4:has(+ p) { margin-bottom: 6px; }
main p { margin: 0; }
main p.max { font-size: 16px; }
main p.pin { font-family: "Cascadia Mono", monospace; font-size: 14px; }
main p:has(+ p) { margin-bottom: 12px; }
main p:has(+ q) { margin-bottom: 12px; }
main q { font-style: italic; color: #505050; display: inline-block; }
main strong { font-weight: 600; }

@media screen and (min-width: 540px) {
	#hero-dialog { height: 60px; }
	main .bg-hero .card-background picture { height: 320px; }
	main .player { margin-left: 24px; margin-right: 24px; padding: 12px; gap: 12px; }
	main .player div:first-of-type { display: block; }
	main dialog .space ~ * { text-align: center; }
	main q { padding: 0 24px; }
}

@media screen and (min-width: 860px) {
	#mainContent { margin-top: 48px; }
	#themes { margin: 48px 24px; }
	#themes p { display: block; }
	main .ad { flex-direction: row; }
	main .ad > :first-child { padding: 48px; }
	main .bg-hero .card-background picture { height: 400px; }
	main .columns { margin: 48px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	main .material-blur { background-color: #ffffff; }
	main .player { margin-left: 48px; margin-right: 48px; }
	main .space.vertical { display: none; }
	main dialog { padding: 48px; }
	main h1 { font-size: 28px; }
	main h2 { font-size: 24px; }
	main h3 { font-size: 20px; }
	main h4 { font-size: 18px; }
	main p.max { font-size: 18px; }
	main q { padding: 0 48px; }
}

@media screen and (min-width: 1084px) {
	#mainContent { margin-top: 24px; }
	#themes { margin: 48px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	main .ad { margin: 0 48px 48px 48px; }
	main .columns { margin: 48px; }
	main .container { padding: 0; }
	main .d-center { text-align: center; }
	main .immersive-reader { right: -24px; top: -24px; }
	main .immersive-reader + h1 { padding-right: 32px; }
	main .space { width: 33%; }
	main .swiper { margin: 0 0 48px 0; padding: 0 48px 24px 48px; }
	main .swiper-button-next { width: 48px; }
	main .swiper-button-next:after { font-size: 24px; }
	main .swiper-button-prev { width: 48px; }
	main .swiper-button-prev:after { font-size: 24px; }
}