/*! File name: main.css
 * ------------------------------------------------
 * ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  01. Fonts
 *  02. Variables
 *  03. Template Backgrounds
 *  04. Basic Styles
 *  05. Elements - Page Structure
 *  06. Elements - Typography
 *  07. Elements - Controls
 *  08. Elements - Forms
 *  09. Elements - Components
 *  10. Elements - Common Classes
 *  11. Block - Header
 *  12. Block - Menu
 *  13. Block - CTA
 *  14. Block - Footer
 *  15. Block - Popup
 *  16. Block - Hero Section #00
 *  17. Block - Hero Section #01
 *  18. Block - Hero Section #02
 *  19. Block - Hero Section #03
 *  20. Block - Hero Section #04
 *  21. Block - Hero Section #05
 *  22. Block - Hero Section #06
 *  22. Block - Hero Section #07
 *  23. Block - Hero Section #08
 *  24. Block - Hero Section #09
 *  25. Block - Blog
 *  26. Block - Blog Article
 *  27. Block - 404 Error
 *  28. Block - Demo List
 *  29. Block - Demo Cards
 *  30. Block - Demo Responsive Promo
 *  31. Block - Demo Inner Pages Slider
 *  32. Block - Demo Components
 *  33. Block - Demo Features
 *  34. Block - Demo CTA
 *  35. Block - Demo Footer
 *  36. Features - Hover Reveal
 *  37. Features - About
 *  38. Features - Pinned Image
 *  39. Features - Pinned Universal
 *  40. Features - Pinned Projects
 *  41. Features - Projects List
 *  42. Features - Projects Masonry
 *  43. Features - Awards List
 *  44. Features - Statistics Simple
 *  45. Features - Statistics Cards
 *  46. Features - Services Cards #01
 *  47. Features - Services Cards #02
 *  48. Features - Services List
 *  49. Features - Capabilities List
 *  50. Features - Resume List
 *  51. Features - Approach List
 *  52. Features - Divider Image Parallax
 *  53. Features - Marquee
 *  54. Features - Stack Services #01
 *  55. Features - Stack Services #02
 *  56. Features - Stack Projects
 *  57. Features - Testimonials Style #01
 *  58. Features - Testimonials Style #02
 *  59. Features - Partners Cards
 *  60. Features - Tech Stack Cards
 *  61. Features - Blog Preview
 *  62. Features - Accordion
 *  63. Features - Pricing Cards
 *  64. Features - Team Cards
 *  65. Features - Values
 *  66. Features - Project Details
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */
/* ------------------------------------------------*/
/* Fonts Start */
/* ------------------------------------------------*/
/* Funnel Display font */
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");
/* Funnel Sans font */
@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/* Playfair Display - elegant serif italic for headline accents */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400&display=swap");

/* ------------------------------------------------*/
/* Fonts End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Variables Start */
/* ------------------------------------------------*/
:root {
  --_size: 1.8rem;
  --_font-default: "Funnel Sans", sans-serif;
  --_font-accent: "Funnel Display", sans-serif;
  --_radius-s: 1rem;
  --_radius-m: 1.6rem;
  --_radius-pt-m: 1.6rem;
  --_radius-l: 3.8rem;
  --_radius-xl: 6rem;
  --_animspeed-fast: 0.1s;
  --_animspeed-medium: 0.3s;
  --_animspeed-slow: 0.6s;
  --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09);
  /* light color scheme */
  --base--light: #FAF7F6;
  --base-rgb--light: 250, 247, 246;
  --base-tint--light: #FFFFFF;
  --base-shade--light: #e0dddb;
  --base-opp--light: #161616;
  --base-opp-tint--light: #1C1C1C;
  --accent--light: #9F8BE7;
  --accent-rgb--light: 159, 139, 231;
  --additional--light: #DDF160;
  --additional-rgb--light: 221, 241, 96;
  --neutral-transparent--light: rgba(255, 255, 255, 0.3);
  --st-bright--light: #161616;
  --st-medium--light: #7C7C7C;
  --st-muted--light: #E0DDDB;
  --st-opp-bright--light: #FFFFFF;
  --fw-regular--light: 400;
  --fw-medium--light: 600;
  --fw-semibold--light: 700;
  --fw-bold--light: 800;
  --fw-regular-opp--light: 300;
  --fw-medium-opp--light: 500;
  --t-bright--light: #161616;
  --t-medium--light: #303030;
  --t-muted--light: #585858;
  --t-muted-extra--light: #B2AEAD;
  --t-opp-bright--light: #FFFFFF;
  --t-opp-medium--light: #ACACAC;
  --t-opp-muted--light: #838383;
  --bg-demo-screen-01--light: url(../img/demo/screens/01.webp);
  --bg-demo-screen-02--light: url(../img/demo/screens/02.webp);
  --bg-demo-screen-03--light: url(../img/demo/screens/03.webp);
  --bg-demo-screen-04--light: url(../img/demo/screens/04.webp);
  --bg-demo-screen-05--light: url(../img/demo/screens/05.webp);
  --bg-demo-screen-06--light: url(../img/demo/screens/06.webp);
  --bg-demo-screen-07--light: url(../img/demo/screens/07.webp);
  --bg-demo-screen-08--light: url(../img/demo/screens/08.webp);
  --bg-demo-screen-09--light: url(../img/demo/screens/09.webp);
  /* dark color scheme */
  --base--dark: #161616;
  --base-rgb--dark: 22, 22, 22;
  --base-tint--dark: #1C1C1C;
  --base-shade--dark: #0a0a0a;
  --base-opp--dark: #FAF7F6;
  --base-opp-tint--dark: #ffffff;
  --accent--dark: #DDF160;
  --accent-rgb--dark: 221, 241, 96;
  --additional--dark: #9F8BE7;
  --additional-rgb--dark: 159, 139, 231;
  --neutral-transparent--dark: rgba(0, 0, 0, 0.3);
  --st-bright--dark: #FFFFFF;
  --st-medium--dark: #646464;
  --st-muted--dark: #252525;
  --st-opp-bright--dark: #0f0f0f;
  --fw-regular--dark: 300;
  --fw-medium--dark: 500;
  --fw-semibold--dark: 600;
  --fw-bold--dark: 700;
  --fw-regular-opp--dark: 400;
  --fw-medium-opp--dark: 600;
  --t-bright--dark: #FFFFFF;
  --t-medium--dark: #ACACAC;
  --t-muted--dark: #838383;
  --t-muted-extra--dark: #535151;
  --t-opp-bright--dark: #161616;
  --t-opp-medium--dark: #303030;
  --t-opp-muted--dark: #969696;
  --bg-demo-screen-01--dark: url(../img/demo/screens/01-d.webp);
  --bg-demo-screen-02--dark: url(../img/demo/screens/02-d.webp);
  --bg-demo-screen-03--dark: url(../img/demo/screens/03-d.webp);
  --bg-demo-screen-04--dark: url(../img/demo/screens/04-d.webp);
  --bg-demo-screen-05--dark: url(../img/demo/screens/05-d.webp);
  --bg-demo-screen-06--dark: url(../img/demo/screens/06-d.webp);
  --bg-demo-screen-07--dark: url(../img/demo/screens/07-d.webp);
  --bg-demo-screen-08--dark: url(../img/demo/screens/08-d.webp);
  --bg-demo-screen-09--dark: url(../img/demo/screens/09-d.webp);
  /* permanent colors */
  --pt-base: #FFFFFF;
  --pt-base-dark: #161616;
  --pt-t-light-bright: #FFFFFF;
  --pt-t-dark-bright: #161616;
  --pt-st-light-bright: #FFFFFF;
  --pt-st-dark-bright: #161616;
  --pt-purple-rgb: 159, 139, 231;
  --pt-purple-dark-rgb: 33, 10, 113;
  /* neutral colors */
  --nl-white: #ffffff;
  --nl-black: #000000;
}

@media only screen and (min-width: 768px) {
  :root {
    --_radius-m: 2.6rem;
    --_radius-l: 5rem;
    --_radius-xl: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  :root {
    --_radius-xl: 8rem;
  }
}

/* defaults — dark is the default scheme; light applies only when the user
   explicitly opts in via [color-scheme=light]. This keeps the pre-JS paint dark
   regardless of the OS preference, so there is no light flash on first load. */
:root {
  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-shade: var(--base-shade--dark);
  --base-opp: var(--base-opp--dark);
  --base-opp-tint: var(--base-opp-tint--dark);
  --accent: var(--accent--dark);
  --accent-rgb: var(--accent-rgb--dark);
  --additional: var(--additional--dark);
  --additional-rgb: var(--additional-rgb--dark);
  --neutral-transparent: var(--neutral-transparent--dark);
  --st-bright: var(--st-bright--dark);
  --st-medium: var(--st-medium--dark);
  --fw-semibold: var(--fw-semibold--dark);
  --st-muted: var(--st-muted--dark);
  --st-opp-bright: var(--st-opp-bright--dark);
  --fw-regular: var(--fw-regular--dark);
  --fw-medium: var(--fw-medium--dark);
  --fw-bold: var(--fw-bold--dark);
  --fw-regular-opp: var(--fw-regular-opp--dark);
  --fw-medium-opp: var(--fw-medium-opp--dark);
  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);
  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);
  --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
  --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
  --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
  --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
  --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
  --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
  --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
  --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
  --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
}

[color-scheme=light] {
  --base: var(--base--light);
  --base-rgb: var(--base-rgb--light);
  --base-tint: var(--base-tint--light);
  --base-shade: var(--base-shade--light);
  --base-opp: var(--base-opp--light);
  --base-opp-tint: var(--base-opp-tint--light);
  --accent: var(--accent--light);
  --accent-rgb: var(--accent-rgb--light);
  --additional: var(--additional--light);
  --additional-rgb: var(--additional-rgb--light);
  --neutral-transparent: var(--neutral-transparent--light);
  --st-bright: var(--st-bright--light);
  --st-medium: var(--st-medium--light);
  --st-muted: var(--st-muted--light);
  --st-opp-bright: var(--st-opp-bright--light);
  --fw-regular: var(--fw-regular--light);
  --fw-medium: var(--fw-medium--light);
  --fw-semibold: var(--fw-semibold--light);
  --fw-bold: var(--fw-bold--light);
  --fw-regular-opp: var(--fw-regular-opp--light);
  --fw-medium-opp: var(--fw-medium-opp--light);
  --t-bright: var(--t-bright--light);
  --t-medium: var(--t-medium--light);
  --t-muted: var(--t-muted--light);
  --t-muted-extra: var(--t-muted-extra--light);
  --t-opp-bright: var(--t-opp-bright--light);
  --t-opp-medium: var(--t-opp-medium--light);
  --t-opp-muted: var(--t-opp-muted--light);
  --bg-demo-screen-01: var(--bg-demo-screen-01--light);
  --bg-demo-screen-02: var(--bg-demo-screen-02--light);
  --bg-demo-screen-03: var(--bg-demo-screen-03--light);
  --bg-demo-screen-04: var(--bg-demo-screen-04--light);
  --bg-demo-screen-05: var(--bg-demo-screen-05--light);
  --bg-demo-screen-06: var(--bg-demo-screen-06--light);
  --bg-demo-screen-07: var(--bg-demo-screen-07--light);
  --bg-demo-screen-08: var(--bg-demo-screen-08--light);
  --bg-demo-screen-09: var(--bg-demo-screen-09--light);
}

[color-scheme=dark] {
  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-shade: var(--base-shade--dark);
  --base-opp: var(--base-opp--dark);
  --base-opp-tint: var(--base-opp-tint--dark);
  --accent: var(--accent--dark);
  --accent-rgb: var(--accent-rgb--dark);
  --additional: var(--additional--dark);
  --additional-rgb: var(--additional-rgb--dark);
  --neutral-transparent: var(--neutral-transparent--dark);
  --st-bright: var(--st-bright--dark);
  --st-medium: var(--st-medium--dark);
  --st-muted: var(--st-muted--dark);
  --st-opp-bright: var(--st-opp-bright--dark);
  --fw-regular: var(--fw-regular--dark);
  --fw-medium: var(--fw-medium--dark);
  --fw-semibold: var(--fw-semibold--dark);
  --fw-bold: var(--fw-bold--dark);
  --fw-regular-opp: var(--fw-regular-opp--dark);
  --fw-medium-opp: var(--fw-medium-opp--dark);
  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);
  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);
  --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
  --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
  --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
  --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
  --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
  --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
  --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
  --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
  --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
}

/* ------------------------------------------------*/
/* Variables End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
.about-image-1 {
  background-image: url(../img/hero/cinematic-production.jpg);
}

.divider-image-1 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-2 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-3 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-4 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-5 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-6 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-7 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-8 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-9 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.divider-image-10 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.mxd-promo__bg {
  background-image: url(../img/hero/film-camera.jpg);
}

.preview-image-1 {
  background-image: url(img/portfolio/aamir-khan-nutrichoice-lipsync.jpg);
}

.preview-image-2 {
  background-image: url(https://img.youtube.com/vi/Yg1V54WjjWI/maxresdefault.jpg);
}

.preview-image-3 {
  background-image: url(../img/portfolio/candyman-storybook.jpg);
}

.preview-image-4 {
  background-image: url(img/portfolio/Bourbon-thumbnail.jpg);
}

.preview-image-5 {
  background-image: url(img/portfolio/Britannia-50-50-Golmaal-Cricket.jpg);
}

.preview-image-6 {
  background-image: url(../img/portfolio/chings-chilli-oil-product-placement.jpg);
}

.preview-image-7 {
  background-image: url(../img/portfolio/Good-day-crafted-butter-jeera.jpg);
}

.blog-preview-image-1 {
  background-image: url(../img/blog/lipsync-pipeline.jpg);
}

.blog-preview-image-2 {
  background-image: url(../img/blog/broadcast-films.jpg);
}

.blog-preview-image-3 {
  background-image: url(../img/blog/webgl-performance.jpg);
}

.headline-img-01::before {
  background-image: url(../img/hero/film-camera.jpg);
}

.headline-img-02::before {
  background-image: url(../img/hero/film-camera.jpg);
}

.headline-img-03::after {
  background-image: url(../img/hero/film-camera.jpg);
}

.headline-img-04::before {
  background-image: url(../img/hero/film-camera.jpg);
}

.headline-img-05::before {
  background-image: url(../img/hero/film-camera.jpg);
}

.headline-img-06::before {
  background-image: url(../img/hero/film-camera.jpg);
}

.headline-img-07::before {
  background-image: url(../img/hero/film-camera.jpg);
}

.image-values-1 {
  background-image: url(../img/portfolio/film-production.jpg);
}

.image-values-2 {
  background-image: url(../img/portfolio/broadcast-studio.jpg);
}

.prj-details-img-01 {
  background-image: url(../img/hero/divider-cta.jpg);
}

.prj-details-img-02 {
  background-image: url(../img/hero/divider-cta.jpg);
}

/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Basic Styles Start */
/* ------------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

button:active,
button:focus {
  outline: none !important;
}

button::-moz-focus-inner {
  border: 0 !important;
}

input::-moz-focus-inner {
  border: 0 !important;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  -webkit-tap-highlight-color: transparent;
}

/* Interactive demo widgets hang click handlers off divs/spans/icons,
   so the tap-highlight reset must cover every element, not just form
   controls and links. */
* {
  -webkit-tap-highlight-color: transparent;
}

::-moz-selection {
  background-color: var(--accent);
  color: var(--t-opp-bright);
  text-shadow: none;
}

::selection {
  background-color: var(--accent);
  color: var(--t-opp-bright);
  text-shadow: none;
}

::-webkit-scrollbar {
  display: none;
  width: 6px;
  background: var(--base-shade);
}

@media only screen and (min-width: 768px) {
  ::-webkit-scrollbar {
    display: block;
  }
}

::-webkit-scrollbar-track {
  background-color: var(--base-shade);
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: var(--_radius-s);
}

html {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  width: 100%;
  min-width: 360px;
  overflow-x: unset !important;
  font: normal 400 var(--_size)/1.6 var(--_font-default);
  text-rendering: optimizeLegibility;
  background-color: var(--base);
  color: var(--t-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section {
  position: relative;
  width: 100%;
  min-width: 360px;
}

a {
  text-decoration: none;
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.overflow-hidden {
  overflow: hidden !important;
}

.components {
  position: relative;
}

.components__item {
  position: relative;
  padding: 8rem 10%;
  border-bottom: 1px solid var(--st-muted);
}

.components__item.no-padding {
  padding: 0;
}

.components__caption {
  display: block;
  font: normal 400 1.3rem/1 var(--_font-default);
  color: var(--t-medium);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin-bottom: 2rem;
}

.width-50-desktop {
  width: 100%;
}

@media only screen and (min-width: 1200px) {
  .width-50-desktop {
    width: 50%;
  }
}

.mxd-spacer {
  position: relative;
  width: 100%;
  height: 100px;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ------------------------------------------------*/
/* Basic Styles End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Page Structure Start */
/* ------------------------------------------------*/
.mxd-page-content {
  position: relative;
}

.mxd-page-content.inner-page-content {
  padding-top: 7.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-page-content.inner-page-content {
    padding-top: 9.6rem;
  }
}

.mxd-wrapper {
  position: relative;
  width: 100%;
  min-width: 360px;
}

.mxd-wrapper.mxd-wrapper-opposite {
  background-color: var(--base-opp);
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
}

.mxd-wrapper.padding-top-pre-title {
  padding-top: 13rem;
}

.mxd-wrapper.margin-bottom-pre-title {
  margin-bottom: 13rem;
}

@media only screen and (min-width: 768px) {
  .mxd-wrapper.padding-top-pre-title {
    padding-top: 14.3rem;
  }

  .mxd-wrapper.margin-bottom-pre-title {
    margin-bottom: 14.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-wrapper.padding-top-pre-title {
    padding-top: 18.3rem;
  }

  .mxd-wrapper.margin-bottom-pre-title {
    margin-bottom: 18.3rem;
  }
}

.mxd-section {
  position: relative;
  width: 100%;
  min-width: 360px;
}

.mxd-section.padding-blog-default-pre-grid {
  padding-bottom: 3rem;
}

.mxd-section.padding-blog-descr-pre-grid {
  padding-bottom: 2.2rem;
}

.mxd-section.padding-default {
  padding-bottom: 8rem;
}

.mxd-section.padding-default.mobile-title {
  padding-bottom: 8rem;
}

.mxd-section.padding-pre-footer {
  padding-bottom: 11rem;
}

.mxd-section.padding-pre-pinned-img {
  padding-bottom: 14rem;
}

.mxd-section.padding-pre-grid {
  padding-bottom: 11rem;
}

.mxd-section.padding-pre-grid.mobile-grid-s {
  padding-bottom: 12.5rem;
}

.mxd-section.padding-pre-grid.mobile-grid-title {
  padding-bottom: 10rem;
}

.mxd-section.padding-pre-title {
  padding-bottom: 13rem;
}

.mxd-section.padding-pre-manifest {
  padding-bottom: 13.7rem;
}

.mxd-section.padding-pre-manifest.mobile-point-subtitle {
  padding-bottom: 13.7rem;
}

.mxd-section.padding-pre-stack {
  padding-bottom: 11rem;
}

.mxd-section.padding-stacked-section {
  padding-bottom: 10.1rem;
}

.mxd-section.padding-stacked-pre-mtext {
  padding-bottom: 8.1rem;
}

.mxd-section.padding-grid-pre-pinned {
  padding-bottom: 13rem;
}

.mxd-section.padding-grid-pre-mtext {
  padding-bottom: 11.3rem;
}

.mxd-section.padding-pinned-img-pre-mtext {
  padding-bottom: 10.4rem;
}

.mxd-section.padding-mtext {
  padding-bottom: 12.6rem;
}

.mxd-section.padding-mtext.mobile-title {
  padding-bottom: 11.6rem;
}

.mxd-section.padding-mtext-pre-title {
  padding-bottom: 11.6rem;
}

.mxd-section.padding-mtext-pre-grid {
  padding-bottom: 9.8rem;
}

.mxd-section.padding-mtext-pre-grid.mobile-grid-s {
  padding-bottom: 11.3rem;
}

.mxd-section.padding-mtext-pre-pinned {
  padding-bottom: 10.8rem;
}

.mxd-section.padding-mtext-pre-stack {
  padding-bottom: 2rem;
}

.mxd-section.padding-blog {
  padding-bottom: 8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section.padding-default {
    padding-bottom: 9rem;
  }

  .mxd-section.padding-default.mobile-title {
    padding-bottom: 9rem;
  }

  .mxd-section.padding-pre-footer {
    padding-bottom: 10.7rem;
  }

  .mxd-section.padding-pre-pinned-img {
    padding-bottom: 16rem;
  }

  .mxd-section.padding-pre-grid {
    padding-bottom: 13rem;
  }

  .mxd-section.padding-pre-grid.mobile-grid-s {
    padding-bottom: 13rem;
  }

  .mxd-section.padding-pre-grid.mobile-grid-title {
    padding-bottom: 11.3rem;
  }

  .mxd-section.padding-pre-title {
    padding-bottom: 14.3rem;
  }

  .mxd-section.padding-pre-manifest {
    padding-bottom: 13.9rem;
  }

  .mxd-section.padding-pre-manifest.mobile-point-subtitle {
    padding-bottom: 15.7rem;
  }

  .mxd-section.padding-pre-stack {
    padding-bottom: 10rem;
  }

  .mxd-section.padding-stacked-section {
    padding-bottom: 11.3rem;
  }

  .mxd-section.padding-stacked-pre-mtext {
    padding-bottom: 7.3rem;
  }

  .mxd-section.padding-grid-pre-pinned {
    padding-bottom: 14.3rem;
  }

  .mxd-section.padding-grid-pre-mtext {
    padding-bottom: 10.4rem;
  }

  .mxd-section.padding-pinned-img-pre-mtext {
    padding-bottom: 10rem;
  }

  .mxd-section.padding-mtext {
    padding-bottom: 13.4rem;
  }

  .mxd-section.padding-mtext.mobile-title {
    padding-bottom: 11.6rem;
  }

  .mxd-section.padding-mtext-pre-title {
    padding-bottom: 11.6rem;
  }

  .mxd-section.padding-mtext-pre-grid {
    padding-bottom: 10.6rem;
  }

  .mxd-section.padding-mtext-pre-grid.mobile-grid-s {
    padding-bottom: 10.6rem;
  }

  .mxd-section.padding-mtext-pre-pinned {
    padding-bottom: 10.8rem;
  }

  .mxd-section.padding-mtext-pre-stack {
    padding-bottom: 0;
  }

  .mxd-section.padding-blog {
    padding-bottom: 9rem;
  }
}

@media only screen and (min-width: 992px) {
  .mxd-section.padding-pre-footer {
    padding-bottom: 8.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section.padding-blog-default-pre-grid {
    padding-bottom: 9rem;
  }

  .mxd-section.padding-blog-descr-pre-grid {
    padding-bottom: 7.2rem;
  }

  .mxd-section.padding-default {
    padding-bottom: 9rem;
  }

  .mxd-section.padding-default.mobile-title {
    padding-bottom: 9rem;
  }

  .mxd-section.padding-pre-footer {
    padding-bottom: 7.2rem;
  }

  .mxd-section.padding-pre-pinned-img {
    padding-bottom: 10rem;
  }

  .mxd-section.padding-pre-grid {
    padding-bottom: 13rem;
  }

  .mxd-section.padding-pre-grid.mobile-grid-s {
    padding-bottom: 13rem;
  }

  .mxd-section.padding-pre-grid.mobile-grid-title {
    padding-bottom: 13rem;
  }

  .mxd-section.padding-pre-title {
    padding-bottom: 14.3rem;
  }

  .mxd-section.padding-pre-manifest {
    padding-bottom: 13.9rem;
  }

  .mxd-section.padding-pre-manifest.mobile-point-subtitle {
    padding-bottom: 13.9rem;
  }

  .mxd-section.padding-pre-stack {
    padding-bottom: 10rem;
  }

  .mxd-section.padding-grid-pre-pinned {
    padding-bottom: 10rem;
  }

  .mxd-section.padding-grid-pre-mtext {
    padding-bottom: 10.4rem;
  }

  .mxd-section.padding-pinned-img-pre-mtext {
    padding-bottom: 4.3rem;
  }

  .mxd-section.padding-mtext {
    padding-bottom: 13.4rem;
  }

  .mxd-section.padding-mtext.mobile-title {
    padding-bottom: 13.4rem;
  }

  .mxd-section.padding-mtext-pre-pinned {
    padding-bottom: 7.6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-section.padding-pre-footer {
    padding-bottom: 5.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section.padding-blog-default-pre-grid {
    padding-bottom: 11rem;
  }

  .mxd-section.padding-default {
    padding-bottom: 11rem;
  }

  .mxd-section.padding-default.mobile-title {
    padding-bottom: 11rem;
  }

  .mxd-section.padding-pre-footer {
    padding-bottom: 6rem;
  }

  .mxd-section.padding-pre-pinned-img {
    padding-bottom: 11rem;
  }

  .mxd-section.padding-pre-grid {
    padding-bottom: 17rem;
  }

  .mxd-section.padding-pre-grid.mobile-grid-s {
    padding-bottom: 17rem;
  }

  .mxd-section.padding-pre-grid.mobile-grid-title {
    padding-bottom: 17rem;
  }

  .mxd-section.padding-pre-title {
    padding-bottom: 18.3rem;
  }

  .mxd-section.padding-pre-manifest {
    padding-bottom: 17.9rem;
  }

  .mxd-section.padding-pre-manifest.mobile-point-subtitle {
    padding-bottom: 17.9rem;
  }

  .mxd-section.padding-pre-stack {
    padding-bottom: 11rem;
  }

  .mxd-section.padding-stacked-section {
    padding-bottom: 12.3rem;
  }

  .mxd-section.padding-stacked-pre-mtext {
    padding-bottom: 8.3rem;
  }

  .mxd-section.padding-grid-pre-pinned {
    padding-bottom: 11rem;
  }

  .mxd-section.padding-grid-pre-mtext {
    padding-bottom: 14.4rem;
  }

  .mxd-section.padding-pinned-img-pre-mtext {
    padding-bottom: 5.3rem;
  }

  .mxd-section.padding-mtext {
    padding-bottom: 17.3rem;
  }

  .mxd-section.padding-mtext.mobile-title {
    padding-bottom: 17.3rem;
  }

  .mxd-section.padding-mtext-pre-title {
    padding-bottom: 15.6rem;
  }

  .mxd-section.padding-mtext-pre-grid {
    padding-bottom: 14.6rem;
  }

  .mxd-section.padding-mtext-pre-grid.mobile-grid-s {
    padding-bottom: 14.6rem;
  }

  .mxd-section.padding-mtext-pre-pinned {
    padding-bottom: 5.6rem;
  }

  .mxd-section.padding-mtext-pre-stack {
    padding-bottom: 3.7rem;
  }

  .mxd-section.padding-blog {
    padding-bottom: 11rem;
  }
}

.mxd-section.padding-hero-07 {
  padding-top: 14rem;
}

.mxd-section.padding-hero-09,
.mxd-section.padding-hero-06 {
  padding-top: 13rem;
}

.mxd-section.padding-hero-08 {
  padding-top: 3.4rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section.padding-hero-07 {
    padding-top: 16rem;
  }

  .mxd-section.padding-hero-09,
  .mxd-section.padding-hero-06 {
    padding-top: 13.8rem;
  }

  .mxd-section.padding-hero-08 {
    padding-top: 2.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section.padding-hero-01 {
    padding-top: 12rem;
  }

  .mxd-section.padding-hero-07 {
    padding-top: 12rem;
  }

  .mxd-section.padding-hero-09 {
    padding-top: 6rem;
  }

  .mxd-section.padding-hero-06 {
    padding-top: 5.4rem;
  }

  .mxd-section.padding-hero-08 {
    padding-top: 0rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section.padding-hero-01 {
    padding-top: 16rem;
  }

  .mxd-section.padding-hero-07 {
    padding-top: 16rem;
  }

  .mxd-section.padding-hero-06 {
    padding-top: 6.4rem;
  }

  .mxd-section.padding-hero-09 {
    padding-top: 7rem;
  }
}

.mxd-section-inner-headline {
  padding-top: 13rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section-inner-headline {
    padding-top: 15rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-inner-headline {
    padding-top: 13.6rem;
  }

  .mxd-section-inner-headline.grid-headline {
    padding-top: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section-inner-headline {
    padding-top: 17rem;
  }

  .mxd-section-inner-headline.grid-headline {
    padding-top: 20rem;
  }
}

.mxd-section-inner-headline.padding-default {
  padding-bottom: 14rem;
}

.mxd-section-inner-headline.padding-headline-pre-block {
  padding-bottom: 13rem;
}

.mxd-section-inner-headline.padding-headline-pre-grid {
  padding-bottom: 10rem;
}

.mxd-section-inner-headline.padding-s-headline-pre-grid {
  padding-bottom: 2rem;
}

.mxd-section-inner-headline.padding-headline-pre-stack {
  padding-bottom: 2.3rem;
}

.mxd-section-inner-headline.padding-text-pre-block {
  padding-bottom: 13rem;
}

.mxd-section-inner-headline.padding-s-text-pre-block {
  padding-bottom: 4.9rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section-inner-headline.padding-default {
    padding-bottom: 16rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-block {
    padding-bottom: 14.6rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-grid {
    padding-bottom: 11.6rem;
  }

  .mxd-section-inner-headline.padding-s-headline-pre-grid {
    padding-bottom: 3.6rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-stack {
    padding-bottom: 1rem;
  }

  .mxd-section-inner-headline.padding-text-pre-block {
    padding-bottom: 14.8rem;
  }

  .mxd-section-inner-headline.padding-s-text-pre-form {
    padding-bottom: 0;
  }

  .mxd-section-inner-headline.padding-s-text-pre-block {
    padding-bottom: 6.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-inner-headline.padding-headline-pre-block {
    padding-bottom: 14.2rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-grid {
    padding-bottom: 11.2rem;
  }

  .mxd-section-inner-headline.padding-s-headline-pre-grid {
    padding-bottom: 3.2rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-stack {
    padding-bottom: 0.6rem;
  }

  .mxd-section-inner-headline.padding-s-text-pre-form {
    padding-bottom: 3.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section-inner-headline.padding-default {
    padding-bottom: 20rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-block {
    padding-bottom: 18rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-grid {
    padding-bottom: 15rem;
  }

  .mxd-section-inner-headline.padding-s-headline-pre-grid {
    padding-bottom: 4.9rem;
  }

  .mxd-section-inner-headline.padding-headline-pre-stack {
    padding-bottom: 4.4rem;
  }

  .mxd-section-inner-headline.padding-text-pre-block {
    padding-bottom: 18.7rem;
  }

  .mxd-section-inner-headline.padding-s-text-pre-form {
    padding-bottom: 3rem;
  }

  .mxd-section-inner-headline.padding-s-text-pre-block {
    padding-bottom: 8.8rem;
  }
}

.mxd-section-fullscreen {
  width: 100%;
  height: 100vh;
  padding-top: 7.6rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .mxd-section-fullscreen {
    padding-top: 9.6rem;
  }
}

.mxd-container {
  position: relative;
  width: 100%;
  max-width: 1920px;
  padding: 0 3rem;
  margin: 0 auto;
}

.mxd-container.fullwidth-container {
  max-width: none;
  padding: 0;
}

.mxd-container.fullscreen-container {
  height: 100%;
}

.mxd-container.no-padding-container {
  padding: 0;
  overflow: hidden;
}

.mxd-container.grid-container {
  padding: 0 1.5rem;
}

.mxd-container.grid-l-container {
  padding: 0 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-container {
    padding: 0 6rem;
  }

  .mxd-container.grid-container {
    padding: 0 4.5rem;
  }

  .mxd-container.grid-l-container {
    padding: 0 4.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-container.grid-container.no-padding-right {
    padding-right: 0;
  }

  .mxd-container.grid-l-container {
    padding: 0 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-container {
    padding: 0 9rem;
  }

  .mxd-container.grid-container {
    padding: 0 7.5rem;
  }

  .mxd-container.grid-l-container {
    padding: 0 4.5rem;
  }
}

.mxd-container__circle {
  z-index: 2;
  position: relative;
  margin-bottom: -10rem;
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .mxd-container__circle {
    margin-bottom: 0;
    position: absolute;
    top: -10rem;
    right: 12rem;
  }

  .mxd-container__circle.circle-fit {
    right: 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-container__circle {
    right: 18rem;
  }

  .mxd-container__circle.circle-fit {
    right: 9rem;
  }
}

.mxd-grid-item {
  padding: 0 1.5rem;
  margin-top: 3rem;
}

.mxd-grid-item.no-margin {
  margin: 0;
}

.mxd-grid-item.no-margin-desktop {
  margin-top: 3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-grid-item.no-margin-desktop {
    margin: 0;
  }
}

.mxd-grid-item-l {
  padding: 0 1.5rem;
  margin-top: 3rem;
}

.mxd-grid-item-l.no-margin {
  margin: 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-grid-item-l {
    padding: 0 3rem;
  }
}

.mxd-block {
  position: relative;
}

.mxd-block.pre-stack-block {
  margin-bottom: -3rem;
  z-index: 1;
}

.mxd-block.fullscreen-block {
  height: 100%;
}

.mxd-block.absolute-centered-block {
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media only screen and (min-width: 768px) {
  .mxd-block.pre-stack-block {
    margin-bottom: -6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-block.pre-stack-block {
    margin-bottom: -9rem;
  }
}

.mxd-block__image {
  position: relative;
  height: 460px;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
  overflow: hidden;
  margin-bottom: 3.8rem;
}

.mxd-block__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-block__image {
    height: 600px;
    margin-bottom: 4.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-block__image {
    height: 100%;
  }
}

.mxd-block__name {
  position: relative;
}

.mxd-block__name.name-manifest {
  margin-bottom: 2.8rem;
  padding-top: 0;
}

.mxd-block__name.name-inner-headline {
  margin-bottom: 0.2rem;
}

.mxd-block__name.name-project-link {
  margin-top: 0;
  margin-bottom: 0.1rem;
}

@media only screen and (min-width: 768px) {
  .mxd-block__name.name-manifest {
    margin-bottom: 3.2rem;
  }

  .mxd-block__name.name-inner-headline {
    margin-bottom: 0.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-block__name.name-manifest {
    margin-bottom: 0;
    padding-top: 1.5rem;
  }

  .mxd-block__name.name-inner-headline {
    margin-bottom: 0;
    margin-top: 2rem;
  }

  .mxd-block__name.name-project-link {
    margin-top: 1.3rem;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-block__name.name-inner-headline {
    margin-top: 2.6rem;
  }

  .mxd-block__name.name-project-link {
    margin-top: 2rem;
  }
}

.mxd-block__content.content-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-block__content.content-flex {
    gap: 9rem;
  }
}

.inner-headline__title {
  position: relative;
}

.inner-headline__title.headline-img-before::before {
  content: "";
  display: inline-block;
  width: 8rem;
  height: 4.3rem;
  -moz-border-radius: 4.2rem;
  border-radius: 4.2rem;
  margin-right: 1.6rem;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

.inner-headline__title.headline-img-after::after {
  content: "";
  display: inline-block;
  width: 8rem;
  height: 4.3rem;
  -moz-border-radius: 4.2rem;
  border-radius: 4.2rem;
  margin-left: 1.6rem;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

@media only screen and (min-width: 768px) {
  .inner-headline__title.headline-img-before::before {
    width: 11rem;
    height: 5.8rem;
    margin-right: 2.2rem;
  }

  .inner-headline__title.headline-img-after::after {
    width: 11rem;
    height: 5.8rem;
    margin-left: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .inner-headline__title.headline-img-before::before {
    width: 14rem;
    height: 7rem;
    margin-right: 2.6rem;
  }

  .inner-headline__title.headline-img-after::after {
    width: 14rem;
    height: 7rem;
    margin-left: 2.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .inner-headline__title.headline-img-before::before {
    width: 16rem;
    height: 8.4rem;
    margin-right: 3.3rem;
  }

  .inner-headline__title.headline-img-after::after {
    width: 16rem;
    height: 8.4rem;
    margin-left: 3.3rem;
  }
}

/* ---------------------------------------------------------------- */
/* Headline "develop" — diffusion denoise pill                       */
/* The image resolves out of grain/blur as --rz tweens 1 -> 0 (JS).  */
/* Static / no-JS / reduced-motion fallback is the crisp frame.      */
/* ---------------------------------------------------------------- */
.hl-resolve {
  --rz: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 8rem;
  height: 4.3rem;
  margin-right: 1.6rem;
  border-radius: 4.2rem;
  overflow: hidden;
  isolation: isolate;
  /* nudge optically onto the cap-height of the headline */
  transform: translateY(-0.4rem);
}

.hl-resolve__img,
.hl-resolve__grain,
.hl-resolve__scan {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* The actual frame — blur + scale + desaturation lift as it resolves */
.hl-resolve__img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(calc(1 + var(--rz) * 0.07));
  filter:
    blur(calc(var(--rz) * 16px))
    saturate(calc(1 - var(--rz) * 0.85))
    contrast(calc(1 + var(--rz) * 0.25))
    brightness(calc(1 + var(--rz) * 0.04));
  will-change: filter, transform;
}

/* Animated fractal noise — the "denoise" that burns off */
.hl-resolve__grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: calc(var(--rz) * 0.95);
  animation: hl-grain-shift 0.5s steps(4) infinite;
  will-change: opacity, background-position;
}

/* A single processing sweep that passes once as it settles */
.hl-resolve__scan {
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%
  );
  background-size: 260% 100%;
  background-position: calc(var(--rz) * 130% - 15%) 0;
  opacity: calc(var(--rz) * 0.9);
  mix-blend-mode: screen;
}

@keyframes hl-grain-shift {
  0%   { background-position: 0 0; }
  25%  { background-position: -40px 30px; }
  50%  { background-position: 50px -20px; }
  75%  { background-position: -30px -40px; }
  100% { background-position: 0 0; }
}

/* Once resolved, drop the looping layers so nothing keeps animating */
.hl-resolve.is-done .hl-resolve__grain,
.hl-resolve.is-done .hl-resolve__scan {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hl-resolve__grain,
  .hl-resolve__scan {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .hl-resolve {
    width: 11rem;
    height: 5.8rem;
    margin-right: 2.2rem;
    transform: translateY(-0.5rem);
  }
}

@media only screen and (min-width: 1200px) {
  .hl-resolve {
    width: 14rem;
    height: 7rem;
    margin-right: 2.6rem;
    transform: translateY(-0.7rem);
  }
}

@media only screen and (min-width: 1600px) {
  .hl-resolve {
    width: 16rem;
    height: 8.4rem;
    margin-right: 3.3rem;
    transform: translateY(-0.9rem);
  }
}

.inner-headline__descr {
  margin-top: 3.8rem;
}

@media only screen and (min-width: 1200px) {
  .inner-headline__descr {
    margin-top: 1.8rem;
    padding-left: 3rem;
    max-width: 560px;
  }
}

@media only screen and (min-width: 1600px) {
  .inner-headline__descr {
    margin-top: 2rem;
    max-width: 620px;
  }
}

.inner-headline__text {
  margin-top: 3.3rem;
}

@media only screen and (min-width: 768px) {
  .inner-headline__text {
    margin-top: 4.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .inner-headline__text {
    margin-top: 4.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .inner-headline__text {
    margin-top: 5.9rem;
  }
}

.inner-headline__paragraph {
  margin-top: 3.8rem;
}

@media only screen and (min-width: 768px) {
  .inner-headline__paragraph {
    margin-top: 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .inner-headline__paragraph {
    margin-top: 4.1rem;
  }
}

@media only screen and (min-width: 1600px) {
  .inner-headline__paragraph {
    margin-top: 4.5rem;
  }
}

.inner-headline__data {
  margin-top: 4.4rem;
}

@media only screen and (min-width: 1200px) {
  .inner-headline__data {
    margin-top: 5.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .inner-headline__data {
    margin-top: 6.1rem;
  }
}

.inner-headline__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 5.5rem;
}

@media only screen and (min-width: 768px) {
  .inner-headline__tags {
    margin-top: 5.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .inner-headline__tags {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 1rem;
    height: 100%;
    margin-top: 0;
  }

  .inner-headline__tags .tag {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

.inner-headline__blogtags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 4.9rem;
}

@media only screen and (min-width: 1200px) {
  .inner-headline__blogtags {
    margin-top: 5.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .inner-headline__blogtags {
    margin-top: 5.9rem;
  }
}

.inner-headline__breadcrumbs {
  margin-top: 4.9rem;
}

@media only screen and (min-width: 1200px) {
  .inner-headline__breadcrumbs {
    margin-top: 5.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .inner-headline__breadcrumbs {
    margin-top: 5.9rem;
  }
}

.mxd-block__decoration {
  display: block;
  width: 7rem;
  height: auto;
}

.mxd-block__manifest.centered {
  text-align: center;
}

.mxd-manifest__controls {
  margin-top: 4.4rem;
}

@media only screen and (min-width: 768px) {
  .mxd-manifest__controls {
    margin-top: 5rem;
  }
}

.mxd-block__paragraph {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-block__paragraph {
    margin-top: 1.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-block__paragraph {
    margin-top: 0.4rem;
    gap: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-block__paragraph {
    max-width: 855px;
  }
}

.mxd-paragraph__lists-item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2.1rem;
}

.mxd-paragraph__lists-item:last-of-type {
  margin-bottom: 0;
}

.mxd-paragraph__lists-item ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-paragraph__lists-item ul li {
  display: block;
  font: normal var(--fw-regular) 1.8rem/1.4 var(--_font-accent);
}

.mxd-paragraph__lists-item ul li a {
  font: normal var(--fw-regular) 1.8rem/1.4 var(--_font-accent);
  color: var(--t-medium);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .mxd-paragraph__lists-item ul li a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

@media only screen and (min-width: 1200px) {
  .mxd-paragraph__lists-item {
    gap: 1.8rem;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-paragraph__lists-item ul li a {
    font-size: 1.8rem;
  }
}

.mxd-paragraph__controls {
  margin-top: 1.3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-paragraph__controls {
    margin-top: 1.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-paragraph__controls {
    margin-top: 1.7rem;
  }
}

.mxd-paragraph__client {
  margin-top: 0.2rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-paragraph__client {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-paragraph__client {
    margin-top: 0.2rem;
  }
}

.mxd-pinned-fullscreen {
  position: relative;
}

.mxd-pinned-fullscreen__static {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.mxd-pinned-fullscreen__scroll {
  width: 100%;
  position: relative;
  top: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20vh;
  z-index: 3;
}

.mxd-pinned-fullscreen__scroll p {
  font-size: 30rem;
}

.mxd-pinned-fullscreen__tl-trigger {
  position: absolute;
  right: 0;
  bottom: 30vh;
  width: 1px;
  height: 1px;
}

/* ------------------------------------------------*/
/* Elements - Page Structure End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Typography Start */
/* ------------------------------------------------*/
h1 {
  font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 8rem;
  }

  h1.h1-small {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1200px) {
  h1 {
    font-size: 10rem;
  }

  h1.h1-small {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1400px) {
  h1.h1-small {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1600px) {
  h1 {
    font-size: 12rem;
  }

  h1.h1-small {
    font-size: 9rem;
  }
}

.typed-cursor {
  color: var(--accent);
}

h2 {
  font: normal var(--fw-medium) 4.4rem/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

h2.opposite {
  color: var(--t-opp-bright);
}

h2.permanent-light {
  color: var(--pt-t-light-bright);
}

h2.permanent-dark {
  color: var(--pt-t-dark-bright);
}

@media only screen and (min-width: 768px) {
  h2 {
    font-size: 7rem;
  }

  h2.h2-small {
    font-size: 5rem;
  }

  h2.h2-large {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1600px) {
  h2 {
    font-size: 7rem;
  }

  h2.h2-small {
    font-size: 7rem;
  }

  h2.h2-large {
    font-size: 12rem;
  }
}

h3 {
  font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

h3.opposite {
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 768px) {
  h3 {
    font-size: 5rem;
  }
}

h4 {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  h4 {
    font-size: 4.4rem;
  }
}

h5 {
  font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

h5 small {
  display: block;
  font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent);
  color: var(--t-medium);
  margin-top: 0.2rem;
}

h5 a {
  color: var(--t-bright);
}

h5.opposite {
  color: var(--t-opp-bright);
}

h5.opposite a {
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 768px) {
  h5 {
    font-size: 3.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  h5 small {
    font-size: 1.8rem;
  }
}

h6 {
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

h6 a {
  color: var(--t-bright);
}

h6.opposite {
  color: var(--t-opp-bright);
}

h6.opposite a {
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 1200px) {
  h6 {
    font-size: 3rem;
  }
}

p {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

p span,
p a {
  color: var(--t-bright);
}

p span {
  font-weight: var(--fw-semibold);
}

p a {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-medium)), to(var(--t-medium))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: -moz-linear-gradient(left, var(--t-medium), var(--t-medium)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, var(--t-medium), var(--t-medium)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

p a.opposite {
  background: -webkit-gradient(linear, left top, right top, from(var(--t-opp-medium)), to(var(--t-opp-medium))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: -moz-linear-gradient(left, var(--t-opp-medium), var(--t-opp-medium)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, var(--t-opp-medium), var(--t-opp-medium)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

.no-touch p a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.no-touch p a:hover.opposite {
  color: var(--t-opp-bright);
}

p.t-120 {
  line-height: 1.2;
}

p.t-140 {
  line-height: 1.4;
}

p.t-xsmall {
  font-size: 1.4rem;
  line-height: 1.2;
}

p.t-small {
  font-size: 1.6rem;
}

p.t-small-mobile {
  font-size: 1.6rem;
}

p.t-large {
  font-family: var(--_font-accent);
  font-size: 2.5rem;
  color: var(--t-bright);
}

p.t-caption {
  line-height: 1.4;
  font-weight: var(--fw-medium);
}

p.t-muted {
  color: var(--t-muted);
}

p.t-muted span {
  color: var(--t-medium);
}

p.t-muted a {
  font-weight: var(--fw-regular);
  color: var(--t-muted);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, var(--t-muted), var(--t-muted)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch p.t-muted a:hover {
  color: var(--t-medium);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

p.t-muted a.no-effect {
  background: none;
}

p.t-opposite {
  color: var(--t-opp-bright);
}

p.t-opposite-medium {
  color: var(--t-opp-medium);
}

p.t-opposite-medium a {
  color: var(--t-opp-bright);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-opp-medium)), to(var(--t-opp-medium))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: -moz-linear-gradient(left, var(--t-opp-medium), var(--t-opp-medium)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, var(--t-opp-medium), var(--t-opp-medium)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch p.t-opposite-medium a:hover {
  color: var(--t-opp-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

p.t-bright {
  color: var(--t-bright);
}

p.t-bright.opposite {
  color: var(--t-opp-bright);
}

p.t-medium {
  font-weight: var(--fw-medium);
}

p.t-semibold {
  font-weight: var(--fw-semibold);
}

@media only screen and (min-width: 768px) {
  p.t-small-mobile {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  p {
    font-size: 2.2rem;
  }

  p.t-large {
    font-size: 3rem;
  }

  p.t-small {
    font-size: 1.8rem;
  }

  p.t-small-mobile {
    font-size: 2.2rem;
  }
}

.mxd-point-subtitle {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: left;
  -moz-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  gap: 1rem;
  font: normal var(--fw-regular) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.mxd-point-subtitle svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: var(--t-bright);
}

.mxd-point-subtitle span {
  font-weight: var(--fw-regular);
}

.mxd-point-subtitle a {
  color: var(--t-bright);
  background: none;
}

.no-touch .mxd-point-subtitle:hover a {
  color: var(--t-medium);
}

.mxd-manifest {
  font: normal var(--fw-regular) 2.8rem/1.6 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-manifest {
    font-size: 4.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-manifest {
    max-width: 855px;
  }

  .mxd-manifest.mxd-manifest-l {
    max-width: none;
  }
}

.mxd-stats-number {
  font: normal var(--fw-medium) 7rem/0.8 var(--_font-accent);
  color: var(--t-bright);
  letter-spacing: -0.1rem;
}

.mxd-stats-number.opposite {
  color: var(--t-opp-bright);
}

.mxd-stats-number.small {
  font-size: 5rem;
}

.mxd-stats-number.xsmall {
  font-size: 5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-stats-number.small {
    font-size: 7rem;
  }

  .mxd-stats-number.xsmall {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-stats-number {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-stats-number {
    font-size: 12rem;
  }
}

/* ------------------------------------------------*/
/* Elements - Typography End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Controls Start */
/* ------------------------------------------------*/
.mxd-color-switcher {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 4.6rem;
  height: 4.6rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  outline: 0;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  color: var(--t-bright);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mxd-color-switcher::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  -ms-transform: translateX(-50%) translateY(-50%) scale(1);
  transform: translateX(-50%) translateY(-50%) scale(1);
  width: 100%;
  height: 100%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: transparent;
  -webkit-transition: background-color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  transition: background-color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  -moz-transition: transform var(--_animspeed-medium), background-color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium), background-color var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium), background-color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
}

.mxd-color-switcher i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  font-size: 2rem;
  overflow: hidden;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .mxd-color-switcher:hover::before {
  background-color: var(--base-tint);
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1.04);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1.04);
  -ms-transform: translateX(-50%) translateY(-50%) scale(1.04);
  transform: translateX(-50%) translateY(-50%) scale(1.04);
}

.no-touch .mxd-color-switcher:hover i {
  -webkit-transform: scale(0.92);
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  transform: scale(0.92);
}

@media only screen and (min-width: 768px) {
  .mxd-color-switcher {
    width: 5.6rem;
    height: 5.6rem;
  }

  .mxd-color-switcher i {
    font-size: 3rem;
  }
}

.btn-rotating {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  color: var(--t-bright);
  font-size: 2.2rem;
}

.btn-rotating .btn-rotating__text {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.btn-rotating .btn-rotating__text text {
  fill: var(--t-bright);
  font-family: var(--_font-accent);
  font-weight: 500;
  text-transform: uppercase;
  -webkit-transition: var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: var(--_animspeed-medium) var(--_animbezier);
  transition: var(--_animspeed-medium) var(--_animbezier);
}

.btn-rotating .btn-rotating__image {
  display: block;
  height: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .btn-rotating:hover .btn-rotating__image {
  -webkit-transform: scale(0.92);
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  transform: scale(0.92);
}

.btn-rotating-160 {
  width: 160px;
  height: 160px;
}

.btn-rotating-160 .btn-rotating__text {
  width: 160px;
  height: 160px;
}

.btn-rotating-160 .btn-rotating__text text {
  font-size: 1.39rem;
  letter-spacing: normal;
}

.btn-rotating-160 .btn-rotating__image {
  width: 6rem;
}

.btn-rotating-120-160 {
  width: 120px;
  height: 120px;
}

.btn-rotating-120-160 .btn-rotating__text {
  width: 120px;
  height: 120px;
}

.btn-rotating-120-160 .btn-rotating__text text {
  font-size: 1.4rem;
  letter-spacing: normal;
}

.btn-rotating-120-160 .btn-rotating__image {
  width: 5rem;
}

@media only screen and (min-width: 1600px) {
  .btn-rotating-120-160 {
    width: 160px;
    height: 160px;
  }

  .btn-rotating-120-160 .btn-rotating__text {
    width: 160px;
    height: 160px;
  }

  .btn-rotating-120-160 .btn-rotating__text text {
    font-size: 1.39rem;
    letter-spacing: normal;
  }

  .btn-rotating-120-160 .btn-rotating__image {
    width: 6rem;
  }
}

.btn-rotating-180 {
  width: 180px;
  height: 180px;
}

.btn-rotating-180 .btn-rotating__text {
  width: 180px;
  height: 180px;
}

.btn-rotating-180 .btn-rotating__text text {
  font-size: 1.53rem;
  letter-spacing: 0.1rem;
}

.btn-rotating-180 .btn-rotating__image {
  width: 7.6rem;
}

.btn-rotating-180.ver-02 .btn-rotating__text text {
  font-size: 1.36rem;
}

.btn-rotating-blur-outline {
  width: 200px;
  height: 200px;
  border: 1px solid var(--st-opp-bright);
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--neutral-transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.btn-rotating-blur-outline .btn-rotating__text {
  width: 180px;
  height: 180px;
  top: 1rem;
  left: 1rem;
}

.btn-rotating-blur-outline .btn-rotating__text text {
  font-size: 1.4rem;
  letter-spacing: 0.09rem;
}

.btn-rotating-blur-outline .btn-rotating__image {
  width: 8rem;
}

.btn-rotating-blur-outline.ver-02 .btn-rotating__text text {
  font-size: 1.374rem;
  letter-spacing: 0.09rem;
}

.btn-rotating-blur-outline.ver-03 .btn-rotating__text text {
  font-size: 1.54rem;
  letter-spacing: 0.1rem;
}

.btn-rotating-blur-outline.ver-04 {
  width: 147px;
  height: 147px;
  color: var(--nl-white);
}

.btn-rotating-blur-outline.ver-04 .btn-rotating__text {
  width: 130px;
  height: 130px;
  top: 0.8rem;
  left: 0.8rem;
}

.btn-rotating-blur-outline.ver-04 .btn-rotating__text text {
  font-size: 1.54rem;
  letter-spacing: 0.1rem;
}

.btn-rotating-blur-outline.ver-04 .btn-rotating__image {
  width: 5rem;
}

@media only screen and (min-width: 1200px) {
  .btn-rotating-blur-outline.permanent-desktop {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.05);
  }

  .btn-rotating-blur-outline.permanent-desktop .btn-rotating__text {
    fill: var(--nl-white);
  }

  .btn-rotating-blur-outline.permanent-desktop .btn-rotating__text text {
    fill: var(--nl-white);
  }
}

.btn {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.4rem;
  border: none;
  outline: 0;
  padding: 0;
  font: inherit;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-to-top {
  position: fixed;
  right: 3rem;
  bottom: 3rem;
  width: 4.6rem;
  height: 4.6rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 2px;
  background-color: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--nl-white);
  mix-blend-mode: difference;
  font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  z-index: 9;
  overflow: hidden;
}

.btn-to-top i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  font-size: 2.2rem;
  overflow: hidden;
}

.no-touch .btn-to-top:hover {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

@media only screen and (min-width: 768px) {
  .btn-to-top {
    right: 6rem;
    bottom: 4rem;
    width: 5.6rem;
    height: 5.6rem;
  }

  .btn-to-top i {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 767px) {
  /* .btn-round later in the file overrides the 4.6rem above; re-assert it */
  .btn-round.btn-to-top {
    width: 4.6rem;
    height: 4.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-to-top {
    right: 9rem;
  }
}

.btn-line-default {
  gap: 1rem;
  font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.btn-line-default i,
.btn-line-default .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-default i {
  font-size: 2.2rem;
  overflow: hidden;
}

@media only screen and (min-width: 1600px) {
  .btn-line-default {
    font-size: 2.2rem;
  }

  .btn-line-default i {
    font-size: 2.6rem;
  }
}

.btn-line-medium {
  gap: 1rem;
  font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.btn-line-medium i,
.btn-line-medium .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-medium i {
  font-size: 1.8rem;
  overflow: hidden;
}

@media only screen and (min-width: 1600px) {
  .btn-line-medium {
    font-size: 1.8rem;
  }

  .btn-line-medium i {
    font-size: 2rem;
  }
}

.btn-line-small {
  gap: 1rem;
  font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-muted);
}

.btn-line-small i,
.btn-line-small .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-small i {
  font-size: 2.2rem;
  overflow: hidden;
}

.btn-line-xsmall {
  font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent);
  gap: 0.6rem;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: auto;
}

.btn-line-xsmall i,
.btn-line-xsmall .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-xsmall i {
  font-size: 1.6rem;
  overflow: hidden;
}

.btn-line-headline {
  flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  font: normal var(--fw-medium) clamp(1.6rem, 2.5vw + 0.5rem, 3.2rem)/1.4 var(--_font-accent);
  letter-spacing: 0.02em;
  color: var(--t-muted-extra);
  margin-top: 1rem;
}

.btn-line-headline i,
.btn-line-headline .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.btn-line-headline i {
  font-size: 3.1rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .btn-line-headline {
    margin-top: 0;
  }

  .btn-line-headline i {
    font-size: 0.85em;
  }
}

@media only screen and (min-width: 1200px) {
  .btn-line-headline i {
    font-size: 0.85em;
  }

  .no-touch .btn-line-headline:hover {
    color: var(--accent);
  }
}

@media only screen and (min-width: 1600px) {
  .btn-line-headline i {
    font-size: 0.85em;
  }
}

.btn-default {
  height: 5.6rem;
  line-height: 5.6rem;
  gap: 1.2rem;
  padding: 0 2.2rem;
  -moz-border-radius: 2.8rem;
  border-radius: 2.8rem;
  border-width: 2px;
  font: normal var(--fw-medium) 2.2rem/1.5 var(--_font-accent);
}

.btn-default i,
.btn-default .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-default i {
  font-size: 2.6rem;
  overflow: hidden;
}

.btn-small {
  height: 4.4rem;
  line-height: 4.4rem;
  gap: 0.8rem;
  padding: 0 1.5rem;
  -moz-border-radius: 2.2rem;
  border-radius: 2.2rem;
  border-width: 1px;
  font: normal var(--fw-regular) 1.6rem/1.5 var(--_font-accent);
}

.btn-small i {
  font-size: 1.8rem;
}

.btn-large {
  height: 5.6rem;
  line-height: 5.6rem;
  gap: 1.2rem;
  padding: 0 2.2rem;
  -moz-border-radius: 2.8rem;
  border-radius: 2.8rem;
  border-width: 2px;
  font: normal var(--fw-medium) 2.2rem/1.5 var(--_font-accent);
}

.btn-large i {
  font-size: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .btn-large {
    height: 8.4rem;
    line-height: 8.4rem;
    gap: 1.6rem;
    padding: 0 3.2rem;
    -moz-border-radius: 4.2rem;
    border-radius: 4.2rem;
    border-width: 2px;
    font: normal var(--fw-medium) 3rem/1.5 var(--_font-accent);
  }

  .btn-large i {
    font-size: 3.6rem;
  }
}

.btn-round {
  width: 5.6rem;
  height: 5.6rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 2px;
  font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.btn-round i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  font-size: 2.5rem;
  overflow: hidden;
}

.no-touch .btn-round:hover {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.btn-round-large {
  width: 5.6rem;
  height: 5.6rem;
  border-width: 2px;
}

.btn-round-large i {
  font-size: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .btn-round-large {
    width: 8.2rem;
    height: 8.2rem;
  }

  .btn-round-large i {
    font-size: 3rem;
  }
}

.btn-round-medium {
  width: 5.6rem;
  height: 5.6rem;
  border-width: 1px;
}

.btn-round-medium i {
  font-size: 2.4rem;
}

.btn-round-small {
  width: 4rem;
  height: 4rem;
  border-width: 1px;
}

.btn-round-small i {
  font-size: 1.8rem;
}

.btn-form {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  width: 6rem;
  height: 6rem;
  border-width: 2px;
  font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
}

.btn-form i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  font-size: 2.6rem;
  overflow: hidden;
}

.no-touch .btn-form:hover {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.no-touch .btn-form:hover.no-scale {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.btn-absolute-right {
  position: absolute;
  top: 0;
  right: 0;
}

.btn-fullwidth {
  width: 100%;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.btn-outline {
  background-color: transparent;
  border-style: solid;
  border-color: var(--st-bright);
  color: var(--t-bright);
}

.btn-outline.opposite {
  border-color: var(--st-opp-bright);
  color: var(--t-opp-bright);
}

.btn-outline.permanent {
  border-color: var(--pt-base);
  color: var(--pt-t-light-bright);
}

.btn-accent {
  background-color: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  color: var(--t-opp-bright);
}

.btn-additional {
  background-color: var(--additional);
  border-style: solid;
  border-color: var(--additional);
  color: var(--t-bright);
}

.btn-opposite {
  background-color: var(--base-opp);
  border-style: solid;
  border-color: var(--base-opp);
  color: var(--t-opp-bright);
}

.btn-base {
  background-color: var(--base);
  border-style: solid;
  border-color: var(--base);
  color: var(--t-bright);
}

.btn-permanent {
  background-color: var(--pt-base);
  border-style: solid;
  border-color: var(--pt-st-light-bright);
  color: var(--pt-t-dark-bright);
}

.btn-muted {
  background-color: transparent;
  color: var(--t-muted);
}

.no-touch .btn-muted:hover {
  color: var(--t-bright);
}

.btn-bright {
  background-color: transparent;
  color: var(--t-bright);
}

.no-touch .btn-bright:hover {
  color: var(--t-bright);
}

.btn-anim.play .btn-anim__letter {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.btn-anim:hover .btn-anim__letter {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.btn-anim .btn-caption {
  display: block !important;
  height: 3.3rem;
  line-height: 3.3rem;
  overflow: hidden;
}

.btn-anim.btn-anim-medium .btn-caption {
  height: 2.3rem;
  line-height: 2.3rem;
}

/* Letter-swap geometry must match the button's own line-box, otherwise the
   cloned caption block is offset by the wrong amount and its letters spill
   out of the clip window (ghost text above the button / letters frozen
   mid-slide). The base 3.3rem is tuned for btn-default (2.2rem/1.5); btn-large
   runs a larger face at >=768px, so re-sync the clip window to its line-box. */
@media only screen and (min-width: 768px) {
  .btn-anim.btn-large .btn-caption {
    height: 4.5rem;
    line-height: 4.5rem;
  }
}

.btn-anim__letter {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  -moz-transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -moz-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -moz-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
}

.btn-anim .btn-anim__block:last-child {
  color: var(--primary);
}

.btn-anim__letter:nth-child(1) {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}

.btn-anim__letter:nth-child(2) {
  -webkit-transition-delay: 0.03s;
  -moz-transition-delay: 0.03s;
  transition-delay: 0.03s;
}

.btn-anim__letter:nth-child(3) {
  -webkit-transition-delay: 0.06s;
  -moz-transition-delay: 0.06s;
  transition-delay: 0.06s;
}

.btn-anim__letter:nth-child(4) {
  -webkit-transition-delay: 0.09s;
  -moz-transition-delay: 0.09s;
  transition-delay: 0.09s;
}

.btn-anim__letter:nth-child(5) {
  -webkit-transition-delay: 0.12s;
  -moz-transition-delay: 0.12s;
  transition-delay: 0.12s;
}

.btn-anim__letter:nth-child(6) {
  -webkit-transition-delay: 0.15s;
  -moz-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.btn-anim__letter:nth-child(7) {
  -webkit-transition-delay: 0.18s;
  -moz-transition-delay: 0.18s;
  transition-delay: 0.18s;
}

.btn-anim__letter:nth-child(8) {
  -webkit-transition-delay: 0.21s;
  -moz-transition-delay: 0.21s;
  transition-delay: 0.21s;
}

.btn-anim__letter:nth-child(9) {
  -webkit-transition-delay: 0.24s;
  -moz-transition-delay: 0.24s;
  transition-delay: 0.24s;
}

.btn-anim__letter:nth-child(10) {
  -webkit-transition-delay: 0.27s;
  -moz-transition-delay: 0.27s;
  transition-delay: 0.27s;
}

.btn-anim__letter:nth-child(11) {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.btn-anim__letter:nth-child(12) {
  -webkit-transition-delay: 0.33s;
  -moz-transition-delay: 0.33s;
  transition-delay: 0.33s;
}

.btn-anim__letter:nth-child(13) {
  -webkit-transition-delay: 0.36s;
  -moz-transition-delay: 0.36s;
  transition-delay: 0.36s;
}

.btn-anim__letter:nth-child(14) {
  -webkit-transition-delay: 0.39s;
  -moz-transition-delay: 0.39s;
  transition-delay: 0.39s;
}

.btn-anim__letter:nth-child(15) {
  -webkit-transition-delay: 0.42s;
  -moz-transition-delay: 0.42s;
  transition-delay: 0.42s;
}

.btn-anim__letter:nth-child(16) {
  -webkit-transition-delay: 0.45s;
  -moz-transition-delay: 0.45s;
  transition-delay: 0.45s;
}

.btn-anim__letter:nth-child(17) {
  -webkit-transition-delay: 0.48s;
  -moz-transition-delay: 0.48s;
  transition-delay: 0.48s;
}

.btn-anim__letter:nth-child(18) {
  -webkit-transition-delay: 0.51s;
  -moz-transition-delay: 0.51s;
  transition-delay: 0.51s;
}

.btn-anim__letter:nth-child(19) {
  -webkit-transition-delay: 0.54s;
  -moz-transition-delay: 0.54s;
  transition-delay: 0.54s;
}

.btn-anim__letter:nth-child(20) {
  -webkit-transition-delay: 0.57s;
  -moz-transition-delay: 0.57s;
  transition-delay: 0.57s;
}

.btn-anim__letter:nth-child(21) {
  -webkit-transition-delay: 0.6s;
  -moz-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.btn-anim__letter:nth-child(22) {
  -webkit-transition-delay: 0.63s;
  -moz-transition-delay: 0.63s;
  transition-delay: 0.63s;
}

.btn-anim__letter:nth-child(23) {
  -webkit-transition-delay: 0.66s;
  -moz-transition-delay: 0.66s;
  transition-delay: 0.66s;
}

.btn-anim__letter:nth-child(24) {
  -webkit-transition-delay: 0.69s;
  -moz-transition-delay: 0.69s;
  transition-delay: 0.69s;
}

.btn-anim__letter:nth-child(25) {
  -webkit-transition-delay: 0.72s;
  -moz-transition-delay: 0.72s;
  transition-delay: 0.72s;
}

.btn-anim__letter:nth-child(26) {
  -webkit-transition-delay: 0.75s;
  -moz-transition-delay: 0.75s;
  transition-delay: 0.75s;
}

.btn-anim__letter:nth-child(27) {
  -webkit-transition-delay: 0.78s;
  -moz-transition-delay: 0.78s;
  transition-delay: 0.78s;
}

.btn-anim__letter:nth-child(28) {
  -webkit-transition-delay: 0.81s;
  -moz-transition-delay: 0.81s;
  transition-delay: 0.81s;
}

.btn-anim__letter:nth-child(29) {
  -webkit-transition-delay: 0.84s;
  -moz-transition-delay: 0.84s;
  transition-delay: 0.84s;
}

.btn-anim__letter:nth-child(30) {
  -webkit-transition-delay: 0.87s;
  -moz-transition-delay: 0.87s;
  transition-delay: 0.87s;
}

.btn-mobile-icon {
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn-mobile-icon i {
  font-size: 2rem;
}

.btn-mobile-icon .btn-caption {
  display: none !important;
}

@media only screen and (min-width: 768px) {
  .btn-mobile-icon {
    width: auto;
    height: 5.6rem;
    padding: 0 2.2rem;
    -moz-border-radius: 2.8rem;
    border-radius: 2.8rem;
  }

  .btn-mobile-icon i {
    font-size: 2.6rem;
  }

  .btn-mobile-icon .btn-caption {
    display: block !important;
  }
}

.tag {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.8rem;
  border: none;
  outline: 0;
  padding: 0;
  font: inherit;
  background-color: transparent;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tag-default {
  height: 3.2rem;
  line-height: 3.2rem;
  padding: 0 1.2rem;
  -moz-border-radius: 1.6rem;
  border-radius: 1.6rem;
  border-width: 1px;
  font: normal var(--fw-regular) 1.4rem/1.5 var(--_font-accent);
}

@media only screen and (min-width: 1600px) {
  .tag-default {
    height: 3.6rem;
    line-height: 3.6rem;
    padding: 0 1.4rem;
    -moz-border-radius: 1.8rem;
    border-radius: 1.8rem;
    font-size: 1.6rem;
  }
}

.tag-opposite {
  background-color: var(--base-opp);
  border-style: solid;
  border-color: var(--base-opp);
  color: var(--t-opp-bright);
}

.tag-link-opposite {
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

.tag-link-opposite a {
  color: var(--t-opp-bright);
}

.no-touch .tag-link-opposite:hover {
  background-color: transparent;
  border-color: var(--st-bright);
  color: var(--t-bright);
}

.no-touch .tag-link-opposite:hover a {
  color: var(--t-bright);
}

.tag-outline {
  background-color: transparent;
  border-style: solid;
  border-color: var(--st-bright);
  color: var(--t-bright);
}

.tag-link-outline {
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

.tag-link-outline a {
  color: var(--t-bright);
}

.no-touch .tag-link-outline:hover {
  background-color: var(--base-opp);
  border-color: var(--base-opp);
  color: var(--t-opp-bright);
}

.no-touch .tag-link-outline:hover a {
  color: var(--t-opp-bright);
}

.tag-outline-opposite {
  background-color: transparent;
  border-style: solid;
  border-color: var(--st-opp-bright);
  color: var(--t-opp-bright);
}

.tag-outline-medium {
  background-color: transparent;
  border-style: solid;
  border-color: var(--st-medium);
  color: var(--t-medium);
}

.tag-outline-permanent {
  background-color: transparent;
  border-style: solid;
  border-color: var(--pt-st-light-bright);
  color: var(--pt-t-light-bright);
}

.tag-link-outline-premanent {
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

.tag-link-outline-premanent a {
  color: var(--pt-t-light-bright);
}

.no-touch .tag-link-outline-premanent:hover {
  background-color: var(--pt-base);
  border-color: var(--pt-st-light-bright);
  color: var(--pt-t-dark-bright);
}

.no-touch .tag-link-outline-premanent:hover a {
  color: var(--pt-t-dark-bright);
}

.tag-permanent {
  background-color: var(--pt-base);
  border-style: solid;
  border-color: var(--pt-st-light-bright);
  color: var(--pt-t-dark-bright);
}

.tag-permanent-opposite {
  background-color: var(--pt-base-dark);
  border-style: solid;
  border-color: var(--pt-st-dark-bright);
  color: var(--pt-t-light-bright);
}

.tag-accent {
  background-color: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  color: var(--t-opp-bright);
}

.tag-additional {
  background-color: var(--additional);
  border-style: solid;
  border-color: var(--additional);
  color: var(--t-bright);
}

.slide-right:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRight;
  -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRight;
  animation: 0.6s var(--_animbezier) 0.3s 1 both slideRight;
}

.slide-right-up:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightUp;
  -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightUp;
  animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightUp;
}

.slide-right-down:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightDown;
  -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightDown;
  animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightDown;
}

.slide-left:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideLeft;
  -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideLeft;
  animation: 0.6s var(--_animbezier) 0s 1 both slideLeft;
}

.slide-left-up:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftUp;
  -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftUp;
  animation: 0.6s var(--_animbezier) 0s 1 both slideLeftUp;
}

.slide-left-down:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftDown;
  -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftDown;
  animation: 0.6s var(--_animbezier) 0s 1 both slideLeftDown;
}

.slide-down:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideDown;
  -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideDown;
  animation: 0.6s var(--_animbezier) 0.3s 1 both slideDown;
}

.slide-up:hover i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideUp;
  -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideUp;
  animation: 0.6s var(--_animbezier) 0s 1 both slideUp;
}

.anim-no-delay:hover i::before {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes slideRight {
  0% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -moz-transform: translateX(100%);
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideRight {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes slideRightUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideRightUp {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideRightUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(-100%);
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(100%);
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideRightDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideRightDown {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideRightDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(100%);
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes slideLeft {
  0% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes slideLeftUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideLeftUp {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideLeftUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(100%);
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideLeftDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideLeftDown {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideLeftDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(100%);
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(-100%);
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -moz-transform: translateY(100%);
    transform: translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

.mxd-spin {
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite;
}

.mxd-spin-hover img {
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}

.mxd-spin-hover:hover img {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------*/
/* Elements - Controls End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Forms Start */
/* ------------------------------------------------*/
.form-container {
  position: relative;
}

.form {
  opacity: 1;
  -webkit-transition: opacity var(--_animspeed-slow) ease-in-out;
  -moz-transition: opacity var(--_animspeed-slow) ease-in-out;
  transition: opacity var(--_animspeed-slow) ease-in-out;
}

.form.is-hidden {
  opacity: 0;
}

form {
  position: relative;
  width: 100%;
}

form input,
form textarea {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  margin: 0;
  padding: 1.2rem 0.2rem;
  background-color: transparent;
  border-bottom: 2px solid var(--st-medium);
  font: normal var(--fw-regular) 2.2rem var(--_font-accent);
  height: 6rem;
  line-height: 6rem;
  color: var(--t-bright);
}

form input:focus,
form textarea:focus {
  border-bottom: 2px solid var(--st-bright);
}

form textarea {
  height: 16rem;
  line-height: 1.6;
  resize: none;
}

form ::-webkit-input-placeholder {
  color: var(--t-muted);
}

form :-moz-placeholder {
  color: var(--t-muted);
}

form ::-moz-placeholder {
  color: var(--t-muted);
}

form :-ms-input-placeholder {
  color: var(--t-muted);
}

form input:focus:required:invalid,
form textarea:focus:required:invalid {
  color: var(--t-bright);
}

form input:required:valid,
form textarea:required:valid {
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  form textarea {
    height: 23rem;
  }
}

@media only screen and (min-width: 1600px) {

  form input,
  form textarea {
    font-size: 2.2rem;
  }
}

.form__reply {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity var(--_animspeed-slow) ease-in-out;
  -moz-transition: opacity var(--_animspeed-slow) ease-in-out;
  transition: opacity var(--_animspeed-slow) ease-in-out;
}

.form__reply.centered {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  max-width: 400px;
}

.form__reply.is-visible {
  opacity: 1;
}

.reply__icon {
  display: block;
  font-size: 6rem;
  color: var(--t-bright);
  margin-bottom: 1.2rem;
}

.reply__title {
  font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  margin-bottom: 1.4rem;
}

.reply__text {
  display: block;
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

/* ------------------------------------------------*/
/* Elements - Forms End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Components Start */
/* ------------------------------------------------*/
.mxd-logo {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: left;
  -moz-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .mxd-logo {
    gap: 1.4rem;
  }
}

.mxd-logo__image {
  display: block;
  width: 4.6rem;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-logo__image {
    width: 5.6rem;
  }
}

/* Header brand: render the wordmark image in place of the stacked text.
   The text is kept in the markup (visually hidden) so it remains the link's
   accessible name. Default paint is dark, so the white wordmark is the
   baseline; light mode swaps in the dark wordmark. */
.mxd-logo__text {
  display: block;
  width: 15.5rem;
  height: 2.9rem;
  /* Hide the text robustly: text-indent only shifts the first line, and the
     markup is "insanely<br>elegant", so the second line would otherwise leak
     out in the default link colour. Transparent text keeps it as the link's
     accessible name while staying invisible regardless of per-page font-size. */
  text-indent: -9999px;
  color: transparent;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  background: left center / contain no-repeat url(../img/logo_in_white.svg);
}

[color-scheme=light] .mxd-logo__text {
  background-image: url(../img/logo_dark.png);
}

@media only screen and (min-width: 768px) {
  .mxd-logo__text {
    width: 19.5rem;
    height: 3.6rem;
  }
}

.mxd-section-title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.4rem;
  text-align: left;
  margin-bottom: 7rem;
}

.mxd-section-title.h2-only {
  margin-bottom: 6.2rem;
}

.mxd-section-title.no-controls {
  margin-bottom: 6rem;
}

.mxd-section-title.title-large {
  gap: 4.2rem;
}

.mxd-section-title.pre-grid {
  margin-bottom: 4rem;
}

.mxd-section-title.pre-block {
  margin-bottom: 4.4rem;
}

.mxd-section-title.no-margin {
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-section-title {
    margin-bottom: 8rem;
  }

  .mxd-section-title.h2-only {
    margin-bottom: 6.6rem;
  }

  .mxd-section-title.no-controls {
    margin-bottom: 7rem;
  }

  .mxd-section-title.pre-grid {
    margin-bottom: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title {
    margin-bottom: 6.7rem;
  }

  .mxd-section-title.no-controls {
    margin-bottom: 6.7rem;
  }

  .mxd-section-title.no-margin-desktop {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title.title-large {
    gap: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section-title {
    gap: 4.2rem;
    margin-bottom: 6.7rem;
  }
}

.mxd-section-title__text {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.4rem;
}

@media only screen and (min-width: 1600px) {
  .mxd-section-title__text {
    gap: 2.6rem;
  }
}

.mxd-section-title__controls {
  position: relative;
}

.mxd-section-title__image-link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.mxd-section-title__image-link svg,
.mxd-section-title__image-link img {
  width: 140px;
  height: auto;
}

@media only screen and (min-width: 1600px) {

  .mxd-section-title__image-link svg,
  .mxd-section-title__image-link img {
    width: 160px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title__title.card-split-title {
    margin-top: -1.6rem;
  }
}

.mxd-section-title__descr {
  padding-right: 6rem;
  margin-top: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section-title__descr {
    margin-top: 1.8rem;
    max-width: 620px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title__descr {
    margin-top: 2.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section-title__descr {
    margin-top: 2.5rem;
  }
}

.mxd-section-title__controls {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.2rem;
}

.mxd-section-title__controls.pre-title {
  margin-top: 3.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section-title__controls.pre-title {
    margin-top: 2.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title__controls {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 4.2rem;
  }

  .mxd-section-title__controls.pre-title {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section-title__controls {
    margin-top: 4.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title__hrtitle {
    padding-right: 6rem;
    margin-bottom: 0;
  }
}

.mxd-section-title__hrdescr {
  margin-top: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section-title__hrdescr {
    padding-right: 6rem;
    margin-top: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title__hrdescr {
    margin-top: 0;
    padding-top: 0.7rem;
  }
}

.mxd-section-title__hrcontrols {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.2rem;
}

.mxd-section-title__hrcontrols.pre-title {
  margin-top: 3.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section-title__hrcontrols.pre-title {
    margin-top: 2.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title__hrcontrols {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-top: 1.7rem;
    margin-top: 0;
  }

  .mxd-section-title__hrcontrols.pre-title {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section-title__hrcontrols {
    padding-top: 1.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section-title__hrparagraph {
    margin-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-section-title__hrparagraph {
    margin-top: 5.3rem;
  }
}

.mxd-data-list {
  position: relative;
}

.mxd-data-list__column {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.8rem;
  margin-bottom: 2.8rem;
}

.mxd-data-list__column:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-data-list__column {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-data-list__column {
    gap: 3.4rem;
  }
}

.mxd-data-list__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.6rem;
}

.mxd-data-list__name {
  font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-medium);
}

.mxd-data-list__content {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.mxd-data-list__content a {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--st-medium)), to(var(--st-medium))), -webkit-gradient(linear, left top, right top, from(var(--accent)), to(var(--accent)));
  background: -moz-linear-gradient(left, var(--st-medium), var(--st-medium)), -moz-linear-gradient(left, var(--accent), var(--accent));
  background: linear-gradient(to right, var(--st-medium), var(--st-medium)), linear-gradient(to right, var(--accent), var(--accent));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -ms-transform-origin: bottom right;
  transform-origin: bottom right;
}

.no-touch .mxd-data-list__content a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
}

.mxd-avatars-group {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-avatars-group {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .mxd-avatars-group.align-right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: right;
  }
}

.mxd-avatars-group__text {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-avatars-group__text p,
.mxd-avatars-group__text a {
  line-height: 1.2;
  color: var(--t-medium);
  font-size: 1.8rem;
}

@media only screen and (min-width: 768px) {

  .mxd-avatars-group__text p,
  .mxd-avatars-group__text a {
    font-size: 2.2rem;
  }
}

.mxd-avatars {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.mxd-avatars.align-right {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: right;
}

.mxd-avatars__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  margin-left: -2.2rem;
}

.mxd-avatars__item:first-of-type {
  margin-left: 0;
}

.mxd-avatars__item.small {
  width: 4.6rem;
  height: 4.6rem;
  margin-left: -1.4rem;
}

.mxd-avatars__item.small:first-of-type {
  margin-left: 0;
}

.mxd-avatars__item img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-avatars__item.small {
    width: 5.6rem;
    height: 5.6rem;
    margin-left: -1.6rem;
  }
}

.mxd-avatars__icon {
  width: 4rem;
  height: auto;
}

.mxd-avatars__icon.small {
  width: 3rem;
  height: auto;
}

.mxd-preview-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  -webkit-transition: fbackdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: fbackdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier);
  transition: fbackdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier);
}

.mxd-preview-hover__icon {
  display: block;
  width: 10rem;
}

.mxd-preview-hover__icon.icon-small {
  width: 8rem;
}

.mxd-preview-hover__icon img {
  width: 100%;
  height: auto;
}

.mxd-preview-hover__text {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--pt-t-light-bright);
}

.mxd-counter {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.mxd-counter.small {
  gap: 2rem;
}

.mxd-counter.horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.4rem;
}

@media only screen and (min-width: 768px) {
  .mxd-counter.align-end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    text-align: right;
  }
}

.mxd-counter__descr {
  max-width: 250px;
}

.mxd-btngroup {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.mxd-btngroup.centered {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and (min-width: 576px) {
  .mxd-btngroup {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 2rem;
  }
}

.mxd-divider {
  position: relative;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
  height: auto;
  min-height: 300px;
}

@media only screen and (min-width: 768px) {
  .mxd-divider {
    min-height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-divider {
    min-height: 500px;
  }

  .mxd-divider.divider-hero-01 {
    padding-top: 14rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-divider {
    min-height: 600px;
  }
}

.mxd-divider__image {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
}

.mxd-divider__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
}

@media only screen and (min-width: 768px) {
  .mxd-divider__image {
    min-height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-divider__image {
    min-height: 500px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-divider__image {
    min-height: 600px;
  }
}

.mxd-divider__video {
  position: relative;
  width: 100%;
  height: 460px;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

.mxd-divider__video video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-position: center center;
  -moz-background-size: contain;
  background-size: contain;
  -o-object-fit: cover;
  object-fit: cover;
}

.mxd-divider__video img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-divider__video {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-divider__video {
    height: 760px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-divider__video {
    height: 930px;
  }
}

.mxd-divider__trigger {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.mxd-project-item__media {
  position: relative;
  display: block;
  margin-bottom: 1.4rem;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-project-item__media {
    margin-bottom: 2.3rem;
  }
}

.mxd-project-item__preview {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

.mxd-project-item__tags {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.6rem 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .mxd-project-item__tags {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project-item__tags {
    gap: 1.4rem;
  }
}

.mxd-project-item__promo {
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-project-item__promo {
    padding: 0 4rem;
  }
}

.mxd-project-item__name a {
  display: inline;
  font: normal var(--fw-regular) 2.2rem/1.4 var(--_font-accent);
  color: var(--t-medium);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .mxd-project-item__name a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.mxd-project-item__name a span {
  font-weight: var(--fw-medium);
  color: var(--t-bright);
}

.mxd-project-item__name.small a {
  font-size: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-project-item__name a {
    font-size: 3rem;
  }

  .mxd-project-item__name.small a {
    font-size: 2.2rem;
  }
}

.mxd-links-lines {
  position: relative;
}

@media (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-links-lines>.mxd-links-lines__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-links-lines:hover>.mxd-links-lines__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-links-lines__item {
  position: relative;
  display: block;
  margin-top: -2px;
}

.mxd-links-lines__item:first-of-type {
  margin-top: 0;
}

.mxd-links-lines__divider {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-links-lines__link {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 3rem 0;
  overflow: hidden;
}

.no-touch .mxd-links-lines__link:hover .mxd-links-lines__title {
  -webkit-transform: translateX(1rem);
  -moz-transform: translateX(1rem);
  -ms-transform: translateX(1rem);
  transform: translateX(1rem);
}

.no-touch .mxd-links-lines__link:hover .mxd-links-lines__icon i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
  -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
  animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
}

.mxd-links-lines__title {
  position: relative;
  color: var(--t-bright);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
}

.mxd-links-lines__icon {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 3rem;
  -webkit-transform: translateX(0) rotate(0deg);
  -moz-transform: translateX(0) rotate(0deg);
  -ms-transform: translateX(0) rotate(0deg);
  transform: translateX(0) rotate(0deg);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.mxd-links-lines__icon i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: color var(--_animspeed-medium) var(--_animbezier);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.mxd-check-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.4rem;
}

.mxd-check-list li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

.mxd-floating-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.mxd-floating-img.floating-bg {
  overflow: hidden;
  z-index: -1;
}

.mxd-floating-img__item {
  position: absolute;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: auto;
  bottom: 20%;
  right: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-floating-img__item {
    bottom: 4rem;
    right: 6rem;
    width: 600px;
    height: auto;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-floating-img__item {
    width: 46%;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-floating-img__item {
    right: 9rem;
    width: 40%;
  }
}

/* ------------------------------------------------*/
/* Elements - Components End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Common Classes Start */
/* ------------------------------------------------*/
.bg-accent {
  background-color: var(--accent);
}

.bg-additional {
  background-color: var(--additional);
}

.bg-base {
  background-color: var(--base);
}

.bg-base-tint {
  background-color: var(--base-tint);
}

.bg-base-shade {
  background-color: var(--base-shade);
}

.bg-base-opp {
  background-color: var(--base-opp);
}

.st-accent {
  border: 1px solid var(--accent);
}

.st-additional {
  border: 1px solid var(--additional);
}

.st-base {
  border: 1px solid var(--base);
}

.st-base-tint {
  border: 1px solid var(--base-tint);
}

.st-base-shade {
  border: 1px solid var(--base-shade);
}

.st-base-opp {
  border: 1px solid var(--base-opp);
}

.t-accent {
  color: var(--accent);
}

.t-additional {
  color: var(--additional);
}

.radius-s {
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
}

.radius-m {
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
}

.radius-l {
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
}

.radius-xl {
  -moz-border-radius: var(--_radius-xl);
  border-radius: var(--_radius-xl);
}

.fullheight-l {
  height: auto;
}

@media only screen and (min-width: 992px) {
  .fullheight-l {
    height: 100%;
  }
}

.fullheight-xl {
  height: auto;
}

@media only screen and (min-width: 1200px) {
  .fullheight-xl {
    height: 100%;
  }
}

.anim-zoom-in-container,
.anim-zoom-out-container {
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}

.padding-4 {
  padding: 2.6rem 3rem;
}

@media only screen and (min-width: 768px) {
  .padding-4 {
    padding: 3.6rem 4rem;
  }
}

.padding-5x4 {
  padding: 2.6rem 3rem;
}

@media only screen and (min-width: 768px) {
  .padding-5x4 {
    padding: 4rem 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .card-desktop-4 {
    width: -moz-calc(40% - 1.5rem);
    width: calc(40% - 1.5rem);
  }
}

@media only screen and (min-width: 1200px) {
  .card-desktop-6 {
    width: -moz-calc(60% - 1.5rem);
    width: calc(60% - 1.5rem);
  }
}

/* ------------------------------------------------*/
/* Elements - Common Classes End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Header Start */
/* ------------------------------------------------*/
.mxd-header {
  position: absolute;
  top: 0;
  left: 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  width: -moz-calc(100% - 11.6rem);
  width: calc(100% - 11.6rem);
  padding-top: 3rem;
  z-index: 101;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  opacity: 1;
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

.mxd-header.is-hidden {
  -webkit-transform: scaleY(1.2);
  -moz-transform: scaleY(1.2);
  -ms-transform: scaleY(1.2);
  transform: scaleY(1.2);
  opacity: 0;
}

.mxd-header.menu-is-visible {
  z-index: 10;
}

/* The open menu shows its own brand logo in the panel's top bar. The header's
   text logo sits at the very same top-left corner, so both were rendering at
   once — two overlapping "insanely elegant" wordmarks. Hide the header logo
   while the menu is open (the panel brand takes over); the header CONTROLS
   (theme toggle, Say Hello, close ✕) stay put. */
body.ie-menu-locked .mxd-header__logo {
  /* visibility (not opacity): the intro loader's GSAP sets an inline opacity:1 on
     every .loading__fade element — and .mxd-header__logo is one — which would win
     over a CSS opacity here. visibility isn't touched by that tween, so it hides
     reliably and restores the instant the menu closes. */
  visibility: hidden;
  pointer-events: none;
}

@media only screen and (min-width: 768px) {
  .mxd-header {
    left: 6rem;
    width: -moz-calc(100% - 19.6rem);
    width: calc(100% - 19.6rem);
    padding-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-header {
    left: 9rem;
    width: -moz-calc(100% - 25.6rem);
    width: calc(100% - 25.6rem);
  }
}

.mxd-header__logo {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.mxd-header__controls {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .mxd-header__controls {
    gap: 2rem;
  }
}

/* ------------------------------------------------*/
/* Block - Header End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Menu Start */
/* ------------------------------------------------*/
.mxd-nav__wrap {
  position: fixed;
  top: auto;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 100;
}

/* While the menu is open the page is scroll-locked via body{position:fixed;
   top:-scrollY} (see js/app.js). Because the nav wrap is fixed with top:auto it
   derives its vertical position from the now-shifted in-flow body, so it — and the
   close ✕ it carries — floats off the top of the viewport by the scroll amount.
   Pin it explicitly (like the panel's inset:0) so the ✕ is always on-screen,
   regardless of how far the page was scrolled when the menu opened. */
body.ie-menu-locked .mxd-nav__wrap {
  top: 0;
}

.mxd-nav__contain {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  min-height: 4.6rem;
  margin-top: 3rem;
  padding: 0 3rem;
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mxd-nav__contain>* {
  pointer-events: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-nav__contain {
    min-height: 5.6rem;
    margin-top: 4rem;
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-nav__contain {
    padding: 0 9rem;
  }
}

.nav_link_wrap {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.nav_link_svg {
  display: block;
  width: 5rem;
}

.mxd-nav__hamburger {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.7rem;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 4.6rem;
  height: 4.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-nav__hamburger {
    width: 5.6rem;
    height: 5.6rem;
  }
}

.hamburger__base {
  position: absolute;
  inset: 0%;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  background-color: var(--base-opp-tint);
  z-index: 1;
}

/* While closing, the pill surface is reparented back into the hamburger and
   shrunk by GSAP. Lift it above the menu content layer for the duration of that
   morph so the dark panel cleanly covers everything as it collapses (the class
   is removed by js/app.js the instant the morph finishes). */
.hamburger__base.is-morphing {
  z-index: 9999;
}

.nav_hamburger_bg {
  position: absolute;
  inset: 0%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: black;
  z-index: 2;
}

.hamburger__line {
  position: relative;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 50%;
  height: 0.3rem;
  -moz-border-radius: 0.3rem;
  border-radius: 0.3rem;
  background-color: var(--t-opp-bright);
  /* colour is swapped when the menu opens (see .nav-open rule) — ease it so it
     hands off cleanly alongside the pill's colour morph */
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  z-index: 2;
}

/* Once open, the pill has morphed into the menu panel (var(--base)) and the two
   lines form the close ✕. They must contrast with that panel, not with the
   closed-state pill they were coloured for. --t-bright tracks the panel: white on
   the dark panel, near-black on the light panel — so the ✕ is always visible. */
.mxd-nav__hamburger.nav-open .hamburger__line {
  background-color: var(--t-bright);
}

/* ====================================================== */
/*  Fullscreen Menu — redesigned (Insanely Elegant)        */
/*  Theme-aware luxury overlay. Structural hook classes     */
/*  (.mxd-menu__wrapper/base/contain/inner, .main-menu__item,*/
/*  .menu-promo__video, .menu-fade-in) are kept for the      */
/*  existing GSAP open/close timeline in js/app.js.          */
/* ====================================================== */
/* Body lock while the nav menu is open. position:fixed is the only thing iOS
   Safari reliably honours to stop the page scrolling under the overlay; the top
   offset (set inline in js/app.js) keeps the page visually in place. */
body.ie-menu-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.mxd-menu__wrapper {
  position: fixed;
  inset: 0;
  display: none;
  width: 100%;
  height: 100vh;
  /* dvh tracks the *current* visible viewport. svh (small viewport) is shorter
     than the screen once Safari's URL bar collapses, which left a strip of the
     page bleeding through below the panel. dvh always fills the visible area. */
  height: 100dvh;
  z-index: 1;
  overflow: hidden;
  /* the menu is a navigation surface — never let the morph/clicks drag-select
     the big link text */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* the email is the one thing worth copying */
.ie-menu__email {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* Dimmed, blurred backdrop behind the floating panel — gives the rounded card
   depth and catches click-to-close on the surrounding frame. Kept near-opaque:
   during the open morph the panel expands from the tiny hamburger pill, so for
   the first few hundred ms this scrim is the ONLY thing covering most of the
   viewport. At the old 0.82 the page behind (most visibly the big z-index:-1
   footer masthead against an otherwise-black footer) stayed legible through the
   18% gap. The panel's own blurred glass + shadow still supply the card depth. */
.mxd-menu__base {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 1);
}

/* NOTE: no backdrop-filter here. The scrim is fully opaque (rgba(0,0,0,1)), so a
   backdrop blur is completely hidden behind it — it produced ZERO visible effect
   while forcing the GPU to re-blur the entire viewport on every frame of the open
   morph. Removing it is a pure win: it was a major cause of the menu stuttering
   even on capable laptops. Depth now comes entirely from the panel's own shadow. */

/* ====================================================== */
/*  Instant "lite" menu  (touch / reduced-motion / low-power)                 */
/*  No GSAP Flip morph, no live canvas, no backdrop blur — the panel and all  */
/*  its content are painted and clickable within ~180ms via cheap, GPU-        */
/*  composited opacity/transform transitions. This is what makes the menu feel */
/*  instant on phones and low-core laptops, where the luxury morph was the     */
/*  entire source of the lag. Toggled by .is-lite in js/app.js.                */
/* ====================================================== */
.mxd-menu__wrapper.is-lite .mxd-menu__base {
  opacity: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-transition: opacity 0.16s ease;
  transition: opacity 0.16s ease;
}
.mxd-menu__wrapper.is-lite.is-open .mxd-menu__base {
  opacity: 1;
}

/* The scroll region becomes the self-contained floating card. In rich mode the
   Flipped hamburger pill supplies this surface; lite mode never moves the pill,
   so .mxd-menu__inner carries the card's colour, gradient wash and shadow itself. */
.mxd-menu__wrapper.is-lite .mxd-menu__inner {
  background-color: var(--base);
  background-image:
    radial-gradient(115% 80% at 100% -10%, rgba(var(--accent-rgb), 0.18), transparent 55%),
    radial-gradient(95% 75% at -10% 110%, rgba(var(--accent-rgb), 0.10), transparent 52%);
  box-shadow:
    0 4rem 9rem -2rem rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--accent-rgb), 0.06);
  opacity: 0;
  -webkit-transform: translateY(1.2rem) scale(0.985);
  transform: translateY(1.2rem) scale(0.985);
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.mxd-menu__wrapper.is-lite.is-open .mxd-menu__inner {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

/* Rich mode animates the ✕ with GSAP; lite mode has no timeline, so the two
   hamburger lines cross into an ✕ purely in CSS. Scoped to .is-lite so it never
   fights GSAP's inline transforms on capable devices. */
.mxd-nav__hamburger.is-lite .hamburger__line {
  -webkit-transition: -webkit-transform 0.28s ease, background-color 0.3s ease;
  transition: transform 0.28s ease, background-color 0.3s ease;
}
.mxd-nav__hamburger.is-lite.nav-open .hamburger__line:nth-child(2) {
  -webkit-transform: translateY(0.5rem) rotate(45deg);
  transform: translateY(0.5rem) rotate(45deg);
}
.mxd-nav__hamburger.is-lite.nav-open .hamburger__line:nth-child(3) {
  -webkit-transform: translateY(-0.5rem) rotate(-45deg);
  transform: translateY(-0.5rem) rotate(-45deg);
}
/* In rich mode the pill Flips into the dark panel, so the ✕ lines turn white
   (--t-bright) to sit on it. Lite mode never morphs the pill, so that white ✕
   would land on the resting LIGHT pill (--base-opp-tint) — an invisible ✕ that
   reads as a solid white circle. Recolour the pill to the panel surface (--base)
   when open so the ✕ contrasts, matching the rich close button. */
.mxd-nav__hamburger.is-lite .hamburger__base {
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.mxd-nav__hamburger.is-lite.nav-open .hamburger__base {
  background-color: var(--base);
}

/* The panel surface IS the hamburger pill, Flipped into the menu and expanded
   by js/app.js. It settles as a rounded, inset floating card (never a hard-edged
   full-bleed rectangle) so the morph stays soft and rounded throughout. */
.mxd-menu__contain .hamburger__base {
  inset: clamp(0.8rem, 1.3vw, 1.8rem);
  background-color: var(--base);
  background-image:
    radial-gradient(115% 80% at 100% -10%, rgba(var(--accent-rgb), 0.18), transparent 55%),
    radial-gradient(95% 75% at -10% 110%, rgba(var(--accent-rgb), 0.10), transparent 52%);
  border-radius: clamp(2rem, 2.4vw, 3.2rem);
  overflow: hidden;
  box-shadow:
    0 4rem 9rem -2rem rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--accent-rgb), 0.06);
}

.mxd-menu__contain .hamburger__base::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--accent-rgb), 0.5) 0.6px, transparent 0.7px);
  background-size: 26px 26px;
  opacity: 0.05;
  pointer-events: none;
}

.mxd-menu__contain {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* re-enable interaction only on actual controls so clicking empty space closes */
.mxd-menu__contain a,
.mxd-menu__contain button {
  pointer-events: auto;
}

.mxd-menu__inner {
  /* Match the floating card (.hamburger__base) exactly — same inset + radius —
     so the scroll region IS the card. Previously this was full-bleed (inset:0)
     while only the card behind it was inset, so a tall, scrolled submenu spilled
     its content (logo, nav rows) into the ~1.8rem margin OUTSIDE the rounded
     panel. Clipping to the card keeps everything inside the menu surface. */
  position: absolute;
  inset: clamp(0.8rem, 1.3vw, 1.8rem);
  border-radius: clamp(2rem, 2.4vw, 3.2rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Top padding is tuned so the brand row centres on the fixed close ✕ (which is
     positioned by the global header at ~5.3rem, not by this panel). Keeping them
     level avoids the ✕ floating alone in the corner above the logo on mobile. */
  padding: 4rem 2rem 2rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The panel must capture touch so it scrolls its own overflow (tall menus on
     short phones) instead of the gesture falling through to the page behind.
     .mxd-menu__contain sets pointer-events:none; re-enable it here. Empty-space
     tap-to-close is restored in js/app.js. */
  pointer-events: auto;
}

.mxd-menu__inner::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-menu__inner {
    padding: 7rem 4rem 2.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-menu__inner {
    padding: 8rem 6rem 3rem;
    overflow: hidden;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-menu__inner {
    padding: 9rem 9rem 4rem;
  }
}

/* ---- Top bar ---- */
/* Brand + status live as a left-aligned cluster; the top-right corner is left
   clear for the floating close button so the two never collide. */
.ie-menu__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
  align-items: center;
  justify-content: flex-start;
  padding-right: 6rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--st-muted);
}

@media only screen and (min-width: 768px) {
  .ie-menu__top { padding-right: 8rem; }
}

.ie-menu__brand {
  display: inline-flex;
  align-items: center;
}

.ie-menu__logo {
  display: block;
  width: auto;
  height: 3.4rem;
}

@media only screen and (max-width: 600px) {
  .ie-menu__logo { height: 2.8rem; }
}

.ie-menu__status {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--_font-default);
  font-size: 1.2rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-muted);
}

@media only screen and (min-width: 600px) {
  .ie-menu__status {
    padding-left: 2.4rem;
    border-left: 1px solid var(--st-muted);
  }
}

.ie-menu__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  animation: ie-menu-pulse 2.4s ease-out infinite;
}

@keyframes ie-menu-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  70% { box-shadow: 0 0 0 0.7rem rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* ---- Body grid ---- */
.ie-menu__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  align-content: center;
  padding: 3.2rem 0;
  min-height: 0;
}

/* On phones the menu is taller than the screen. Top-align the body (instead of
   vertically centering it) so its content overflows the scrollable .mxd-menu__
   inner and can actually be scrolled to — Contact, Appearance and the footer. */
@media only screen and (max-width: 1199px) {
  .ie-menu__body {
    flex: 0 0 auto;
    align-content: start;
  }
}

@media only screen and (min-width: 1200px) {
  .ie-menu__body {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(3rem, 5vw, 7rem);
    align-content: center;
    padding: 0;
  }
}

/* ---- Left: primary nav ---- */
.ie-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  min-width: 0;
}

.ie-nav {
  display: flex;
  flex-direction: column;
}

.ie-nav__item {
  border-top: 1px solid var(--st-muted);
}

.ie-nav__item:last-child {
  border-bottom: 1px solid var(--st-muted);
}

.ie-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1.6rem;
  padding: 1.2rem 1.4rem 1.2rem 0.4rem;
  text-decoration: none;
  color: var(--t-bright);
  overflow: hidden;
  /* sharp-cornered full box — the hover accent fills the entire row edge to
     edge as a hard-edged rectangle (no rounded pill). overflow:hidden clips the
     wipe to this box. */
  border-radius: 0;
}

/* Full-size accent box that WIPES across the whole row on hover. It scales on
   the X axis from a collapsed edge to a full-width fill (transform, GPU-cheap)
   rather than fading — giving a directional sweep with crisp square corners.
   The transform-origin flips between hover/rest so it enters from the left and
   exits back out to the right, reading as one continuous sweep even when the
   mouse races between rows. */
.ie-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.18) 0%,
    rgba(var(--accent-rgb), 0.09) 60%,
    rgba(var(--accent-rgb), 0.03) 100%);
  border-radius: 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s var(--_animbezier);
  z-index: 0;
  pointer-events: none;
}

.no-touch .ie-nav__link:hover::before,
.ie-nav__link:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Thin vertical accent edge on the left that grows in as the box lands —
   a luxe hard-line marker against the sharp corner. */
.ie-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.45s var(--_animbezier) 0.08s;
  z-index: 1;
  pointer-events: none;
}

.no-touch .ie-nav__link:hover::after,
.ie-nav__link:focus-visible::after {
  transform: scaleY(1);
}

.ie-nav__index {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 3.4rem;
  font-family: var(--_font-default);
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--t-muted);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.ie-nav__text {
  position: relative;
  z-index: 1;
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  font-size: clamp(3rem, 4.4vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  transition: transform 0.5s var(--_animbezier), color var(--_animspeed-medium) var(--_animbezier);
}

/* Plain (non-expanding) rows carry the SAME circular badge as the toggle
   chevron so every row shares one right-hand affordance — identical size,
   position and vertical rhythm. Holds an arrow-up-right instead of a caret. */
.ie-nav__arrow {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.4rem, 5.5vw, 5.4rem);
  height: clamp(4.4rem, 5.5vw, 5.4rem);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--t-medium);
  border: 1px solid var(--st-muted);
  border-radius: 50%;
  transition: transform 0.5s var(--_animbezier),
    color var(--_animspeed-medium) var(--_animbezier),
    border-color var(--_animspeed-medium) var(--_animbezier),
    background-color var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .ie-nav__link:hover .ie-nav__text,
.ie-nav__link:focus-visible .ie-nav__text {
  transform: translateX(1.4rem);
}

.no-touch .ie-nav__link:hover .ie-nav__index,
.ie-nav__link:focus-visible .ie-nav__index {
  color: var(--accent);
}

.no-touch .ie-nav__link:hover .ie-nav__arrow,
.ie-nav__link:focus-visible .ie-nav__arrow {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background-color: rgba(var(--accent-rgb), 0.08);
  transform: translate(0.2rem, -0.2rem);
}

.no-touch .ie-nav__link:active .ie-nav__arrow {
  transform: scale(0.94);
}

/* Standout row: Lipsmatch, the primary offering. The wordmark sits in the
   site's italic serif accent voice against the bold sans of its siblings,
   with a small chip naming the audience — static styling, so it reads on
   touch as strongly as on hover-capable devices. */
.ie-nav__text--star {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.ie-nav__flag {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  padding: 0.5rem 1.1rem;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 10rem;
}
.no-touch .ie-nav__link--star:hover .ie-nav__flag,
.ie-nav__link--star:focus-visible .ie-nav__flag {
  background-color: rgba(var(--accent-rgb), 0.12);
}
/* Narrow phones: the serif wordmark + chip + circle can't all fit, so the
   chip takes over as the row's right-hand affordance — right-aligned like a
   button — and the shared circle arrow steps aside on this row only. */
@media only screen and (max-width: 480px) {
  .ie-nav__link--star { gap: 0.9rem; }
  .ie-nav__link--star .ie-nav__arrow { display: none; }
  .ie-nav__flag {
    margin-left: auto;
    padding: 0.5rem 1rem;
    letter-spacing: 0.08em;
  }
}

/* secondary "more" row */
.ie-nav__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  margin-top: 0.8rem;
}

.ie-nav__more-label {
  font-family: var(--_font-default);
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.ie-nav__more a {
  position: relative;
  font-family: var(--_font-default);
  font-size: 1.6rem;
  color: var(--t-medium);
  text-decoration: none;
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.ie-nav__more a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--_animbezier);
}

.no-touch .ie-nav__more a:hover {
  color: var(--t-bright);
}

.no-touch .ie-nav__more a:hover::after {
  transform: scaleX(1);
}

/* ---- Right: aside ---- */
.ie-menu__aside {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  min-width: 0;
}

@media only screen and (min-width: 1200px) {
  .ie-menu__aside {
    gap: clamp(2rem, 2.4vw, 3rem);
  }
}

/* featured video card */
.ie-menu__feature {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--_radius-m);
  overflow: hidden;
  /* Always a rich near-black surface (independent of theme) so the white meta text
     and the accent waveform read identically in light and dark mode. */
  background-color: #0c0c0d;
  border: 1px solid var(--st-muted);
  text-decoration: none;
  isolation: isolate;
  /* Entrance/exit is state-driven off .mxd-menu__wrapper.is-open (toggled by the
     GSAP open/close in js/app.js). CSS transitions are deterministic here, so the
     card reliably fades IN on open and — crucially — fades OUT fast on close
     instead of lingering over the dissolving backdrop. Resting (closed) state is
     hidden with a quick exit; the open state gives it a graceful, delayed entrance. */
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mxd-menu__wrapper.is-open .ie-menu__feature {
  opacity: 1;
  transform: none;
  /* delayed so the card eases in AFTER the staggered nav links have appeared,
     not before them */
  transition: opacity 0.6s var(--_animbezier) 0.85s, transform 0.6s var(--_animbezier) 0.85s;
}

@media (prefers-reduced-motion: reduce) {
  .ie-menu__feature,
  .mxd-menu__wrapper.is-open .ie-menu__feature { transition: none; }
}

/* Living backdrop: a deep vignette plus a soft accent glow that drifts toward the
   top, sitting BEHIND the animated waveform canvas. This is the static, paint-cheap
   foundation the canvas plays over (and the graceful fallback if JS never runs). */
.ie-menu__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(var(--accent-rgb), 0.20) 0%, rgba(var(--accent-rgb), 0) 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #121214 0%, #0a0a0b 100%);
  transform: scale(1.02);
  transition: transform 0.9s var(--_animbezier);
}

.no-touch .ie-menu__feature:hover::before {
  transform: scale(1.06);
}

/* Animated audio-reactive wave field (drawn in js/app.js → createWaveField). */
.ie-menu__feature-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  /* a touch of bloom so the accent strokes feel emissive rather than flat */
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.28));
}

/* Film grain — an inline SVG turbulence tile, blended so it sits in the shadows
   and gives the panel a luxurious, textured finish instead of clean flat pixels. */
.ie-menu__feature-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

@media only screen and (min-width: 1200px) {
  .ie-menu__feature {
    aspect-ratio: 16 / 9;
  }
}

.ie-menu__feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.72) 100%);
  z-index: 2;
}

.ie-menu__feature-meta {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 2rem;
  width: 100%;
}

.ie-menu__feature-tag {
  font-family: var(--_font-default);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.ie-menu__feature-title {
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  font-size: clamp(2rem, 2.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}

.ie-menu__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-family: var(--_font-default);
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  color: #fff;
}

.ie-menu__feature-cta i {
  transition: transform 0.4s var(--_animbezier);
}

.no-touch .ie-menu__feature:hover .ie-menu__feature-cta i {
  transform: translate(0.3rem, -0.3rem);
}

/* shared label */
.ie-menu__label {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--_font-default);
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-muted);
}

/* contact */
.ie-menu__email {
  display: inline-block;
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  font-size: clamp(1.8rem, 2.1vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--t-bright);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--_animbezier), color var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .ie-menu__email:hover {
  color: var(--accent);
  background-size: 100% 1px;
}

.ie-menu__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  margin-top: 1.6rem;
}

.ie-menu__socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--_font-default);
  font-size: 1.45rem;
  color: var(--t-medium);
  text-decoration: none;
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.ie-menu__socials a i {
  font-size: 1.2rem;
  opacity: 0;
  transform: translate(-0.4rem, 0.2rem);
  transition: opacity 0.35s var(--_animbezier), transform 0.35s var(--_animbezier);
}

.no-touch .ie-menu__socials a:hover {
  color: var(--t-bright);
}

.no-touch .ie-menu__socials a:hover i {
  opacity: 1;
  transform: translate(0, 0);
}

/* appearance / theme toggle */
.ie-menu__appearance {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ie-theme {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  padding: 0.4rem;
  border: 1px solid var(--st-muted);
  border-radius: 999px;
  background: var(--base-tint);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ie-theme__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  font-family: var(--_font-default);
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  color: var(--t-muted);
  border-radius: 999px;
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.ie-theme__thumb {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 0;
  width: calc(50% - 0.4rem);
  height: calc(100% - 0.8rem);
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.45s var(--_animbezier);
}

/* highlight the active mode based on the document color-scheme */
[color-scheme=light] .ie-theme__thumb { transform: translateX(0); }
[color-scheme=dark] .ie-theme__thumb { transform: translateX(100%); }
[color-scheme=light] .ie-theme__opt[data-mode=light],
[color-scheme=dark] .ie-theme__opt[data-mode=dark] {
  color: var(--nl-black);
}

/* ---- Foot ---- */
.ie-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 2.4rem;
  border-top: 1px solid var(--st-muted);
}

.ie-menu__foot p,
.ie-menu__foot a {
  font-family: var(--_font-default);
  font-size: 1.25rem;
  color: var(--t-muted);
}

.ie-menu__foot-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.ie-menu__foot-links {
  display: flex;
  gap: 1.8rem;
}

.ie-menu__foot a {
  text-decoration: none;
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .ie-menu__foot a:hover {
  color: var(--t-bright);
}

/* keep the GSAP hook class valid even though styling is theme-native now */
.menu-promo__video {
  position: relative;
  overflow: hidden;
}

/* On small screens the panel is one scrolling column (.mxd-menu__inner handles
   the overflow). The body must therefore keep its NATURAL height — if it stays
   `flex: 1 1 auto` it shrinks below its content, the grid spills out of the box
   and the foot rides up over the contact/appearance block. Pinning it to
   `flex: 0 0 auto` lets the inner scroll cleanly with nothing overlapping. */
@media only screen and (max-width: 1199px) {
  .ie-menu__body {
    flex: 0 0 auto;
    align-content: start;
  }
  .ie-menu__aside {
    order: 2;
  }
  /* momentum scrolling + room so the last control never sits flush to the edge */
  .mxd-menu__inner {
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3.2rem;
  }
  /* space-between flings the site link off the right edge on a phone — let the
     foot items flow from the left and wrap naturally instead */
  .ie-menu__foot {
    justify-content: flex-start;
  }
  .ie-menu__foot-site {
    flex-basis: 100%;
  }
}

/* ====================================================== */
/*  Nav submenus — Works / Services / Product Imagery      */
/*  The parent label still navigates; a separate chevron   */
/*  toggle expands a smooth accordion submenu. Single-open  */
/*  (one at a time) keeps the panel compact on every size. */
/* ====================================================== */

/* Row holds the parent link + the expand toggle side by side, so the link
   keeps its own hover wash while the chevron stays a generous, separate
   hit area that never hijacks navigation. */
/* Parent of a submenu — the whole row IS the disclosure toggle. Reset the
   button chrome so it inherits the shared .ie-nav__link look, then pin a
   persistent chevron badge on the right as the "this expands" affordance. */
.ie-nav__link--toggle {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--t-bright);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ie-nav__toggle-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.4rem, 5.5vw, 5.4rem);
  height: clamp(4.4rem, 5.5vw, 5.4rem);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--t-medium);
  border: 1px solid var(--st-muted);
  border-radius: 50%;
  transition: transform 0.5s var(--_animbezier),
    color var(--_animspeed-medium) var(--_animbezier),
    border-color var(--_animspeed-medium) var(--_animbezier),
    background-color var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .ie-nav__link--toggle:hover .ie-nav__toggle-icon,
.ie-nav__link--toggle:focus-visible .ie-nav__toggle-icon {
  color: var(--t-bright);
  border-color: rgba(var(--accent-rgb), 0.5);
  background-color: rgba(var(--accent-rgb), 0.08);
}

.no-touch .ie-nav__link--toggle:active .ie-nav__toggle-icon {
  transform: scale(0.94);
}

/* Open state — accent the chevron badge and flip it */
.ie-nav__item--open .ie-nav__toggle-icon {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.55);
  background-color: rgba(var(--accent-rgb), 0.1);
  transform: rotate(180deg);
}

/* Collapsible region — height animates via grid-template-rows 0fr→1fr,
   the smoothest collapse with no JS measurement or hard-coded heights. */
.ie-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--_animbezier);
}

.ie-nav__item--open .ie-submenu {
  grid-template-rows: 1fr;
}

/* The grid child owns overflow + min-height:0 so the 0fr state truly
   measures zero and clips cleanly while collapsing. */
.ie-submenu__list {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* left pad + each row's 1.2rem inner pad line the item labels up under the
     parent wordmark (index col + gap); tuned to match, not eyeballed */
  padding-left: 1.2rem;
  /* clear space below the "Explore all …" chip so it never crowds the next
     top-level item (Services / Voice Agents) when the submenu is open */
  padding-bottom: 2.2rem;
}

.ie-submenu__item {
  border-top: 1px solid var(--st-muted);
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.45s var(--_animbezier), transform 0.45s var(--_animbezier);
}

.ie-submenu__item:first-child {
  border-top: 0;
}

/* Category header — an editorial divider that clusters the list (used in the
   Works submenu to split multilingual lip-sync from ground-up AI films). It
   echoes the accent-tick eyebrow used across the site's case pages. */
.ie-submenu__group {
  list-style: none;
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.45s var(--_animbezier), transform 0.45s var(--_animbezier);
}

/* Separate the first header from the big toggle above it so the small caps
   don't crowd the "Works" wordmark */
.ie-submenu__group:first-child {
  margin-top: 1rem;
}

/* Second cluster onward gets breathing room above its header */
.ie-submenu__item + .ie-submenu__group {
  margin-top: 2rem;
}

/* The header already reads as a divider, so drop the row rule beneath it */
.ie-submenu__group + .ie-submenu__item {
  border-top: 0;
}

.ie-submenu__grouphead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.3rem;
  padding: 0 1.2rem 0.9rem;
}

.ie-submenu__grouphead::after {
  content: "";
  grid-column: 2;
  height: 1px;
  background: linear-gradient(90deg, var(--st-muted), transparent);
}

.ie-submenu__grouptitle {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--_font-default);
  font-weight: var(--fw-medium);
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-medium);
  white-space: nowrap;
}

.ie-submenu__grouptitle i {
  font-size: 1.6rem;
  color: var(--accent);
}

.ie-submenu__groupcount {
  grid-column: 3;
  font-family: var(--_font-default);
  font-weight: var(--fw-medium);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* Staggered reveal once the parent opens (covers the largest list) */
.ie-nav__item--open .ie-submenu__item,
.ie-nav__item--open .ie-submenu__group {
  opacity: 1;
  transform: none;
}

.ie-nav__item--open .ie-submenu__item:nth-child(1) { transition-delay: 0.10s; }
.ie-nav__item--open .ie-submenu__item:nth-child(2) { transition-delay: 0.14s; }
.ie-nav__item--open .ie-submenu__item:nth-child(3) { transition-delay: 0.18s; }
.ie-nav__item--open .ie-submenu__item:nth-child(4) { transition-delay: 0.22s; }
.ie-nav__item--open .ie-submenu__item:nth-child(5) { transition-delay: 0.26s; }
.ie-nav__item--open .ie-submenu__item:nth-child(6) { transition-delay: 0.30s; }
.ie-nav__item--open .ie-submenu__item:nth-child(7) { transition-delay: 0.34s; }
.ie-nav__item--open .ie-submenu__item:nth-child(8) { transition-delay: 0.38s; }
.ie-nav__item--open .ie-submenu__item:nth-child(9) { transition-delay: 0.42s; }
.ie-nav__item--open .ie-submenu__item:nth-child(10) { transition-delay: 0.46s; }

/* Submenu link — label over description, accent arrow to the right */
.ie-submenu__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.4rem;
  padding: 1.15rem 1.2rem;
  text-decoration: none;
  color: var(--t-medium);
  border-radius: var(--_radius-s);
  transition: padding-left 0.4s var(--_animbezier),
    background-color var(--_animspeed-medium) var(--_animbezier);
}

.ie-submenu__label {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--t-bright);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.ie-submenu__desc {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0.2rem;
  font-family: var(--_font-default);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--t-muted);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.ie-submenu__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.7rem;
  color: var(--accent);
  opacity: 0;
  transform: translate(-0.7rem, 0.3rem) rotate(-6deg);
  transition: opacity 0.4s var(--_animbezier), transform 0.4s var(--_animbezier);
}

.no-touch .ie-submenu__link:hover {
  padding-left: 1.8rem;
  background-color: rgba(var(--accent-rgb), 0.05);
}

.no-touch .ie-submenu__link:hover .ie-submenu__label,
.ie-submenu__link:focus-visible .ie-submenu__label {
  color: var(--accent);
}

.no-touch .ie-submenu__link:hover .ie-submenu__desc {
  color: var(--t-medium);
}

.no-touch .ie-submenu__link:hover .ie-submenu__arrow,
.ie-submenu__link:focus-visible .ie-submenu__arrow {
  opacity: 1;
  transform: none;
}

/* Current page — keep the relevant submenu item lit so the menu always
   reflects where you are. */
.ie-submenu__link.is-current .ie-submenu__label {
  color: var(--accent);
}

.ie-submenu__link.is-current .ie-submenu__arrow {
  opacity: 1;
  transform: none;
}

/* ---- "Explore all …" CTA — the footer chip of each submenu ---------------- */
/* Deliberately unlike the plain list rows above it: an accent-tinted pill with
   its own eyebrow, a persistent circular arrow badge, and a sweep-fill on
   hover — so it reads as the one route to the full index page, not a sibling. */
.ie-submenu__item--all {
  border-top: 0;
  margin-top: 0.9rem;
}

.ie-submenu__link--all {
  grid-template-rows: auto auto;
  overflow: hidden;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 1.4rem;
  background: rgba(var(--accent-rgb), 0.06);
  transition: padding-left 0.4s var(--_animbezier),
    border-color var(--_animspeed-medium) var(--_animbezier),
    background-color var(--_animspeed-medium) var(--_animbezier);
}

/* accent wash that sweeps across on hover */
/* clip-path reveal (see .ie-nav__link above): carries its own rounded corners
   so the chip never flashes a hard square corner or exposes the dark card edge
   mid-sweep — replaces the old translateX approach and its overshoot flicker. */
.ie-submenu__link--all::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.03) 75%);
  clip-path: inset(0 100% 0 0 round 1.4rem);
  transition: clip-path 0.55s cubic-bezier(0.33, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.no-touch .ie-submenu__link--all:hover::before,
.ie-submenu__link--all:focus-visible::before {
  clip-path: inset(0 0 0 0 round 1.4rem);
}

.ie-submenu__eyebrow {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0.3rem;
  font-family: var(--_font-default);
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.ie-submenu__link--all .ie-submenu__label {
  position: relative;
  z-index: 1;
  grid-row: 2;
  color: var(--accent);
}

.ie-submenu__link--all .ie-submenu__desc {
  position: relative;
  z-index: 1;
  grid-row: 3;
}

/* Persistent circular arrow badge (not the hover-only arrow of plain rows) */
.ie-submenu__link--all .ie-submenu__arrow {
  z-index: 1;
  grid-row: 1 / span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  font-size: 1.6rem;
  opacity: 1;
  transform: none;
  transition: transform 0.4s var(--_animbezier), background-color 0.4s var(--_animbezier);
}

.no-touch .ie-submenu__link--all:hover,
.ie-submenu__link--all:focus-visible {
  padding-left: 1.3rem;
  border-color: rgba(var(--accent-rgb), 0.45);
  background-color: rgba(var(--accent-rgb), 0.1);
}

.no-touch .ie-submenu__link--all:hover .ie-submenu__arrow,
.ie-submenu__link--all:focus-visible .ie-submenu__arrow {
  transform: translateX(0.4rem);
  background: rgba(var(--accent-rgb), 0.26);
}

/* Larger indent on tablet/desktop so items sit just past the index column */
@media only screen and (min-width: 768px) {
  .ie-submenu__list {
    padding-left: 4.4rem;
  }
}

/* Desktop: the panel scrolls its own overflow. The body takes its NATURAL
   height (min-height:auto) so a tall, expanded submenu grows downward and the
   panel scrolls from the top — instead of the body shrinking under flex:1,
   spilling its grid over the footer, and centre-alignment shoving the logo off
   the top. It still centres (safe) whenever the content fits. Sizes are also
   dialled back here so the menu reads calmer and needs less scrolling. */
@media only screen and (min-width: 1200px) {
  .mxd-menu__inner {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .ie-menu__body {
    align-content: safe center;
    min-height: auto;
  }
  .ie-menu__nav {
    gap: 1.6rem;
  }
  .ie-nav__link {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
  .ie-submenu__link {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }
}

/* Lite path (touch / low-power — .is-lite set by js/app.js): the submenu expand
   above is tuned for capable desktops — a 0.55s grid-template-rows animation
   (which reflows the whole panel EVERY frame; layout is exactly what weak
   devices can't do at 60fps) plus a per-item stagger that doesn't finish until
   ~0.9s. Here it collapses to one fast beat: a short rows transition and all
   items fading in together, so a submenu tap answers instantly. */
.mxd-menu__wrapper.is-lite .ie-submenu {
  transition-duration: 0.22s;
}

.mxd-menu__wrapper.is-lite .ie-submenu__item,
.mxd-menu__wrapper.is-lite .ie-submenu__group {
  transform: none;
  transition: opacity 0.16s ease;
}

/* beats the nth-child stagger rules on specificity — no per-row delays */
.mxd-menu__wrapper.is-lite .ie-nav__item--open .ie-submenu__item,
.mxd-menu__wrapper.is-lite .ie-nav__item--open .ie-submenu__group {
  transition-delay: 0.04s;
}

/* keep the chevron flip in step with the faster expand */
.mxd-menu__wrapper.is-lite .ie-nav__toggle-icon {
  transition-duration: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .ie-submenu {
    transition-duration: 0.001s;
  }
  .ie-submenu__item,
  .ie-submenu__group,
  .ie-nav__link--toggle,
  .ie-nav__link::before,
  .ie-nav__link::after,
  .ie-nav__toggle-icon,
  .ie-submenu__link,
  .ie-submenu__link--all::before,
  .ie-submenu__arrow {
    transition: none !important;
  }
  .ie-nav__item--open .ie-submenu__item,
  .ie-nav__item--open .ie-submenu__group {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------*/
/* Block - Menu End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - CTA Start */
/* ------------------------------------------------*/
.mxd-promo {
  position: relative;
}

.mxd-promo__inner {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: var(--base-opp);
  padding-left: 3rem;
  padding-right: 3rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .mxd-promo__inner {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-promo__inner {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-promo__inner {
    padding-left: 9rem;
    padding-right: 9rem;
  }
}

.mxd-promo__bg {
  position: absolute;
  top: -4rem;
  right: -10rem;
  width: 70%;
  height: -moz-calc(100% + 4rem);
  height: calc(100% + 4rem);
  background-repeat: no-repeat;
  background-position: left center;
  -moz-background-size: cover;
  background-size: cover;
}

@media only screen and (min-width: 1200px) {
  .mxd-promo__bg {
    background-position: center;
    top: 0;
    right: 0;
    width: 50%;
  }
}

.mxd-promo__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6rem;
  margin: 12.2rem 0 14rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-promo__content {
    margin: 14rem 0 16rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-promo__content {
    margin: 17.6rem 0 20rem 0;
  }
}

.mxd-promo__title {
  display: block;
  color: var(--t-opp-bright);
}

.mxd-promo__title span {
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 1200px) {
  .mxd-promo__title {
    width: 70%;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-promo__title {
    width: 60%;
  }
}

.mxd-promo__logo {
  display: block;
  line-height: 0;
  margin-bottom: 2.6rem;
}

.mxd-promo__logo img {
  display: block;
  width: auto;
  height: 2.8rem;
}

.mxd-promo__logo .logo-light {
  display: block;
}

.mxd-promo__logo .logo-dark {
  display: none;
}

[color-scheme=dark] .mxd-promo__logo .logo-light {
  display: none;
}

[color-scheme=dark] .mxd-promo__logo .logo-dark {
  display: block;
}

@media only screen and (min-width: 768px) {
  .mxd-promo__logo {
    margin-bottom: 3.4rem;
  }
  .mxd-promo__logo img {
    height: 3.6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-promo__logo img {
    height: 4.4rem;
  }
}

[color-scheme=dark] .btn-rotating__image {
  filter: invert(1);
}

.mxd-promo__caption {
  font: normal var(--fw-medium) 4.4rem/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-promo__caption {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-promo__caption {
    font-size: 10rem;
  }
}

.mxd-promo__images {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .mxd-promo__images {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    height: 100%;
  }

  .mxd-promo__images .promo-image {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
  }

  .mxd-promo__images .promo-image.bottom-layer {
    -webkit-box-ordinal-group: 0;
    -moz-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  .mxd-promo__images .promo-image-1 {
    width: 330px;
    height: auto;
    right: 6rem;
    bottom: 6rem;
  }

  .mxd-promo__images .promo-image-2 {
    width: 120px;
    height: auto;
    left: 0;
    bottom: 12rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-promo__images .promo-image-2 {
    left: 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-promo__images .promo-image-1 {
    width: 396px;
    right: 9rem;
    bottom: 9rem;
  }

  .mxd-promo__images .promo-image-2 {
    width: 140px;
    left: 6rem;
    bottom: 18rem;
  }
}

/* ------------------------------------------------*/
/* Block - CTA End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Footer Start */
/* ------------------------------------------------*/
.mxd-footer {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-footer {
    padding-bottom: 6rem;
  }
}

.mxd-footer__text-wrap {
  position: relative;
  width: 100%;
}

.mxd-footer__fullwidth-text {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-flex: none;
  flex: none;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  max-width: 1920px;
  padding: 0 3rem;
  color: var(--t-bright);
  z-index: -1;
  padding-top: 12.5rem;
  margin-bottom: 2rem;
}

.mxd-footer__fullwidth-text.personal {
  margin-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-footer__fullwidth-text {
    padding: 0 6rem;
    padding-top: 10.5rem;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-footer__fullwidth-text.personal {
    margin-bottom: 5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-footer__fullwidth-text {
    padding: 0 9rem;
    padding-top: 11.1rem;
    margin-bottom: -1rem;
  }
}

.mxd-footer__svg-v2 {
  position: relative;
  display: block;
  width: 100%;
  fill: currentColor;
  z-index: -1;
}

.fullwidth-text__tl-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.1rem;
  height: 0.1rem;
}

.mxd-footer__svg {
  position: relative;
  outline: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  will-change: transform;
  opacity: 1;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}

.mxd-footer__svg foreignObject,
.mxd-footer__svg text {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.mxd-footer__svg text {
  width: 100%;
  height: 100%;
}

.mxd-footer__text {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-style: normal;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  font-family: var(--_font-accent);
  letter-spacing: -0.006rem;
  color: var(--t-bright);
  font-size: 1.2rem;
}

.mxd-footer__caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-style: normal;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  font-family: var(--_font-accent);
  letter-spacing: -0.014rem;
  color: var(--t-bright);
  font-size: 1.2rem;
}

.mxd-footer__caption .word {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.mxd-footer__footer-blocks {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  max-width: 1920px;
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-footer__footer-blocks {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-footer__footer-blocks {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-footer__footer-blocks {
    padding: 0 9rem;
  }
}

.footer-blocks__column {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  gap: 3rem;
}

@media only screen and (min-width: 1200px) {
  .footer-blocks__column {
    height: 650px;
  }
}

@media only screen and (min-width: 1600px) {
  .footer-blocks__column {
    height: 650px;
  }
}

.footer-blocks__card {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  padding: 3rem;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
}

.footer-blocks__card.fullheight-card {
  height: 100%;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.footer-blocks__card.fill-card {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media only screen and (min-width: 768px) {
  .footer-blocks__card {
    padding: 5rem;
  }
}

.footer-blocks__block {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.footer-blocks__nav {
  position: relative;
}

.footer-nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.6rem;
}

.footer-nav__item {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
}

.footer-nav__link {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.footer-nav__link .btn-caption {
  height: 3.6rem;
  line-height: 1.2;
}

@media only screen and (min-width: 768px) {
  .footer-nav__link {
    font-size: 4.4rem;
  }

  .footer-nav__link .btn-caption {
    height: 5.3rem;
  }
}

.footer-nav__counter {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--accent);
  color: var(--t-opp-bright);
  height: 3.6rem;
  -moz-border-radius: 1.8rem;
  border-radius: 1.8rem;
  padding: 0 1.2rem;
}

.footer-nav__counter svg {
  width: 1.5rem;
  height: 1.5rem;
}

.footer-nav__counter span {
  font-size: 2.2rem;
  letter-spacing: -0.1rem;
  color: var(--t-opp-bright);
}

.footer-blocks__links {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: left;
  gap: 1rem;
}

.footer-blocks__links p {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
  gap: 0.2rem;
}

.no-touch .footer-blocks__links p a:hover {
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .footer-blocks__links {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.footer-blocks__title {
  position: relative;
}

.footer-blocks__title-m {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .footer-blocks__title-m {
    font-size: 3.6rem;
  }
}

.footer-blocks__title-l {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .footer-blocks__title-l {
    font-size: 4.4rem;
  }
}

.footer-blocks__socials {
  position: relative;
}

.footer-socials {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.footer-socials__item {
  display: block;
  margin-bottom: 0.3rem;
}

.footer-socials__item:last-of-type {
  margin-bottom: 0;
}

.footer-socials__link {
  font: normal var(--fw-regular) 2.2rem/1.6 var(--_font-accent);
  color: var(--t-bright);
}

.no-touch .footer-socials__link:hover {
  color: var(--t-medium);
}

/* Footer - contact + studio cards */
.footer-eyebrow {
  font: normal var(--fw-medium) 1.3rem/1.4 var(--_font-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.footer-cta {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.footer-presence {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font: normal var(--fw-regular) 1.8rem/1.5 var(--_font-accent);
  color: var(--t-bright);
}

.footer-status__dot {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--accent);
  -webkit-box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  -webkit-animation: footer-status-pulse 2.4s ease-out infinite;
  animation: footer-status-pulse 2.4s ease-out infinite;
}

@-webkit-keyframes footer-status-pulse {
  0% { -webkit-box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
  70% { -webkit-box-shadow: 0 0 0 1.1rem rgba(var(--accent-rgb), 0); box-shadow: 0 0 0 1.1rem rgba(var(--accent-rgb), 0); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

@keyframes footer-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
  70% { box-shadow: 0 0 0 1.1rem rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.footer-clock {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-clock__time {
  font: normal var(--fw-medium) 3.4rem/1 var(--_font-accent);
  letter-spacing: -0.01em;
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

.footer-clock__zone {
  font: normal var(--fw-regular) 1.5rem/1.4 var(--_font-accent);
  color: var(--t-muted);
}

.footer-tags {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.footer-tags li {
  display: block;
}

.footer-tags a {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  background-color: var(--base-shade);
  font: normal var(--fw-regular) 1.5rem/1 var(--_font-accent);
  color: var(--t-medium);
  -webkit-transition: color 0.3s var(--_animbezier), background-color 0.3s var(--_animbezier);
  -moz-transition: color 0.3s var(--_animbezier), background-color 0.3s var(--_animbezier);
  transition: color 0.3s var(--_animbezier), background-color 0.3s var(--_animbezier);
}

.no-touch .footer-tags a:hover {
  color: var(--base);
  background-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .footer-status__dot {
    -webkit-animation: none;
    animation: none;
  }
}

/* ------------------------------------------------*/
/* Block - Footer End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Popup Start */
/* ------------------------------------------------*/
.mfp-bg {
  background-color: rgba(var(--base-rgb), 0.7);
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: var(--t-bright);
  /* overlay at start */
}

.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transform: translateY(3rem);
  -moz-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition: all 0.3s var(--_animbezier);
  -moz-transition: all 0.3s var(--_animbezier);
  transition: all 0.3s var(--_animbezier);
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
  -webkit-transform: translateY(-3rem);
  -moz-transform: translateY(-3rem);
  -ms-transform: translateY(-3rem);
  transform: translateY(-3rem);
}

/* ------------------------------------------------*/
/* Block - Popup End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #00 Start */
/* ------------------------------------------------*/
.mxd-hero-00 {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.mxd-hero-00__wrap {
  position: relative;
  width: 100%;
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-00__wrap {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-00__wrap {
    height: 100%;
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-00__wrap {
    padding: 0 9rem;
  }
}

.mxd-hero-00__top {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 11.5rem 0 11.2rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-00__top {
    padding: 12.6rem 0 12.8rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-00__top {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    padding-top: 12.9rem;
    padding-bottom: 11.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-hero-00__top {
    padding-top: 12.9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-00__top {
    padding-top: 17rem;
    padding-bottom: 14.8rem;
  }
}

.mxd-hero-00__bottom {
  position: relative;
  width: 100%;
}

.mxd-hero-00__title-wrap {
  position: relative;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-00__title-wrap {
    width: auto;
  }
}

.mxd-hero-00__marquee {
  position: absolute;
  top: 7.6rem;
  right: 0;
  width: 100%;
  background-color: var(--accent);
  border: 1px solid var(--base);
  -moz-border-radius: 3.3rem;
  border-radius: 3.3rem;
  overflow: hidden;
}

.mxd-hero-00__marquee .marquee-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.mxd-hero-00__marquee .marquee__item.item-regular {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  margin: 0;
  color: var(--t-opp-bright);
}

.mxd-hero-00__marquee .marquee__item.item-regular p {
  font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent);
  color: var(--t-opp-bright);
}

.mxd-hero-00__marquee .marquee__item.item-regular svg {
  width: 3.7rem;
  height: 3.7rem;
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-00__marquee {
    top: 0;
    width: 484px;
    height: 88px;
    -moz-border-radius: 4.4rem;
    border-radius: 4.4rem;
  }

  .mxd-hero-00__marquee .marquee-flex {
    gap: 2.6rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular {
    gap: 2rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular p {
    font-size: 8rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular svg {
    width: 5.1rem;
    height: 5.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-00__marquee {
    width: 719px;
    height: 132px;
    -moz-border-radius: 6.6rem;
    border-radius: 6.6rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular {
    gap: 2.6rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular p {
    font-size: 12rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular svg {
    width: 8.5rem;
    height: 8.5rem;
    fill: currentColor;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-00__marquee {
    width: 816px;
    height: 154px;
    -moz-border-radius: 7.7rem;
    border-radius: 7.7rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular p {
    font-size: 14rem;
  }

  .mxd-hero-00__marquee .marquee__item.item-regular svg {
    width: 9.1rem;
    height: 9.1rem;
  }
}

.hero-00-title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero-00-title {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.4rem;
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-00-title {
    gap: 2rem;
    font-size: 12rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-00-title {
    font-size: 14rem;
  }
}

.hero-00-title__row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .hero-00-title__row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-00-title__row {
    gap: 3.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-00-title__row {
    gap: 3.4rem;
  }
}

.hero-00-title__item {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.hero-00-title__item.title-item-transparent {
  opacity: 0;
}

.hero-00-title__item.title-item-image {
  display: none;
}

.hero-00-title__item.title-item-image svg {
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .hero-00-title__item {
    white-space: nowrap;
  }

  .hero-00-title__item.title-item-transparent {
    padding: 0 5rem;
    -moz-border-radius: 4.4rem;
    border-radius: 4.4rem;
    color: var(--t-opp-bright);
  }

  .hero-00-title__item.title-item-image {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-top: 1rem;
  }

  .hero-00-title__item.title-item-image svg {
    width: 5.1rem;
    height: 5.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-00-title__item.title-item-transparent {
    padding: 0 7rem;
    -moz-border-radius: 6.6rem;
    border-radius: 6.6rem;
  }

  .hero-00-title__item.title-item-image svg {
    width: 8.5rem;
    height: 8.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-00-title__item.title-item-transparent {
    -moz-border-radius: 7.7rem;
    border-radius: 7.7rem;
  }

  .hero-00-title__item.title-item-image svg {
    width: 9.1rem;
    height: 9.1rem;
  }
}

.mxd-hero-00__images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-00-image {
  position: absolute;
  display: none;
}

@media only screen and (min-width: 768px) {
  .hero-00-image {
    display: block;
  }

  .hero-00-image.image-01 {
    top: -16%;
    left: -6%;
    width: 180px;
  }

  .hero-00-image.image-02 {
    top: -40%;
    left: auto;
    right: 4%;
    width: 100px;
    z-index: 1;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-00-image.image-01 {
    width: 260px;
    top: -14%;
    left: -9%;
  }

  .hero-00-image.image-02 {
    width: 140px;
    right: -6%;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-00-image.image-01 {
    width: 300px;
  }

  .hero-00-image.image-02 {
    width: 180px;
    top: -40%;
  }
}

.hero-00-manifest {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.hero-00-manifest .mxd-manifest {
  line-height: 1.5;
}

@media only screen and (min-width: 768px) {
  .hero-00-manifest .mxd-manifest {
    font-size: 3rem;
    max-width: 780px;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-00-manifest .mxd-manifest {
    font-size: 3.8rem;
    max-width: 1000px;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-00-manifest .mxd-manifest {
    font-size: 4.4rem;
    max-width: 1150px;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #00 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #01 Start */
/* ------------------------------------------------*/
.mxd-hero-section {
  padding-top: 7.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-section {
    padding-top: 9.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-fullheight {
    height: 100vh;
  }
}

.mxd-hero-01 {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01 {
    height: 100%;
    padding-bottom: 4rem;
  }
}

.mxd-hero-01__wrap {
  position: relative;
  width: 100%;
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-01__wrap {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__wrap {
    height: 100%;
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__wrap {
    padding: 0 9rem;
  }
}

.mxd-hero-01__top {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 11.5rem 0 12.9rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-01__top {
    padding: 12.6rem 0 14.6rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__top {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: -moz-calc(100% - 16rem);
    height: calc(100% - 16rem);
    padding: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__top {
    height: -moz-calc(100% - 20rem);
    height: calc(100% - 20rem);
  }
}

.mxd-hero-01__title-wrap {
  position: relative;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-01__title-wrap {
    width: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__title-wrap {
    padding-bottom: 2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__title-wrap {
    padding-bottom: 4rem;
  }
}

.mxd-hero-01__marquee {
  position: absolute;
  top: 7.6rem;
  right: 0;
  width: 100%;
  background-color: var(--accent);
  border: 1px solid var(--base);
  -moz-border-radius: 3.3rem;
  border-radius: 3.3rem;
  overflow: hidden;
}

.mxd-hero-01__marquee .marquee-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.mxd-hero-01__marquee .marquee__item.item-regular {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  margin: 0;
  color: var(--t-opp-bright);
}

.mxd-hero-01__marquee .marquee__item.item-regular p {
  font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent);
  color: var(--t-opp-bright);
}

.mxd-hero-01__marquee .marquee__item.item-regular svg {
  width: 3.7rem;
  height: 3.7rem;
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-01__marquee {
    top: 0;
    right: 7rem;
    width: 265px;
    height: 88px;
    -moz-border-radius: 4.4rem;
    border-radius: 4.4rem;
  }

  .mxd-hero-01__marquee .marquee-flex {
    gap: 2.6rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular {
    gap: 2rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular p {
    font-size: 8rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular svg {
    width: 5.1rem;
    height: 5.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__marquee {
    right: 11rem;
    width: 389px;
    height: 132px;
    -moz-border-radius: 6.6rem;
    border-radius: 6.6rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular {
    gap: 2.6rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular p {
    font-size: 12rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular svg {
    width: 8.5rem;
    height: 8.5rem;
    fill: currentColor;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__marquee {
    right: 13.3rem;
    width: 430px;
    height: 154px;
    -moz-border-radius: 7.7rem;
    border-radius: 7.7rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular p {
    font-size: 14rem;
  }

  .mxd-hero-01__marquee .marquee__item.item-regular svg {
    width: 9.2rem;
    height: 9.2rem;
  }
}

.hero-01-title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero-01-title {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.4rem;
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-01-title {
    gap: 2rem;
    font-size: 12rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-01-title {
    font-size: 14rem;
  }
}

.hero-01-title__row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .hero-01-title__row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-01-title__row {
    gap: 3.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-01-title__row {
    gap: 3.4rem;
  }
}

.hero-01-title__item {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.hero-01-title__item.title-item-transparent {
  opacity: 0;
}

.hero-01-title__item.title-item-image {
  display: none;
}

.hero-01-title__item.title-item-image svg {
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .hero-01-title__item {
    white-space: nowrap;
  }

  .hero-01-title__item.title-item-transparent {
    padding: 0 5rem;
    -moz-border-radius: 4.4rem;
    border-radius: 4.4rem;
    color: var(--t-opp-bright);
  }

  .hero-01-title__item.title-item-image {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-top: 1rem;
  }

  .hero-01-title__item.title-item-image svg {
    width: 5.1rem;
    height: 5.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-01-title__item.title-item-transparent {
    padding: 0 7rem;
    -moz-border-radius: 6.6rem;
    border-radius: 6.6rem;
  }

  .hero-01-title__item.title-item-image svg {
    width: 8.5rem;
    height: 8.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-01-title__item.title-item-transparent {
    -moz-border-radius: 7.7rem;
    border-radius: 7.7rem;
  }

  .hero-01-title__item.title-item-image svg {
    width: 9.2rem;
    height: 9.2rem;
  }
}

.mxd-hero-01__images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-01-image {
  position: absolute;
  display: none;
}

.hero-01-image.image-01 {
  width: 180px;
  top: -6%;
  left: -20%;
}

.hero-01-image.image-02 {
  top: -20%;
  right: -1.5rem;
}

.hero-01-image.image-03 {
  top: 86%;
  left: 0;
}

.hero-01-image.image-02,
.hero-01-image.image-03 {
  width: 100px;
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .hero-01-image {
    display: block;
  }

  .hero-01-image.image-01 {
    top: -26%;
    left: -5%;
  }

  .hero-01-image.image-02 {
    top: -36%;
    left: auto;
    right: 5%;
  }

  .hero-01-image.image-03 {
    top: 90%;
    left: 35%;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-01-image.image-01 {
    width: 260px;
    top: -24%;
    left: -7%;
  }

  .hero-01-image.image-02,
  .hero-01-image.image-03 {
    width: 140px;
  }

  .hero-01-image.image-02 {
    top: -34%;
    right: 6%;
  }

  .hero-01-image.image-03 {
    top: 80%;
    left: 42%;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-01-image.image-01 {
    width: 300px;
  }

  .hero-01-image.image-02,
  .hero-01-image.image-03 {
    width: 180px;
  }

  .hero-01-image.image-03 {
    top: 76%;
    left: 38%;
  }

  .hero-01-image.image-02 {
    top: -36%;
    right: 5%;
  }
}

.mxd-hero-01__bottom {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  width: 100%;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__bottom {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 6rem;
    height: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__bottom {
    height: 20rem;
  }
}

.mxd-hero-01__data-wrap {
  position: relative;
  padding: 14rem 0 13.2rem 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__data-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__data-wrap {
    padding-right: 15rem;
  }
}

.mxd-hero-01__dash-line {
  display: none;
  width: 100%;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__dash-line {
    display: block;
  }
}

.dash-line {
  --s: 0.8rem;
  height: 3px;
  background: -moz-radial-gradient(circle closest-side, var(--st-muted) 98%, rgba(0, 0, 0, 0)) 0 0/var(--s) 100%, -moz-linear-gradient(left, var(--st-muted) 50%, rgba(0, 0, 0, 0) 0) -moz-calc(var(--s) / 2) 0/calc(2 * var(--s)) 100%;
  background: radial-gradient(circle closest-side, var(--st-muted) 98%, rgba(0, 0, 0, 0)) 0 0/var(--s) 100%, -webkit-gradient(linear, left top, right top, color-stop(50%, var(--st-muted)), color-stop(0, rgba(0, 0, 0, 0))) calc(var(--s) / 2) 0/calc(2 * var(--s)) 100%;
  background: radial-gradient(circle closest-side, var(--st-muted) 98%, rgba(0, 0, 0, 0)) 0 0/var(--s) 100%, linear-gradient(90deg, var(--st-muted) 50%, rgba(0, 0, 0, 0) 0) calc(var(--s) / 2) 0/calc(2 * var(--s)) 100%;
}

.mxd-hero-01__data-btn {
  margin-bottom: 3.1rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__data-btn {
    -ms-flex-preferred-size: 12rem;
    flex-basis: 12rem;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 12rem;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__data-btn {
    -ms-flex-preferred-size: 16rem;
    flex-basis: 16rem;
    height: 16rem;
  }
}

.mxd-hero-01__data-descr {
  margin-bottom: 2.3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__data-descr {
    width: 386px;
    margin-bottom: 0;
  }
}

.mxd-hero-01__data-socials ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-hero-01__data-socials ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
  color: var(--t-bright);
}

.mxd-hero-01__data-socials ul li svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.mxd-hero-01__data-socials ul li a {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__data-socials ul li svg {
    width: 1.9rem;
    height: 1.9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__data-socials ul li a {
    font-size: 2.2rem;
  }
}

.mxd-hero-01__video-wrap {
  position: relative;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__video-wrap {
    -ms-flex-preferred-size: 24.6rem;
    flex-basis: 24.6rem;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-01__video-wrap {
    -ms-flex-preferred-size: 30.8rem;
    flex-basis: 30.8rem;
    height: 20rem;
  }
}

.mxd-hero-01__video-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1rem;
}

.mxd-hero-01__video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mxd-pulse {
  -webkit-animation: mxd-pulse 1.2s infinite ease-in-out alternate;
  -moz-animation: mxd-pulse 1.2s infinite ease-in-out alternate;
  animation: mxd-pulse 1.2s infinite ease-in-out alternate;
}

@-webkit-keyframes mxd-pulse {
  from {
    -webkit-transform: scale(0.94);
    transform: scale(0.94);
  }

  to {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
}

@-moz-keyframes mxd-pulse {
  from {
    -moz-transform: scale(0.94);
    transform: scale(0.94);
  }

  to {
    -moz-transform: scale(1.06);
    transform: scale(1.06);
  }
}

@keyframes mxd-pulse {
  from {
    -webkit-transform: scale(0.94);
    -moz-transform: scale(0.94);
    transform: scale(0.94);
  }

  to {
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    transform: scale(1.06);
  }
}

.mxd-pulse-small {
  -webkit-animation: mxd-pulse 1.2s infinite ease-in-out alternate;
  -moz-animation: mxd-pulse 1.2s infinite ease-in-out alternate;
  animation: mxd-pulse 1.2s infinite ease-in-out alternate;
}

@keyframes mxd-pulse {
  from {
    -webkit-transform: scale(0.94);
    -moz-transform: scale(0.94);
    transform: scale(0.94);
  }

  to {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
  }
}

.mxd-move {
  -webkit-animation: mxd-move 1.2s infinite ease-in-out alternate;
  -moz-animation: mxd-move 1.2s infinite ease-in-out alternate;
  animation: mxd-move 1.2s infinite ease-in-out alternate;
}

.mxd-move-slow {
  -webkit-animation: mxd-move 2s infinite ease-in-out alternate;
  -moz-animation: mxd-move 2s infinite ease-in-out alternate;
  animation: mxd-move 2s infinite ease-in-out alternate;
}

@-webkit-keyframes mxd-move {
  from {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
  }

  to {
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);
  }
}

@-moz-keyframes mxd-move {
  from {
    -moz-transform: translateY(-1rem);
    transform: translateY(-1rem);
  }

  to {
    -moz-transform: translateY(1rem);
    transform: translateY(1rem);
  }
}

@keyframes mxd-move {
  from {
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    transform: translateY(-1rem);
  }

  to {
    -webkit-transform: translateY(1rem);
    -moz-transform: translateY(1rem);
    transform: translateY(1rem);
  }
}

.mxd-rotate {
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
}

.mxd-rotate-slow {
  -webkit-animation: spin 16s linear infinite;
  -moz-animation: spin 16s linear infinite;
  animation: spin 16s linear infinite;
}

/* ------------------------------------------------*/
/* Block - Hero Section #01 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #02 Start */
/* ------------------------------------------------*/
.mxd-hero-02 {
  position: relative;
}

.hero-02-static__tl-trigger {
  position: absolute;
  top: 14%;
  right: 0;
  width: 1px;
  height: 1px;
}

.mxd-hero-02-static__top {
  position: relative;
  padding-top: 7.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-static__top {
    padding-top: 9.6rem;
  }
}

.hero-02-static__caption {
  margin-top: 2rem;
}

@media only screen and (min-width: 768px) {
  .hero-02-static__caption {
    margin-top: 3rem;
  }
}

.mxd-hero-02-static__bottom {
  position: absolute;
  bottom: 3rem;
  left: 0;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-static__bottom {
    position: absolute;
    bottom: 4rem;
    left: 0;
  }
}

.mxd-hero-02-static__btn {
  display: none;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-static__btn {
    display: block;
    position: absolute;
    right: 6rem;
    bottom: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-static__btn {
    position: absolute;
    right: 9rem;
    bottom: 4rem;
  }
}

.mxd-hero-02-static__center {
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

.mxd-hero-02-marquee {
  position: relative;
  color: var(--t-bright);
}

.mxd-hero-02-marquee .marquee__item.item-regular {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
  margin: 0;
}

.mxd-hero-02-marquee .marquee__text {
  font-size: 10rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  margin: 0;
}

.mxd-hero-02-marquee .marquee__image {
  width: 7.1rem;
  height: 7.1rem;
}

.mxd-hero-02-marquee .marquee__image svg {
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-marquee .marquee__item.item-regular {
    gap: 4rem;
  }

  .mxd-hero-02-marquee .marquee__text {
    font-size: 14rem;
  }

  .mxd-hero-02-marquee .marquee__image {
    width: 9.1rem;
    height: 9.1rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-marquee .marquee__item.item-regular {
    gap: 5rem;
  }

  .mxd-hero-02-marquee .marquee__text {
    font-size: 18rem;
  }

  .mxd-hero-02-marquee .marquee__image {
    width: 12.1rem;
    height: 12.1rem;
  }
}

.mxd-hero-02-marquee__image {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
  width: 18rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-marquee__image {
    width: 30rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-marquee__image {
    width: 42rem;
  }
}

.mxd-hero-02-marquee__line .marquee__toleft {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-marquee__line .marquee__toleft {
    gap: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-marquee__line .marquee__toleft {
    gap: 5rem;
  }
}

.mxd-hero-02-scroll__wrap {
  padding: 0 3rem;
  padding-bottom: 100vh;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-scroll__wrap {
    padding: 0 6rem;
    padding-bottom: 100vh;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-02-scroll__wrap {
    padding-bottom: 100vh;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-scroll__wrap {
    padding: 0 9rem;
    padding-bottom: 100vh;
  }
}

.mxd-hero-02-scroll__images {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-scroll__images {
    gap: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-02-scroll__images {
    gap: 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-scroll__images {
    gap: 14rem;
  }
}

.mxd-hero-02-images__row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-images__row {
    gap: 6rem;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-02-images__row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.mxd-hero-02-images__row-02,
.mxd-hero-02-images__row-03 {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.mxd-hero-02-image__landscape,
.mxd-hero-02-image__portrait {
  position: relative;
  display: block;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-image__portrait.portrait-01 {
    padding-bottom: 9rem;
  }

  .mxd-hero-02-image__portrait.portrait-02 {
    margin-top: -3rem;
  }

  .mxd-hero-02-image__portrait.portrait-03 {
    margin-top: -9rem;
  }

  .mxd-hero-02-image__portrait.portrait-04 {
    padding-top: 3rem;
  }

  .mxd-hero-02-image__portrait.portrait-05 {
    padding-left: 30%;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-02-image__portrait.portrait-01 {
    padding-bottom: 9rem;
  }

  .mxd-hero-02-image__portrait.portrait-02 {
    margin-top: 0;
    padding-top: 8rem;
    padding-bottom: 3rem;
  }

  .mxd-hero-02-image__portrait.portrait-03 {
    margin-top: 0;
  }

  .mxd-hero-02-image__portrait.portrait-04 {
    padding-top: 0;
    margin-top: -10rem;
  }

  .mxd-hero-02-image__portrait.portrait-05 {
    padding-left: 0;
  }
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-image__landscape.landscape-02 {
    padding-top: 100px;
  }

  .mxd-hero-02-image__landscape.landscape-03 {
    padding-top: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-02-image__landscape.landscape-02 {
    padding-top: 100px;
  }

  .mxd-hero-02-image__landscape.landscape-03 {
    padding-top: 60px;
  }
}

.mxd-hero-02-image__inner {
  position: relative;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  -webkit-box-shadow: 0 29px 58px rgba(0, 0, 0, 0.3), 0 25px 22px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 29px 58px rgba(0, 0, 0, 0.3), 0 25px 22px rgba(0, 0, 0, 0.22);
  box-shadow: 0 29px 58px rgba(0, 0, 0, 0.3), 0 25px 22px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.no-touch .mxd-hero-02-image__inner:hover .mxd-preview-hover {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mxd-hero-02-image__inner.type-01,
.mxd-hero-02-image__inner.type-02 {
  width: 220px;
  height: 266px;
}

.mxd-hero-02-image__inner.type-03 {
  width: 300px;
  height: 200px;
}

.mxd-hero-02-image__inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-image__inner.type-03 {
    width: 360px;
    height: 237px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-02-image__inner.type-01 {
    width: 280px;
    height: 340px;
  }

  .mxd-hero-02-image__inner.type-02 {
    width: 500px;
    height: 640px;
  }

  .mxd-hero-02-image__inner.type-03 {
    width: 440px;
    height: 290px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-image__inner.type-01 {
    width: 400px;
    height: 480px;
  }

  .mxd-hero-02-image__inner.type-02 {
    width: 760px;
    height: 940px;
  }

  .mxd-hero-02-image__inner.type-03 {
    width: 620px;
    height: 420px;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #02 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #03 Start */
/* ------------------------------------------------*/
.mxd-hero-03 {
  position: relative;
  width: 100%;
}

.mxd-hero-03__wrap {
  position: relative;
  width: 100%;
}

.mxd-hero-03__top {
  position: relative;
  height: -moz-calc(100vh - 7.6rem);
  height: calc(100vh - 7.6rem);
  padding-top: 12rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-03__top {
    height: -moz-calc(100vh - 9.6rem);
    height: min(calc(100vh - 9.6rem), 70rem);
    padding-top: 14rem;
  }
}

.mxd-hero-03__bottom {
  position: relative;
}

.mxd-hero-03__marquee {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.mxd-hero-03__marquee .marquee__item {
  width: auto;
  height: auto;
  padding: 1rem 0;
  margin-right: 6rem;
  -moz-border-radius: 0;
  border-radius: 0;
  overflow: visible;
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-03__marquee .marquee__item {
    margin-right: 6rem;
  }
}

.hero-03-marquee__video {
  width: 80vw;
  height: 80vw;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  /* Beautiful shimmering skeleton shown while the video buffers, instead of
     flashing the poster image. Stops automatically once the video is loaded. */
  background-color: #15151c;
  background-image: linear-gradient(110deg, #15151c 28%, #262635 50%, #15151c 72%);
  background-size: 220% 100%;
  animation: hero-skeleton-shimmer 1.8s ease-in-out infinite;
}

.hero-03-marquee__video:has(video.is-loaded) {
  background: transparent;
  animation: none;
}

/* The tile must never read as an empty grey circle while a video buffers.
   The poster is a tiny webp that paints immediately, so reveal it (it sits
   under the shimmer) instead of hiding the <video> until playback. The video
   still fades in on top once it actually plays. */
.hero-03-marquee__video video.lazy-video {
  opacity: 1;
}

@keyframes hero-skeleton-shimmer {
  0% {
    background-position: 220% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

.hero-03-marquee__video video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .hero-03-marquee__video {
    width: 42vw;
    height: 42vw;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-03-marquee__video {
    width: 26vw;
    height: 26vw;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-03-marquee__video {
    width: 24vw;
    height: 24vw;
  }
}

.hero-03-marquee__image {
  position: relative;
  width: 80vw;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .hero-03-marquee__image {
    width: 42vw;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-03-marquee__image {
    width: 26vw;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-03-marquee__image {
    width: 24vw;
  }
}

.mxd-hero-03__headline {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 1.5rem;
  mix-blend-mode: difference;
}

.mxd-hero-03__headline svg {
  fill: #ffffff;
  mix-blend-mode: difference;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-03__headline {
    padding: 0 4.5rem;
  }
}

/* from tablet up the wordmark is big enough (15vw–15rem) that a 2rem anchor
   lets its descenders overflow the block and thread the proof-rail hairline —
   the signature desktop alignment ("g" of elegant crossing the line) */
@media only screen and (min-width: 768px) {
  .mxd-hero-03__headline {
    bottom: 2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-03__headline {
    padding: 0 7.5rem;
  }
}

.hero-03-headline__caption {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: #ffffff;
  margin-bottom: 5.2rem;
}

@media only screen and (min-width: 768px) {
  .hero-03-headline__caption {
    font-size: 4.4rem;
    margin-bottom: 4.7rem;
  }
}

@media only screen and (min-width: 992px) {
  .hero-03-headline__caption {
    margin-bottom: 1rem;
  }
}

.hero-03-headline__hidden {
  display: none;
}

.hero-03-headline__svg-mobile {
  display: block;
}

@media only screen and (min-width: 992px) {
  .hero-03-headline__svg-mobile {
    display: none;
  }
}

.hero-03-headline__svg {
  display: none;
}

@media only screen and (min-width: 992px) {
  .hero-03-headline__svg {
    display: block;
  }
}

/* Phones: size the hero's top to its CONTENT (circle + headline) instead of a
   full screen, and top-anchor the marquee so the circle sits just under the
   nav. By default the circle is vertically centered in a `100vh` box, which
   dumps all the unused height as dead space ABOVE the circle and pushes the
   next section off-screen. Anchoring the circle to the top removes that gap and
   pulls the following section up into view, while the "Cinema-grade AI"
   caption still overlaps/reflects over the circle and "insanely elegant" sits
   just below it, the same as desktop.
   Height = circle (80vw) + room for the headline that overlaps below it.
   The headline anchor scales with the 15vw wordmark (2vw ≈ the 2rem-vs-15rem
   ratio desktop uses) so the "g" descenders thread the proof-rail hairline on
   phones exactly like desktop; the height term drops by the same 6rem-2vw so
   the wordmark keeps its position relative to the circle and the hairline
   rises to meet it. */
@media only screen and (max-width: 767px) {
  .mxd-hero-03__top {
    height: -webkit-calc(82vw + 12rem);
    height: calc(82vw + 12rem);
    padding-top: 0;
  }

  .mxd-hero-03__headline {
    bottom: 2vw;
  }

  .mxd-hero-03__marquee {
    top: 2rem;
    bottom: auto;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #03 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #04 Start */
/* ------------------------------------------------*/
.mxd-hero-04 {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-top: 14rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-04 {
    padding-top: 16rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-04 {
    padding-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-04 {
    padding-top: 4rem;
  }
}

.mxd-page-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-04-bg {
  height: 300vh;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .hero-04-bg {
    height: 200vh;
  }
}

.hero-04-bg__obj-01,
.hero-04-bg__obj-02 {
  position: absolute;
}

.hero-04-bg__obj-01 img,
.hero-04-bg__obj-02 img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-04-bg__obj-01 {
  top: 680px;
  left: -50px;
  width: 240px;
}

@media only screen and (min-width: 768px) {
  .hero-04-bg__obj-01 {
    width: 340px;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-04-bg__obj-01 {
    top: 360px;
    width: 340px;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-04-bg__obj-01 {
    top: 400px;
    left: -90px;
    width: 460px;
  }
}

.hero-04-bg__obj-02 {
  top: 10px;
  right: -30px;
  width: 200px;
}

@media only screen and (min-width: 768px) {
  .hero-04-bg__obj-02 {
    top: 40px;
    right: -60px;
    width: 360px;
  }
}

@media only screen and (min-width: 992px) {
  .hero-04-bg__obj-02 {
    top: 40px;
    right: -60px;
    width: 460px;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-04-bg__obj-02 {
    top: 410px;
    right: -60px;
    width: 460px;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-04-bg__obj-02 {
    top: 430px;
    right: -60px;
    width: 600px;
  }
}

.mxd-hero-04__wrap {
  position: relative;
  width: 100%;
  padding: 0 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-04__wrap {
    padding: 0 4.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-04__wrap {
    height: 100%;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-04__wrap {
    padding: 0 7.5rem;
  }
}

.mxd-hero-04__left {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-04__left {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-04__left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.mxd-hero-04__right {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.9rem;
  padding-bottom: 5.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-04__right {
    gap: 5.2rem;
    padding-bottom: 7.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-04__right {
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-04__right {
    gap: 6.8rem;
  }
}

.mxd-hero-04__imageblock {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  padding: 3rem;
  -moz-border-radius: 3.6rem;
  border-radius: 3.6rem;
  background-color: rgba(var(--accent-rgb), 0.7);
  border: 1px solid rgba(var(--accent-rgb), 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mxd-hero-04__imageblock p {
  font: normal var(--fw-medium) 2.5rem/1.2 var(--_font-accent);
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-hero-04__imageblock {
    padding: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-04__imageblock {
    font-size: 3rem;
  }
}

.hero-04-imageblock__btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.mxd-hero-04__aboutblock {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  padding: 3rem;
  -moz-border-radius: 3.6rem;
  border-radius: 3.6rem;
  background-color: rgba(var(--additional-rgb), 0.7);
  border: 1px solid rgba(var(--additional-rgb), 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mxd-hero-04__aboutblock p {
  font: normal var(--fw-medium) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-hero-04__aboutblock {
    padding: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-04__aboutblock p {
    font-size: 2.2rem;
  }
}

.mxd-hero-04__headline {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-04__headline {
    gap: 3.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-04__headline {
    gap: 3.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-04__headline {
    gap: 4.8rem;
  }
}

.mxd-hero-04__headline,
.mxd-hero-04__descr {
  padding: 0;
}

@media only screen and (min-width: 1200px) {

  .mxd-hero-04__headline,
  .mxd-hero-04__descr {
    padding: 0 3rem;
  }
}

@media only screen and (min-width: 1600px) {

  .mxd-hero-04__headline,
  .mxd-hero-04__descr {
    padding: 0 6rem;
  }
}

.hero-04-title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.hero-04-title__row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero-04-title__row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-04-title__row {
    gap: 3.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-04-title__row {
    gap: 3.4rem;
  }
}

.hero-04-title__item {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.hero-04-title__item.title-item-transparent {
  opacity: 0;
}

.hero-04-title__item.title-item-image {
  padding-top: 1rem;
  display: none;
}

.hero-04-title__item.title-item-image svg {
  width: 3.5rem;
  height: 3.5rem;
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .hero-04-title__item {
    white-space: nowrap;
  }

  .hero-04-title__item.title-item-transparent {
    padding: 0 5rem;
    -moz-border-radius: 4.4rem;
    border-radius: 4.4rem;
    color: var(--t-opp-bright);
  }

  .hero-04-title__item.title-item-image {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-top: 1rem;
  }

  .hero-04-title__item.title-item-image svg {
    width: 7.5rem;
    height: 7.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-04-title__item.title-item-transparent {
    padding: 0 7rem;
    -moz-border-radius: 6.6rem;
    border-radius: 6.6rem;
  }

  .hero-04-title__item.title-item-image svg {
    width: 7.5rem;
    height: 7.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-04-title__item.title-item-transparent {
    -moz-border-radius: 7.7rem;
    border-radius: 7.7rem;
  }

  .hero-04-title__item.title-item-image svg {
    width: 8.2rem;
    height: 8.2rem;
  }
}

.hero-04-marquee {
  position: relative;
  width: 100%;
  height: 4.6rem;
  line-height: 4.6rem;
  -moz-border-radius: 2.3rem;
  border-radius: 2.3rem;
  border: 1px solid var(--st-opp-bright);
  background-color: var(--neutral-transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--t-bright);
}

.hero-04-marquee p {
  font: normal var(--fw-medium) 1.8rem/4.6rem var(--_font-accent);
  color: var(--t-bright);
}

.hero-04-marquee svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .hero-04-marquee {
    height: 5.6rem;
    -moz-border-radius: 2.8rem;
    border-radius: 2.8rem;
  }

  .hero-04-marquee p {
    font-size: 2.2rem;
    line-height: 5.6rem;
  }

  .hero-04-marquee svg {
    width: 1.9rem;
    height: 1.9rem;
  }
}

.hero-04-marquee .marquee-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.hero-04-marquee .marquee__item.item-regular {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .hero-04-marquee .marquee-flex {
    gap: 1.4rem;
  }

  .hero-04-marquee .marquee__item.item-regular {
    gap: 1.4rem;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #04 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #05 Start */
/* ------------------------------------------------*/
.mxd-hero-05 {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-top: 12rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-05 {
    padding-top: 16rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-05 {
    padding-top: 13.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-05 {
    padding-top: 17rem;
  }
}

.mxd-hero-05__wrap {
  position: relative;
  width: 100%;
  padding: 0 1.5rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-05__wrap {
    padding: 0 4.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-05__wrap {
    height: 100%;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-05__wrap {
    padding: 0 7.5rem;
  }
}

.mxd-hero-05__top {
  margin-bottom: 4.9rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-05__top {
    margin-bottom: 8.2rem;
  }
}

.mxd-hero-05__bottom {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-05__bottom {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.mxd-hero-05__worksblock {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  padding: 3rem;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  background-color: var(--base-tint);
}

@media only screen and (min-width: 768px) {
  .mxd-hero-05__worksblock {
    -ms-flex-preferred-size: 30rem;
    flex-basis: 30rem;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-05__worksblock {
    -ms-flex-preferred-size: 43rem;
    flex-basis: 43rem;
    padding: 4rem 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-05__worksblock {
    -ms-flex-preferred-size: 55.5rem;
    flex-basis: 55.5rem;
    padding: 4rem 8rem;
  }
}

.hero-05-worksblock__descr {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
  text-align: center;
}

.mxd-hero-05__videoblock {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 3rem;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
}

.mxd-hero-05__videoblock img {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-05__videoblock {
    padding: 4rem;
  }
}

.mxd-hero-05-videoblock__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mxd-hero-05-videoblock__video video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mxd-hero-05-videoblock__descr {
  position: relative;
  padding: 3rem;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.mxd-hero-05-videoblock__descr p {
  color: var(--pt-t-dark-bright);
  font-weight: 500;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-05-videoblock__descr {
    padding: 3rem 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-05-videoblock__descr {
    max-width: 460px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-05-videoblock__descr {
    max-width: 535px;
  }
}

.hero-05-title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 3.5rem;
}

@media only screen and (min-width: 1200px) {
  .hero-05-title {
    margin-top: 0;
  }
}

.hero-05-title__row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero-05-title__row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-05-title__row {
    gap: 3.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-05-title__row {
    gap: 3.4rem;
  }
}

.hero-05-title__item {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.hero-05-title__item.title-item-transparent {
  opacity: 0;
}

.hero-05-title__item.title-item-image {
  padding-top: 1rem;
  display: none;
}

.hero-05-title__item.title-item-image svg {
  width: 3.5rem;
  height: 3.5rem;
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .hero-05-title__item.title-item-transparent {
    padding: 0 5rem;
    -moz-border-radius: 4.4rem;
    border-radius: 4.4rem;
    color: var(--t-opp-bright);
  }

  .hero-05-title__item.title-item-image {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-top: 1rem;
  }

  .hero-05-title__item.title-item-image svg {
    width: 4.1rem;
    height: 4.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-05-title__item.title-item-transparent {
    padding: 0 7rem;
    -moz-border-radius: 6.6rem;
    border-radius: 6.6rem;
  }

  .hero-05-title__item.title-item-image svg {
    width: 7.5rem;
    height: 7.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-05-title__item.title-item-transparent {
    -moz-border-radius: 7.7rem;
    border-radius: 7.7rem;
  }

  .hero-05-title__item.title-item-image svg {
    width: 8.2rem;
    height: 8.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-05-headline__avatars {
    padding-top: 2.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-05-headline__avatars {
    padding-top: 3rem;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #05 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #06 Start */
/* ------------------------------------------------*/
.mxd-hero-06 {
  position: relative;
  width: 100%;
  padding-top: 7.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06 {
    padding-top: 9.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06 {
    height: 100vh;
  }
}

.mxd-hero-06__wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 10.9rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06__wrap {
    padding-top: 14.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 4rem 6rem 0 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-06__wrap {
    padding: 4rem 9rem 0 9rem;
  }
}

.mxd-hero-06__top {
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__top {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

.mxd-hero-06__bottom {
  position: relative;
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06__bottom {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__bottom {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 4rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-06__bottom {
    padding: 4rem 0;
  }
}

.mxd-hero-06__btn-mobile {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 3rem;
  margin-top: 5.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06__btn-mobile {
    padding: 0 6rem;
    margin-top: 7.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__btn-mobile {
    display: none;
  }
}

.mxd-hero-06__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  width: 100%;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
}

.mxd-hero-06__video {
  padding: 0 3rem;
  margin-bottom: 1.5rem;
}

.mxd-hero-06__video video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06__video {
    padding: 0 6rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin-bottom: 0;
    -moz-border-radius: var(--_radius-l);
    border-radius: var(--_radius-l);
    overflow: hidden;
  }

  .mxd-hero-06__video video {
    -moz-border-radius: none;
    border-radius: none;
  }
}

.hero-06-video__cover {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .hero-06-video__cover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--base);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.6) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.6) 100%);
  }
}

.mxd-hero-06__data {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__data {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.mxd-hero-06__list {
  position: relative;
  width: 100%;
  padding: 0 3rem;
  margin-bottom: 5.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06__list {
    padding: 0 6rem;
    margin-bottom: 7.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__list {
    padding: 3.4rem 4rem 0 4rem;
  }

  .mxd-hero-06__list p {
    color: var(--pt-t-light-bright);
    font-weight: 400;
  }
}

.mxd-hero-06__headline {
  position: relative;
  width: 100%;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__headline {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.hero-06-headline__descr {
  position: relative;
  width: 100%;
  padding: 0 3rem;
  margin-bottom: 2.5rem;
}

.hero-06-headline__descr p {
  color: var(--t-bright);
  font-size: 2rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

@media only screen and (min-width: 768px) {
  .hero-06-headline__descr {
    padding: 0 6rem;
    margin-bottom: 1.6rem;
  }

  .hero-06-headline__descr p {
    max-width: 440px;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-06-headline__descr {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 0 4rem;
    margin-bottom: 0.4rem;
  }

  .hero-06-headline__descr p {
    color: var(--pt-t-light-bright);
    font-weight: 500;
    max-width: 340px;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-06-headline__descr {
    padding: 0 5rem;
  }

  .hero-06-headline__descr p {
    font-size: 2.4rem;
    max-width: 440px;
  }
}

.hero-06-headline__btn {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .hero-06-headline__btn {
    display: block;
    position: absolute;
    right: 5rem;
    bottom: 0;
  }
}

.hero-06-headline__content {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-06-headline__title {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

.mxd-hero-06__marquee {
  margin-bottom: 3.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06__marquee {
    margin-bottom: 4.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__marquee {
    margin-bottom: 0;
    padding-bottom: 4.3rem;
  }
}

.mxd-hero-06__mark,
.mxd-hero-06__more {
  position: relative;
}

.mxd-hero-06__mark {
  display: block;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  padding: 2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-06__mark {
    padding: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__mark {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    background-color: transparent;
    -moz-border-radius: none;
    border-radius: none;
    padding: 0;
  }
}

.mxd-hero-06__more {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-06__more {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #06 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #07 Start */
/* ------------------------------------------------*/
.mxd-hero-07 {
  position: relative;
  width: 100%;
}

.mxd-hero-07__tl-trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
}

.hero-07-fade-out-scroll {
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
}

.hero-07-slide-out-scroll {
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
}

.mxd-hero-07__wrap {
  position: relative;
  width: 100%;
  padding-top: 7.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-07__wrap {
    padding-top: 9.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-07__wrap {
    height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 9.6rem;
  }
}

.mxd-hero-07__top {
  position: relative;
  width: 100%;
  padding-top: 3.1rem;
  margin-bottom: 4.6rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-07__top {
    padding-top: 10.3rem;
    margin-bottom: 13.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-07__top {
    padding-top: 2.3rem;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-07__top {
    padding-top: 4.3rem;
  }
}

.mxd-hero-07__title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

.mxd-hero-07__bottom {
  position: relative;
  width: 100%;
  padding: 0 3rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-07__bottom {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-07__bottom {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: visible;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-07__bottom {
    padding: 0 9rem;
  }
}

.mxd-hero-07__circle {
  position: relative;
  width: 100%;
  height: 460px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1.5rem;
  margin-bottom: 4.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-07__circle {
    width: 600px;
    height: 600px;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0 auto 4.6rem;
    padding: 0;
    overflow: visible;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-07__circle {
    position: absolute;
    bottom: -250px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-hero-07__circle {
    width: 680px;
    height: 680px;
    bottom: -250px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-07__circle {
    width: 900px;
    height: 900px;
    bottom: -400px;
  }
}

.hero-07-circle__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
}

.hero-07-circle__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .hero-07-circle__image {
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
}

.hero-07-circle__container {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.hero-07-circle__container.mobile-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero-07-circle__container {
    position: static;
  }
}

.hero-07-circle__item {
  padding: 1.8rem 2rem;
  -moz-border-radius: var(--_radius-pt-m);
  border-radius: var(--_radius-pt-m);
  background-color: var(--neutral-transparent);
  border: 1px solid var(--neutral-transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
  -moz-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
  box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
}

@media only screen and (min-width: 768px) {
  .hero-07-circle__item {
    position: absolute;
  }

  .hero-07-circle__item.item-01 {
    top: 3rem;
    right: -1.4rem;
    max-width: 20rem;
  }

  .hero-07-circle__item.item-02 {
    top: 25rem;
    right: -10rem;
    max-width: 16rem;
  }

  .hero-07-circle__item.item-03 {
    top: 20rem;
    left: -8rem;
    max-width: 16rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-07-circle__item.item-02 {
    top: auto;
    top: 21rem;
    right: -10rem;
    max-width: 16rem;
  }

  .hero-07-circle__item.item-03 {
    top: 17rem;
    left: -8rem;
    max-width: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-07-circle__item.item-01 {
    top: 5rem;
    right: 5rem;
    max-width: 20rem;
  }

  .hero-07-circle__item.item-02 {
    top: auto;
    top: 29rem;
    right: -10rem;
    max-width: 16rem;
  }

  .hero-07-circle__item.item-03 {
    top: 24rem;
    left: -7rem;
    max-width: 16rem;
  }
}

.mxd-hero-07__info {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-07__info {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    padding-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-07__info {
    padding-top: 5.6rem;
  }
}

.hero-07-info__container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5.2rem;
}

@media only screen and (min-width: 1200px) {
  .hero-07-info__container {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 4rem;
  }

  .hero-07-info__container:nth-of-type(2) {
    padding-top: 1.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-07-info__container:nth-of-type(2) {
    padding-top: 1.7rem;
  }
}

.hero-07-info__descr {
  position: relative;
  text-align: left;
}

@media only screen and (min-width: 768px) {
  .hero-07-info__descr {
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-07-info__descr {
    max-width: 340px;
    text-align: left;
    margin: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-07-info__descr {
    max-width: 400px;
  }
}

.hero-07-info__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero-07-info__tags {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-07-info__tags {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .hero-07-info__tags.right-align-desktop {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}

.mxd-hero-07__more {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-07__more {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4rem 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-07__more {
    padding: 4rem 9rem;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #07 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #08 Start */
/* ------------------------------------------------*/
.mxd-hero-08 {
  position: relative;
  width: 100%;
}

.mxd-hero-08__tl-trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
}

.mxd-hero-08__wrap {
  position: relative;
  width: 100%;
  padding-top: 7.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-08__wrap {
    padding-top: 9.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-08__wrap {
    height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 0;
  }
}

.mxd-hero-08__center {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 11.5rem 0 11.9rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-08__center {
    padding: 13.5rem 0 14.9rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-08__center {
    padding: 0;
  }
}

.mxd-hero-08__headline {
  position: relative;
}

.hero-08-headline__image {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 50vw;
}

@media only screen and (min-width: 768px) {
  .hero-08-headline__image {
    width: 28vw;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-08-headline__image {
    width: 24vw;
  }
}

.hero-08-headline__title {
  position: relative;
  mix-blend-mode: difference;
}

.hero-08-headline__title h1 {
  color: var(--nl-white);
}

.mxd-hero-08__bottom {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.6rem;
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-08__bottom {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 6rem;
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-08__bottom {
    position: absolute;
    bottom: 4rem;
    left: 0;
    width: 100%;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-08__bottom {
    padding: 0 9rem;
  }
}

.mxd-hero-08__video-wrap {
  position: relative;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-08__video-wrap {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -moz-border-radius: var(--_radius-m);
    border-radius: var(--_radius-m);
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-08__video-wrap {
    -ms-flex-preferred-size: 24.6rem;
    flex-basis: 24.6rem;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-08__video-wrap {
    -ms-flex-preferred-size: 30.8rem;
    flex-basis: 30.8rem;
    height: 20rem;
  }
}

.mxd-hero-08__video-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1rem;
}

.mxd-hero-08__video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mxd-hero-08__data-wrap {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-08__data-wrap {
    max-width: 480px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-08__data-wrap {
    max-width: 540px;
  }
}

.mxd-hero__mark {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
  color: var(--t-bright);
}

.mxd-hero__mark .mark-icon {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-preferred-size: 1rem;
  flex-basis: 1rem;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #a1f21e;
}

.mxd-hero__mark .mark-text {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

@media only screen and (min-width: 768px) {
  .mxd-hero__mark {
    gap: 1.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero__mark {
    font-size: 1.8rem;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #08 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Hero Section #09 Start */
/* ------------------------------------------------*/
.mxd-hero-09 {
  position: relative;
  width: 100%;
  padding-top: 11rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-09 {
    padding-top: 14.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-09 {
    padding-top: 0;
  }
}

.mxd-hero-09__wrap {
  position: relative;
  width: 100%;
  padding-top: 9.6rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-09__wrap {
    padding-top: 9.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-09__wrap {
    padding-top: 0;
    height: 100vh;
  }
}

.mxd-hero-09__headline,
.mxd-hero-09__objects {
  position: relative;
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {

  .mxd-hero-09__headline,
  .mxd-hero-09__objects {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1600px) {

  .mxd-hero-09__headline,
  .mxd-hero-09__objects {
    padding: 0 9rem;
  }
}

.mxd-hero-09__headline {
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-09__headline {
    position: absolute;
    bottom: 4rem;
    left: 0;
    width: 100%;
    z-index: 2;
  }
}

.hero-09-headline__caption {
  margin-bottom: 3.6rem;
}

.hero-09-headline__caption p {
  font: normal var(--fw-medium) 2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .hero-09-headline__caption {
    max-width: 500px;
    margin-bottom: 5.4rem;
  }

  .hero-09-headline__caption p {
    font-size: 2.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-09-headline__caption {
    max-width: 440px;
  }
}

.hero-09-headline__title {
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
}

.hero-09-headline__title svg {
  fill: currentColor;
}

.hero-09-svg-mobile {
  display: block;
}

@media only screen and (min-width: 1200px) {
  .hero-09-svg-mobile {
    display: none;
  }
}

.hero-09-svg-desktop {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .hero-09-svg-desktop {
    display: block;
  }
}

.hero-09-headline__hidden {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

.hero-09-headline__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 6rem;
  max-width: 800px;
}

@media only screen and (min-width: 1600px) {
  .hero-09-headline__tags {
    max-width: 1000px;
  }
}

.mxd-hero-09__objects {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-09__objects {
    gap: 0;
    max-width: 430px;
    margin: 6rem auto 0;
    padding: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-09__objects {
    position: absolute;
    right: 14%;
    top: 6.8rem;
    margin: 0;
    z-index: 1;
  }
}

.hero-09-objects__image {
  position: relative;
  max-width: 325px;
  margin: 6rem auto 0;
  padding-bottom: 4.5rem;
}

@media only screen and (min-width: 768px) {
  .hero-09-objects__image {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
  }
}

.hero-09-objects__item {
  position: relative;
  padding: 1.8rem 2rem;
  -moz-border-radius: var(--_radius-pt-m);
  border-radius: var(--_radius-pt-m);
  background-color: var(--base-tint);
}

@media only screen and (min-width: 768px) {
  .hero-09-objects__item {
    position: absolute;
    background-color: var(--neutral-transparent);
    border: 1px solid var(--neutral-transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    -webkit-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
    -moz-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
    box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
  }

  .hero-09-objects__item.item-01 {
    top: 7rem;
    right: -3rem;
  }

  .hero-09-objects__item.item-02 {
    left: -14rem;
    top: 18rem;
  }

  .hero-09-objects__item.item-03 {
    right: -18rem;
    top: 24rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-09-objects__item.item-01 {
    top: 8rem;
    right: -3rem;
  }

  .hero-09-objects__item.item-02 {
    left: -14rem;
    top: 29rem;
  }

  .hero-09-objects__item.item-03 {
    right: -18rem;
    top: 27rem;
  }
}

.mxd-hero-09__more {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-09__more {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4rem 6rem;
    z-index: 3;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-09__more {
    padding: 4rem 9rem;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #09 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Blog Start */
/* ------------------------------------------------*/
.breadcrumbs__nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 0.5rem;
}

.breadcrumbs__nav span {
  font: normal var(--fw-regular) 1.8rem/1.4 var(--_font-accent);
  color: var(--t-muted);
}

.breadcrumbs__nav span::after {
  content: "/";
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 0.2rem;
}

.breadcrumbs__nav span:last-of-type::after {
  display: none;
}

.breadcrumbs__nav span a {
  display: inline;
  color: var(--t-muted);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-muted), var(--t-muted));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-muted), var(--t-muted));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch .breadcrumbs__nav span a:hover {
  color: var(--t-medium);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.breadcrumbs__nav span.current-item {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted)));
  background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted));
  background: linear-gradient(to right, var(--t-muted), var(--t-muted));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

.breadcrumbs__nav span.current-item a {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, var(--t-muted), var(--t-muted)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch .breadcrumbs__nav span.current-item a:hover {
  color: var(--t-medium);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

@media only screen and (min-width: 1200px) {
  .breadcrumbs__nav {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

.mxd-posts-area {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 1200px) {
  .mxd-posts-area {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .mxd-posts-area.column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.mxd-posts-container {
  position: relative;
  width: 100%;
}

@media only screen and (min-width: 1200px) {
  .mxd-posts-container {
    width: -moz-calc(100% - 450px);
    width: calc(100% - 450px);
  }

  .mxd-posts-container.fullwidth-posts-container {
    width: 100%;
  }
}

.mxd-sidebar {
  position: relative;
  width: 100%;
}

@media only screen and (min-width: 1200px) {
  .mxd-sidebar {
    width: 450px;
  }
}

.mxd-post {
  position: relative;
  overflow: hidden;
}

.post-featured {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12.8rem;
  height: auto;
  padding: 3rem;
  margin-bottom: 6rem;
}

.post-featured.post-featured-v2 {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .post-featured {
    padding: 4rem;
    margin-bottom: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .post-featured.post-featured-v2 {
    height: 760px;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media only screen and (min-width: 1400px) {
  .post-featured {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0;
    height: 670px;
  }

  .post-featured.post-featured-v2 {
    height: 760px;
  }
}

@media only screen and (min-width: 1600px) {
  .post-featured {
    height: 760px;
  }

  .post-featured.post-featured-v2 {
    height: 930px;
  }
}

.post-featured__thumb {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.post-featured__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.post-featured__categories {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

@media only screen and (min-width: 1200px) {
  .post-featured__categories {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.post-featured__content {
  position: relative;
}

@media only screen and (min-width: 768px) {
  .post-featured__content {
    max-width: 500px;
  }
}

@media only screen and (min-width: 1200px) {
  .post-featured__content {
    overflow: hidden;
  }
}

@media only screen and (min-width: 1600px) {
  .post-featured__content {
    max-width: 600px;
  }
}

.post-featured__meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  color: var(--pt-t-light-bright);
  margin-bottom: 1.6rem;
}

.post-featured__meta span {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
}

.post-featured__meta span a {
  color: var(--pt-t-light-bright);
}

.post-featured__meta span svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

.post-featured__meta span.meta-tag {
  font-weight: var(--fw-semibold);
}

@media only screen and (min-width: 1600px) {
  .post-featured__meta span {
    font-size: 2.2rem;
  }
}

.post-featured__title {
  margin-bottom: 2.3rem;
  color: var(--pt-t-light-bright);
}

.post-featured__title a {
  display: inline;
  color: var(--pt-t-light-bright);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--pt-t-light-bright)), to(var(--pt-t-light-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--pt-t-light-bright), var(--pt-t-light-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--pt-t-light-bright), var(--pt-t-light-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch .post-featured__title a:hover {
  color: var(--pt-t-light-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.post-featured__excerpt p {
  color: var(--pt-t-light-bright);
}

.post-featured__btn {
  padding-top: 3.3rem;
}

.post-simple {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5rem;
  height: auto;
  padding: 6rem 0;
  border-top: 1px solid var(--st-muted);
}

.post-simple:last-of-type {
  border-bottom: 1px solid var(--st-muted);
}

@media only screen and (min-width: 768px) {
  .post-simple {
    gap: 3rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 6rem 0;
  }
}

.post-simple__thumb {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.post-simple__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.no-touch .post-simple__thumb:hover .mxd-preview-hover {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media only screen and (min-width: 768px) {
  .post-simple__thumb {
    -ms-flex-preferred-size: 260px;
    flex-basis: 260px;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .post-simple__thumb {
    -ms-flex-preferred-size: 300px;
    flex-basis: 300px;
    height: 320px;
  }
}

@media only screen and (min-width: 1600px) {
  .post-simple__thumb {
    -ms-flex-preferred-size: 400px;
    flex-basis: 400px;
    height: 340px;
  }
}

.post-simple__content {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .post-simple__content {
    max-width: 665px;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media only screen and (min-width: 1600px) {
  .post-simple__content {
    max-width: 765px;
  }
}

.post-simple__descr {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.6rem;
}

.post-simple__meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  color: var(--t-medium);
}

.post-simple__meta span {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
}

.post-simple__meta span a {
  color: var(--t-medium);
}

.post-simple__meta span svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

.post-simple__meta span.meta-tag {
  font-weight: var(--fw-semibold);
}

.no-touch .post-simple__meta span:hover a {
  color: var(--t-bright);
}

.post-simple__title a {
  display: inline;
  color: var(--t-bright);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .post-simple__title a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.post-secondary {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .post-secondary {
    gap: 2.9rem;
  }
}

.post-secondary-container {
  padding-bottom: 3.5rem;
}

.post-secondary-container:last-of-type {
  padding-bottom: 0;
}

@media only screen and (min-width: 1200px) {
  .post-secondary-container {
    padding-bottom: 0;
  }
}

.post-secondary__thumb {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  height: 460px;
}

.no-touch .post-secondary__thumb:hover .mxd-preview-hover {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.post-secondary__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .post-secondary__thumb {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .post-secondary__thumb {
    height: 540px;
  }
}

@media only screen and (min-width: 1600px) {
  .post-secondary__thumb {
    height: 760px;
  }
}

.post-secondary__categories {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .post-secondary__categories {
    padding: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .post-secondary__categories {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.post-secondary__descr {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 3rem 0.1rem 3rem;
  gap: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .post-secondary__descr {
    padding: 0 4rem 0.1rem 4rem;
  }
}

.post-secondary__meta {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 0;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  color: var(--t-medium);
}

.post-secondary__meta span {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
}

.post-secondary__meta span a {
  color: var(--t-medium);
}

.post-secondary__meta span svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

.post-secondary__meta span.meta-tag {
  font-weight: var(--fw-semibold);
}

.no-touch .post-secondary__meta span:hover a {
  color: var(--t-bright);
}

.post-secondary__title {
  position: relative;
}

.post-secondary__title a {
  display: inline;
  color: var(--t-bright);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .post-secondary__title a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.mxd-projects-archive {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-projects-archive>.mxd-projects-archive__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-projects-archive:hover>.mxd-projects-archive__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-projects-archive__item {
  position: relative;
  display: block;
  margin-top: -2px;
}

.mxd-projects-archive__item:first-of-type {
  margin-top: 0;
}

@media only screen and (min-width: 1200px) {
  .no-touch .mxd-projects-archive__item:hover .mxd-projects-archive__title {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .no-touch .mxd-projects-archive__item:hover .mxd-projects-archive__image {
    -ms-flex-preferred-size: 160px;
    flex-basis: 160px;
    -moz-border-radius: 6.2rem;
    border-radius: 6.2rem;
  }
}

.mxd-projects-archive__border {
  position: relative;
  left: 1.5rem;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-projects-archive__inner {
  display: block;
  padding: 3rem 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-archive__inner {
    overflow: hidden;
  }
}

.mxd-projects-archive__title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 3.5rem;
  margin-bottom: 3.4rem;
}

.mxd-projects-archive__title p {
  font: normal var(--fw-medium) 2.6rem/1.4 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-projects-archive__title {
    gap: 3.8rem;
    margin-bottom: 3.8rem;
  }

  .mxd-projects-archive__title p {
    font-size: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-archive__title {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3rem;
    height: 100%;
    margin-bottom: 0;
    max-width: 720px;
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
    -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
    transition: transform var(--_animspeed-slow) var(--_animbezier);
    transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
  }

  .mxd-projects-archive__title p {
    display: inline;
    width: 530px;
  }

  .mxd-projects-archive__title p span {
    text-decoration: none;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
    -moz-background-size: 100% 1px, 0 1px;
    background-size: 100% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 300ms, color 300ms;
    -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
    transition: background-size 300ms, color 300ms;
    transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  }

  .no-touch .mxd-projects-archive__title p span:hover {
    color: var(--t-bright);
    -moz-background-size: 0 1px, 100% 1px;
    background-size: 0 1px, 100% 1px;
  }
}

.mxd-projects-archive__image {
  display: block;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
}

.mxd-projects-archive__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-archive__image {
    -ms-flex-preferred-size: 20px;
    flex-basis: 20px;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 8.4rem;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-transition: border-radius 1.5s, -webkit-flex-basis var(--_animspeed-medium) var(--_animbezier);
    transition: border-radius 1.5s, -webkit-flex-basis var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: border-radius 1.5s, flex-basis var(--_animspeed-medium) var(--_animbezier), -moz-border-radius 1.5s, -moz-flex-basis var(--_animspeed-medium) var(--_animbezier);
    transition: border-radius 1.5s, flex-basis var(--_animspeed-medium) var(--_animbezier);
    transition: border-radius 1.5s, flex-basis var(--_animspeed-medium) var(--_animbezier), -moz-border-radius 1.5s, -webkit-flex-basis var(--_animspeed-medium) var(--_animbezier), -moz-flex-basis var(--_animspeed-medium) var(--_animbezier), -ms-flex-preferred-size var(--_animspeed-medium) var(--_animbezier);
  }
}

.mxd-projects-archive__tagslist {
  margin-bottom: 0.6rem;
}

.mxd-projects-archive__tagslist ul li p {
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-projects-archive__tagslist {
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-archive__tagslist {
    margin-bottom: 0;
  }
}

.mxd-blog-pagination {
  position: relative;
  margin-top: 5rem;
  margin-bottom: 2.4rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-blog-pagination {
    margin-bottom: 0;
  }
}

.mxd-blog-pagination__inner {
  position: relative;
}

.mxd-blog-pagination__items {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1rem;
  font: normal var(--fw-medium) 1.8rem/3.3rem var(--_font-accent);
}

.blog-pagination-control {
  position: absolute;
  top: 0;
}

.blog-pagination-control .btn-caption {
  display: none !important;
}

.blog-pagination-control.prev {
  left: 0;
}

.blog-pagination-control.next {
  right: 0;
}

@media only screen and (min-width: 768px) {
  .blog-pagination-control .btn-caption {
    display: block !important;
  }
}

.blog-pagination-number {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  font: normal var(--fw-regular) 1.8rem/3.3rem var(--_font-accent);
  color: var(--t-bright);
}

.blog-pagination-number.active {
  font-size: 3rem;
  font-weight: var(--fw-semibold);
}

.mxd-sidebar {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.mxd-sidebar__widget {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  padding: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-sidebar__widget {
    padding: 4rem;
  }
}

.widget__title p {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .widget__title p {
    font-size: 3.6rem;
  }
}

.widget__categories {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.3rem;
}

.categories__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.categories__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  width: 100%;
  font: normal var(--fw-regular) 2.2rem/1.6 var(--_font-accent);
  color: var(--t-bright);
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.no-touch .categories__link:hover {
  color: var(--t-medium);
}

.categories__link.is-active {
  color: var(--accent);
}

.categories__count {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--t-medium);
  opacity: 0.75;
}

.categories__link.is-active .categories__count {
  color: var(--accent);
  opacity: 1;
}

/* filtered-view header + empty state (rendered by js/posts.js) */
.mxd-posts-header {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--t-medium) 24%, transparent);
}

.mxd-posts-header__label {
  font: normal var(--fw-regular) 1.9rem/1.4 var(--_font-accent);
  color: var(--t-medium);
}

.mxd-posts-header__clear {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0;
  font: normal var(--fw-regular) 1.7rem/1 var(--_font-accent);
  color: var(--t-bright);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.mxd-posts-header__clear i {
  font-size: 1.6rem;
}

.no-touch .mxd-posts-header__clear:hover {
  color: var(--accent);
}

.mxd-posts-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 4rem 0;
}

.mxd-posts-empty__title {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.mxd-posts-empty__text {
  max-width: 46rem;
  font: normal var(--fw-regular) 1.9rem/1.5 var(--_font-accent);
  color: var(--t-medium);
}

.mxd-posts-empty .btn {
  margin-top: 1rem;
}

.widget__recent-posts {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.recent-post__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}

.recent-post__thumb {
  -ms-flex-preferred-size: 120px;
  flex-basis: 120px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 120px;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  overflow: hidden;
}

.recent-post__thumb a {
  display: block;
}

.recent-post__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-filter var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-filter var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: filter var(--_animspeed-medium), transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: filter var(--_animspeed-medium), transform var(--_animspeed-medium) var(--_animbezier);
  transition: filter var(--_animspeed-medium), transform var(--_animspeed-medium) var(--_animbezier), -webkit-filter var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .recent-post__thumb:hover img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.recent-post__content {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.recent-post__title {
  font: normal var(--fw-semibold) 1.8rem/1.4 var(--_font-accent);
  color: var(--t-bright);
}

.recent-post__title a {
  display: inline;
  color: var(--t-bright);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .recent-post__title a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.recent-post__meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  color: var(--t-bright);
}

.recent-post__meta span {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font: normal var(--fw-regular) 1.6rem/1.6 var(--_font-accent);
}

.recent-post__meta span a {
  color: var(--t-bright);
}

.recent-post__meta span svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.recent-post__meta span.meta-tag {
  font-weight: var(--fw-regular);
}

.no-touch .recent-post__meta span:hover a {
  color: var(--t-medium);
}

.widget__social-links-small {
  position: relative;
}

@media (hover) and (prefers-reduced-motion: no-preference) {
  .widget__social-links-small>.social-links-small__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .widget__social-links-small:hover>.social-links-small__item:not(:hover) {
    opacity: 0.2;
  }
}

.social-links-small__item {
  position: relative;
  display: block;
  margin-top: -1px;
}

.social-links-small__item:first-of-type {
  margin-top: 0;
}

.social-links-small__divider {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--st-bright);
}

.social-links-small__link {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1.5rem 0;
  overflow: hidden;
}

.no-touch .social-links-small__link:hover .social-links-small__title {
  -webkit-transform: translateX(1rem);
  -moz-transform: translateX(1rem);
  -ms-transform: translateX(1rem);
  transform: translateX(1rem);
}

.no-touch .social-links-small__link:hover .social-links-small__icon i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
  -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
  animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
}

.social-links-small__title {
  position: relative;
  font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
}

.social-links-small__icon {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.8rem;
  -webkit-transform: translateX(0) rotate(0deg);
  -moz-transform: translateX(0) rotate(0deg);
  -ms-transform: translateX(0) rotate(0deg);
  transform: translateX(0) rotate(0deg);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.social-links-small__icon i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: color var(--_animspeed-medium) var(--_animbezier);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.widget-ad {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .widget-ad {
    height: 460px;
  }
}

.widget__bgimage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.widget__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
}

/* ------------------------------------------------*/
/* Block - Blog End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Blog Article Start */
/* ------------------------------------------------*/
.mxd-article-area {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-top: 11.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-article-area {
    padding-top: 15.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article-area {
    padding-top: 9.2rem;
  }
}

.mxd-article-container {
  position: relative;
  width: 100%;
}

.mxd-article {
  position: relative;
  width: 100%;
}

.mxd-article__headline {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 7rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-article__headline {
    max-width: 870px;
    margin: 0 auto 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-article__headline {
    max-width: 900px;
  }
}

.mxd-article__meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-article__meta {
    margin-bottom: 1.8rem;
  }
}

.mxd-article__breadcrumbs {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.5rem;
}

.mxd-article__breadcrumbs span {
  font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-muted);
}

.mxd-article__breadcrumbs span::after {
  content: "/";
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 0.2rem;
}

.mxd-article__breadcrumbs span:last-of-type::after {
  display: none;
}

.mxd-article__breadcrumbs span a {
  display: inline;
  color: var(--t-muted);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-muted), var(--t-muted));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-muted), var(--t-muted));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch .mxd-article__breadcrumbs span a:hover {
  color: var(--t-medium);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.mxd-article__breadcrumbs span.current-item {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted)));
  background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted));
  background: linear-gradient(to right, var(--t-muted), var(--t-muted));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

.mxd-article__breadcrumbs span.current-item a {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, var(--t-muted), var(--t-muted)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch .mxd-article__breadcrumbs span.current-item a:hover {
  color: var(--t-medium);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.mxd-article__data {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  row-gap: 0.4rem;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  color: var(--t-bright);
}

.mxd-article__data span {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent);
}

.mxd-article__data span a {
  color: var(--pt-t-light-bright);
}

.mxd-article__data span svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.mxd-article__data span.meta-tag {
  font-weight: var(--fw-semibold);
}

.mxd-article__data span.meta-time {
  font-weight: var(--fw-semibold);
}

.mxd-article__title {
  margin-bottom: 3.3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-article__title {
    margin-bottom: 4.4rem;
  }
}

.mxd-article__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

.mxd-article__thumb {
  position: relative;
  height: 460px;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
  margin-bottom: 5.4rem;
}

.mxd-article__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-article__thumb {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article__thumb {
    height: 760px;
    margin-bottom: 8.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-article__thumb {
    height: 930px;
    margin-bottom: 8rem;
  }
}

.mxd-article__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6rem;
  width: 100%;
  text-align: left;
}

@media only screen and (min-width: 768px) {
  .mxd-article__content {
    gap: 7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article__content {
    max-width: 870px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-article__content {
    max-width: 900px;
  }
}

.mxd-article__block {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

.mxd-article__block.block-table-of-contents {
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  padding: 3rem;
}

.mxd-article__block.block-quote {
  padding: 3rem 0;
  border-top: 1px solid var(--st-muted);
  border-bottom: 1px solid var(--st-muted);
}

.mxd-article__block.block-image {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-article__block.block-table-of-contents {
    padding: 4rem;
  }

  .mxd-article__block.block-image {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article__block.block-image {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.table-of-contents__title {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .table-of-contents__title {
    font-size: 3.6rem;
  }
}

.table-of-contents__nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.3rem;
}

.table-of-contents__nav li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.table-of-contents__nav li a {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

.no-touch .table-of-contents__nav li a:hover {
  color: var(--t-bright);
}

@media only screen and (min-width: 1600px) {
  .table-of-contents__nav li a {
    font-size: 2.2rem;
  }
}

.quote__text {
  font: normal var(--fw-regular) 3rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  margin-bottom: 2rem;
}

@media only screen and (min-width: 768px) {
  .quote__text {
    font-size: 3.6rem;
  }
}

.quote__cite {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

@media only screen and (min-width: 1600px) {
  .quote__cite {
    font-size: 2.2rem;
  }
}

.mxd-article__content ol {
  list-style: decimal inside;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1rem;
}

.mxd-article__content ol:not(:has(ol, ul)) {
  gap: 0;
}

.mxd-article__content ol li {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

.mxd-article__content ol li span {
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
}

.mxd-article__content ol ul {
  gap: 0;
  -webkit-padding-start: 2.4rem;
  -moz-padding-start: 2.4rem;
  padding-inline-start: 2.4rem;
  margin-top: 1rem;
}

.mxd-article__content ul {
  list-style: disc inside;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1rem;
}

.mxd-article__content ul:not(:has(ol, ul)) {
  gap: 0;
}

.mxd-article__content ul li {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

.mxd-article__content ul li span {
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
}

.mxd-article__content ul ol,
.mxd-article__content ul ul {
  gap: 0;
  -webkit-padding-start: 2.4rem;
  -moz-padding-start: 2.4rem;
  padding-inline-start: 2.4rem;
  margin-top: 1rem;
}

@media only screen and (min-width: 1600px) {
  .mxd-article__content ol li {
    font-size: 2.2rem;
  }

  .mxd-article__content ol ul {
    -webkit-padding-start: 2.8rem;
    -moz-padding-start: 2.8rem;
    padding-inline-start: 2.8rem;
  }

  .mxd-article__content ul li {
    font-size: 2.2rem;
  }

  .mxd-article__content ul ol,
  .mxd-article__content ul ul {
    -webkit-padding-start: 2.8rem;
    -moz-padding-start: 2.8rem;
    padding-inline-start: 2.8rem;
  }
}

.block-image__container {
  position: relative;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
}

.block-image__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
}

.mxd-article-author {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  padding: 3rem;
  margin-top: 6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-article-author {
    padding: 4rem;
    margin-top: 7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article-author {
    max-width: 870px;
    margin: 7rem auto 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-article-author {
    max-width: 900px;
  }
}

.mxd-article-author__data {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-article-author__data {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 3rem;
  }
}

.mxd-article-author__avatar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100px;
  flex-basis: 100px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 10rem;
  height: 10rem;
  -moz-border-radius: var(--_radius-pt-m);
  border-radius: var(--_radius-pt-m);
  overflow: hidden;
}

.mxd-article-author__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-article-author__avatar {
    -ms-flex-preferred-size: 120px;
    flex-basis: 120px;
    height: 12rem;
  }
}

.mxd-article-author__info {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-article-author__name a {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.mxd-article-author__position {
  line-height: 1.4;
}

.mxd-article-author__socials {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  margin-top: 2.2rem;
}

.mxd-article-navigation {
  position: relative;
  margin-top: 6rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--st-muted);
}

@media only screen and (min-width: 768px) {
  .mxd-article-navigation {
    margin-top: 7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article-navigation {
    max-width: 870px;
    margin: 7rem auto 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-article-navigation {
    max-width: 900px;
  }
}

.mxd-article-navigation__navitem {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-article-navigation__navitem.left {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-right: 1.5rem;
}

.mxd-article-navigation__navitem.right {
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding-left: 1.5rem;
  text-align: right;
}

.mxd-article-navigation__link {
  display: block;
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  margin-top: 0.5rem;
}

.mxd-article-navigation__link span {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .mxd-article-navigation__link span:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.mxd-article-comments {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6rem;
  width: 100%;
  margin-top: 6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-article-comments {
    gap: 7rem;
    margin-top: 7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article-comments {
    max-width: 870px;
    margin: 7rem auto 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-article-comments {
    max-width: 900px;
  }
}

.mxd-article-comments__container,
.mxd-article-comments__respond {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.mxd-article-comments__list {
  position: relative;
  width: 100%;
}

.mxd-article-comments__list ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-comment {
  margin-top: -1px;
  border-top: 1px solid var(--st-muted);
}

.mxd-comment:last-of-type {
  border-bottom: 1px solid var(--st-muted);
}

.mxd-comment__children {
  padding-left: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-comment__children {
    padding-left: 13rem;
  }
}

.mxd-comment__container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-comment__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 3rem;
  }
}

.mxd-comment__avatar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100px;
  flex-basis: 100px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 10rem;
  height: 10rem;
  -moz-border-radius: var(--_radius-pt-m);
  border-radius: var(--_radius-pt-m);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.mxd-comment__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-comment__avatar {
    margin-bottom: 0;
  }
}

.mxd-comment__content {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-comment__content {
    gap: 1.3rem;
  }
}

.mxd-comment__info {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.2rem;
}

.mxd-comment__reply {
  margin-top: 0.9rem;
}

/* ------------------------------------------------*/
/* Block - Blog Article End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - 404 Error Start */
/* ------------------------------------------------*/
.mxd-error {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  padding: 2rem 0 3rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-error {
    padding: 3rem 0 4rem 0;
  }
}

.mxd-error__descr,
.mxd-error__controls {
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 1200px) {
  .marquee-error {
    margin-top: -4rem;
  }
}

/* ------------------------------------------------*/
/* Block - 404 Error End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo List Start */
/* ------------------------------------------------*/
.mxd-demo-list {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  padding-top: 12.9rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-list {
    gap: 6rem;
    padding-top: 14.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-list {
    padding-top: 18.2rem;
  }
}

.mxd-demo-list__row {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-list__row {
    gap: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-list__row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.mxd-demo-list__item {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  border: 1px solid var(--st-muted);
  -webkit-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0);
  -moz-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0);
  box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0);
  -webkit-transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier);
  transition: box-shadow var(--_animspeed-medium) var(--_animbezier);
  transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .mxd-demo-list__item:hover {
  -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
}

.no-touch .mxd-demo-list__item:hover .mxd-demo-list__screen {
  -webkit-transform: scale(1.014);
  -moz-transform: scale(1.014);
  -ms-transform: scale(1.014);
  transform: scale(1.014);
}

.mxd-demo-list__item.empty-item {
  padding: 5.6rem 3.1rem;
  border: 1px solid var(--base-tint);
}

.no-touch .mxd-demo-list__item.empty-item:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.mxd-demo-list__item.item-accent {
  background-color: var(--accent);
  border: 1px solid var(--accent);
}

@media only screen and (min-width: 768px) {
  .mxd-demo-list__item.empty-item {
    padding: 5.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-list__item.empty-item {
    padding: 3rem;
  }
}

.empty-item__wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .empty-item__wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
}

.empty-item__logo {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.empty-item__logo svg {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 8rem;
  height: 8rem;
}

.empty-item__caption {
  font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-medium);
  padding-top: 1.1rem;
}

@media only screen and (min-width: 768px) {
  .empty-item__caption {
    font-size: 2.2rem;
    padding-top: 2.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .empty-item__caption {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .empty-item__caption {
    font-size: 2.2rem;
  }
}

.mxd-demo-list__image {
  position: relative;
  display: block;
  overflow: hidden;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
}

.mxd-demo-list__image.image-placeholder {
  display: none;
}

.mxd-demo-list__image img {
  opacity: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-list__image {
    -moz-border-radius: 2rem;
    border-radius: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-list__image.image-placeholder {
    display: block;
  }
}

.mxd-demo-list__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.mxd-demo-list__screen.screen-01 {
  background-image: var(--bg-demo-screen-01);
}

.mxd-demo-list__screen.screen-02 {
  background-image: var(--bg-demo-screen-02);
}

.mxd-demo-list__screen.screen-03 {
  background-image: var(--bg-demo-screen-03);
}

.mxd-demo-list__screen.screen-04 {
  background-image: var(--bg-demo-screen-04);
}

.mxd-demo-list__screen.screen-05 {
  background-image: var(--bg-demo-screen-05);
}

.mxd-demo-list__screen.screen-06 {
  background-image: var(--bg-demo-screen-06);
}

.mxd-demo-list__screen.screen-07 {
  background-image: var(--bg-demo-screen-07);
}

.mxd-demo-list__screen.screen-08 {
  background-image: var(--bg-demo-screen-08);
}

.mxd-demo-list__screen.screen-09 {
  background-image: var(--bg-demo-screen-09);
}

.mxd-demo-list__caption {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-list__caption {
    padding: 1rem 1.6rem;
  }
}

.mxd-demo-list__link {
  font: normal var(--fw-medium) 1.8rem/1.4 var(--_font-accent);
  color: var(--t-bright);
}

.mxd-demo-list__link.opposite {
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-demo-list__link {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-list__link.small {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-list__link {
    font-size: 3rem;
  }

  .mxd-demo-list__link.small {
    font-size: 2.2rem;
  }
}

.mxd-demo-list__num {
  font: normal var(--fw-medium) 1.8rem/1.4 var(--_font-accent);
  color: var(--accent);
}

.mxd-demo-list__num.opposite {
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-demo-list__num {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-list__num.small {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-list__num {
    font-size: 3rem;
  }

  .mxd-demo-list__num.small {
    font-size: 2.2rem;
  }
}

/* ------------------------------------------------*/
/* Block - Demo List End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo Cards Start */
/* ------------------------------------------------*/
.mxd-demo-cards {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-cards {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 6rem;
  }
}

.mxd-demo-cards__item {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 5rem;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
  margin-top: 3rem;
}

.mxd-demo-cards__item.card-item-left {
  padding-top: 4rem;
}

.mxd-demo-cards__item.card-item-right {
  padding-bottom: 4rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-cards__item {
    gap: 5rem;
  }

  .mxd-demo-cards__item.card-item-left {
    padding-top: 6rem;
  }

  .mxd-demo-cards__item.card-item-right {
    padding-bottom: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-cards__item {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 6rem;
    width: -moz-calc(50% - 3rem);
    width: calc(50% - 3rem);
    height: 760px;
  }

  .mxd-demo-cards__item.card-item-left,
  .mxd-demo-cards__item.card-item-right {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-cards__item {
    height: 930px;
  }

  .mxd-demo-cards__item.card-item-left {
    padding-top: 8rem;
  }

  .mxd-demo-cards__item.card-item-right {
    padding-bottom: 8rem;
  }
}

.mxd-demo-card__gradient {
  position: absolute;
  top: -50%;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  z-index: 0;
}

.mxd-demo-card__gradient svg {
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-card__gradient {
    width: 800px;
    height: 800px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-card__gradient {
    width: 1000px;
    height: 1000px;
  }
}

.mxd-demo-cards__image {
  position: relative;
  margin: 0 auto;
}

.mxd-demo-cards__image.card-image-padding {
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-cards__image.card-image-padding {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-cards__image.card-image-fullwidth {
    max-height: none;
  }

  .mxd-demo-cards__image.card-image-padding {
    max-width: 610px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-cards__image.card-image-padding {
    padding: 0 8rem;
    max-width: none;
  }
}

.mxd-demo-cards__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5rem;
  text-align: center;
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-cards__content {
    gap: 5rem;
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-cards__content {
    gap: 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-cards__content {
    gap: 6.8rem;
    padding: 0 8rem;
  }
}

.mxd-demo-cards__descr p {
  max-width: 420px;
  margin: 0 auto;
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-cards__descr p {
    max-width: 600px;
  }
}

.mxd-demo-cards__title {
  margin-bottom: 3rem;
}

.mxd-demo-cards__title a {
  color: var(--t-bright);
}

.no-touch .mxd-demo-cards__title a:hover {
  color: var(--accent);
}

.mxd-demo-cards__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 2.8rem;
}

.mxd-demo-cards__icons {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  row-gap: 3rem;
  -webkit-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mxd-demo-cards__icons.justify-start-desktop {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-cards__icons {
    gap: 3rem;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-cards__icons.justify-start-desktop {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

.demo-icons__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
  -ms-flex-preferred-size: 7rem;
  flex-basis: 7rem;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .demo-icons__item {
    -ms-flex-preferred-size: 8.4rem;
    flex-basis: 8.4rem;
    max-width: 8.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .demo-icons__item {
    -ms-flex-preferred-size: 6.4rem;
    flex-basis: 6.4rem;
    max-width: 6.4rem;
  }
}

@media only screen and (min-width: 1400px) {
  .demo-icons__item {
    -ms-flex-preferred-size: 7.8rem;
    flex-basis: 7.8rem;
    max-width: 7.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .demo-icons__item {
    -ms-flex-preferred-size: 8.4rem;
    flex-basis: 8.4rem;
    max-width: 8.4rem;
  }
}

.demo-icons__icon {
  position: relative;
  width: 7rem;
  height: 7rem;
}

.demo-icons__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.demo-icons__icon svg path {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-icons__icon i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  color: var(--t-opp-bright);
}

.demo-icons__icon.transparent svg path {
  fill: none;
  stroke: var(--st-medium);
}

.demo-icons__icon.transparent i {
  color: var(--t-muted);
}

@media only screen and (min-width: 768px) {
  .demo-icons__icon {
    width: 100%;
    height: auto;
  }

  .demo-icons__icon i {
    font-size: 3.7rem;
  }
}

.demo-icons__caption {
  font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 1600px) {
  .demo-icons__caption {
    font-size: 1.6rem;
    white-space: nowrap;
  }
}

/* ------------------------------------------------*/
/* Block - Demo Cards End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo Responsive Promo Start */
/* ------------------------------------------------*/
.mxd-resp-promo,
.mxd-resp-promo__item {
  position: relative;
}

.mxd-resp-promo {
  padding-top: 12.3rem;
  padding-bottom: 9.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-resp-promo {
    padding-top: 14rem;
    padding-bottom: 8.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-resp-promo {
    padding-top: 20rem;
    padding-bottom: 11.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-resp-promo__item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.mxd-resp-promo__content {
  margin-bottom: 5.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-resp-promo__content {
    max-width: 800px;
    margin: 0 auto 5.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-resp-promo__content {
    max-width: 700px;
    margin: 0;
    padding-bottom: 1.7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-resp-promo__content {
    padding-bottom: 5rem;
  }
}

.mxd-resp-promo__manifest {
  margin-bottom: 4.6rem;
  text-align: center;
}

.mxd-resp-promo__manifest p {
  font: normal var(--fw-regular) 2.8rem/1.6 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-resp-promo__manifest p {
    font-size: 3.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-resp-promo__manifest {
    margin-bottom: 5.6rem;
    text-align: left;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-resp-promo__manifest {
    margin-bottom: 6.2rem;
  }

  .mxd-resp-promo__manifest p {
    font-size: 4rem;
  }
}

.mxd-resp-promo__image {
  padding-left: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-resp-promo__image {
    padding-left: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-resp-promo__image {
    padding-left: 0;
  }
}

/* ------------------------------------------------*/
/* Block - Demo Responsive Promo End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo Inner Pages Slider Start */
/* ------------------------------------------------*/
.mxd-demo-swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  overflow: clip;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: auto;
  padding: 0;
}

.no-touch .mxd-demo-swiper .swiper-slide-active:hover .demo-swiper-slide__image {
  -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
}

.mxd-demo-swiper .swiper-slide-next,
.mxd-demo-swiper .swiper-slide-prev {
  -webkit-transform: scale(0.96);
  -moz-transform: scale(0.96);
  -ms-transform: scale(0.96);
  transform: scale(0.96);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.mxd-demo-swiper__slide {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.demo-swiper-slide__image {
  padding: 1rem;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  border: 1px solid var(--st-muted);
  -webkit-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0);
  -moz-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0);
  box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0);
  -webkit-transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier);
  transition: box-shadow var(--_animspeed-medium) var(--_animbezier);
  transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier);
}

.demo-swiper-slide__image img {
  -moz-border-radius: 1rem;
  border-radius: 1rem;
}

@media only screen and (min-width: 768px) {
  .demo-swiper-slide__image img {
    -moz-border-radius: 2rem;
    border-radius: 2rem;
  }
}

.demo-swiper-slide__descr {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin-top: 3rem;
}

.demo-swiper-slide__descr a {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font: normal var(--fw-medium) 2.2rem/4rem var(--_font-accent);
  color: var(--t-bright);
}

.demo-swiper-slide__descr a span {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .demo-swiper-slide__descr a span:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

@media only screen and (min-width: 768px) {
  .demo-swiper-slide__descr a {
    font-size: 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .demo-swiper-slide__descr a {
    font-size: 3.6rem;
  }
}

/* ------------------------------------------------*/
/* Block - Demo Inner Pages Slider End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo Components Start */
/* ------------------------------------------------*/
.mxd-demo-components {
  position: relative;
  padding-top: 6.5rem;
  padding-bottom: 8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-components {
    padding-top: 5.6rem;
    padding-bottom: 7.7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-components {
    padding-top: 6.8rem;
    padding-bottom: 9.1rem;
  }
}

.mxd-demo-components__title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.mxd-demo-components__title span {
  font: normal var(--fw-medium) 5rem/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-demo-components__title span {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-components__title span {
    font-size: 10rem;
  }
}

.mxd-demo-components__objects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.mxd-demo-components__object {
  position: absolute;
  height: auto;
}

.mxd-demo-components__object.obj-01 {
  top: -110px;
  right: 60px;
  width: 140px;
}

.mxd-demo-components__object.obj-02 {
  bottom: 0;
  right: 0;
  width: 80px;
}

.mxd-demo-components__object.obj-03 {
  bottom: -140px;
  left: 0;
  width: 200px;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-components__object.obj-01 {
    top: -120px;
    right: 60px;
    width: 150px;
  }

  .mxd-demo-components__object.obj-02 {
    bottom: 0;
    right: 0;
    width: 80px;
  }

  .mxd-demo-components__object.obj-03 {
    bottom: -140px;
    left: 0;
    width: 220px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-components__object.obj-01 {
    top: -180px;
    right: 80px;
    width: 270px;
  }

  .mxd-demo-components__object.obj-02 {
    bottom: 1rem;
    right: 0;
    width: 120px;
  }

  .mxd-demo-components__object.obj-03 {
    bottom: -200px;
    left: 10px;
    width: 340px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-components__object.obj-01 {
    top: -220px;
    right: 100px;
    width: 360px;
  }

  .mxd-demo-components__object.obj-02 {
    bottom: 3rem;
    right: 0;
    width: 160px;
  }

  .mxd-demo-components__object.obj-03 {
    bottom: -270px;
    left: 10px;
    width: 460px;
  }
}

/* ------------------------------------------------*/
/* Block - Demo Components End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo Features Start */
/* ------------------------------------------------*/
.mxd-features-promo,
.mxd-features-promo__item {
  position: relative;
}

.mxd-features-promo {
  padding-top: 9rem;
  padding-bottom: 10.8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-features-promo {
    padding-top: 10.9rem;
    padding-bottom: 12.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-features-promo {
    padding-top: 12.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-features-promo {
    padding-top: 17rem;
    padding-bottom: 16.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-features-promo__item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.mxd-features-promo__content {
  margin-bottom: 5rem;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .mxd-features-promo__content {
    max-width: 600px;
    margin: 0 auto 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-features-promo__content {
    max-width: 700px;
    margin: 0;
    padding-bottom: 1.7rem;
    text-align: left;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-features-promo__content {
    padding-bottom: 3.2rem;
  }
}

.mxd-features-promo__image {
  padding-left: 0;
}

.mxd-features-cards {
  position: relative;
}

.mxd-features-cards__teaser {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 0.2rem;
  color: var(--t-muted);
}

.mxd-features-cards__teaser .mxd-point-subtitle {
  color: var(--t-medium);
}

.mxd-features-cards__teaser .mxd-point-subtitle span {
  font-weight: var(--fw-medium);
  color: var(--t-medium);
}

@media only screen and (min-width: 1600px) {
  .mxd-features-cards__teaser {
    padding-top: 1.2rem;
  }

  .mxd-features-cards__teaser .mxd-point-subtitle {
    font-size: 2.5rem;
  }
}

.mxd-features-cards__item {
  position: relative;
  height: 500px;
}

.mxd-features-cards__item .mxd-features-cards__title,
.mxd-features-cards__item .mxd-features-cards__info {
  width: 90%;
}

@media only screen and (min-width: 768px) {
  .mxd-features-cards__item {
    height: 460px;
  }

  .mxd-features-cards__item .mxd-features-cards__title,
  .mxd-features-cards__item .mxd-features-cards__info {
    width: 60%;
    max-width: 500px;
  }
}

@media only screen and (min-width: 992px) {

  .mxd-features-cards__item .mxd-features-cards__title,
  .mxd-features-cards__item .mxd-features-cards__info {
    width: 40%;
  }
}

@media only screen and (min-width: 1200px) {

  .mxd-features-cards__item .mxd-features-cards__title,
  .mxd-features-cards__item .mxd-features-cards__info {
    width: 100%;
    max-width: none;
  }

  .mxd-features-cards__item.features-item-01 .mxd-features-cards__title,
  .mxd-features-cards__item.features-item-01 .mxd-features-cards__info {
    width: 40%;
  }

  .mxd-features-cards__item.features-item-01 .mxd-features-cards__info {
    max-width: 400px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-features-cards__item {
    height: 600px;
  }
}

.mxd-features-cards__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mxd-features-cards__inner.justify-end {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media only screen and (min-width: 768px) {
  .mxd-features-cards__inner.justify-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .mxd-features-cards__inner.justify-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.mxd-features-cards__title,
.mxd-features-cards__info {
  position: relative;
  z-index: 1;
}

.mxd-features-cards__title {
  margin-bottom: 2.8rem;
}

.mxd-features-cards__title h3 {
  font-size: 3.6rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-features-cards__title {
    z-index: 1;
  }

  .mxd-features-cards__title h3 {
    font-size: 3.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-features-cards__title h3 {
    font-size: 5rem;
  }
}

.mxd-features-cards__info p {
  font-size: 1.6rem;
}

@media only screen and (min-width: 1600px) {
  .mxd-features-cards__info p {
    font-size: 2.2rem;
  }
}

.mxd-features-cards__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.6rem;
}

.mxd-features-cards__image {
  position: absolute;
  height: auto;
}

.mxd-features-cards__image.features-image-01 {
  bottom: 0;
  right: 0;
  width: 68%;
}

.mxd-features-cards__image.features-image-02 {
  top: 0;
  right: 0;
  width: 68%;
}

.mxd-features-cards__image.features-image-03 {
  bottom: 0;
  right: 3rem;
  width: 78%;
}

.mxd-features-cards__image.features-image-04 {
  bottom: 0;
  right: 3rem;
  width: 78%;
}

.mxd-features-cards__image.features-image-05 {
  top: 4rem;
  right: 1.5rem;
  width: 68%;
}

@media only screen and (min-width: 768px) {
  .mxd-features-cards__image.features-image-01 {
    width: 50%;
  }

  .mxd-features-cards__image.features-image-02 {
    width: 50%;
  }

  .mxd-features-cards__image.features-image-03 {
    right: 4rem;
    width: 50%;
  }

  .mxd-features-cards__image.features-image-04 {
    right: 4rem;
    width: 50%;
  }

  .mxd-features-cards__image.features-image-05 {
    width: 50%;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-features-cards__image.features-image-01 {
    width: 58%;
  }

  .mxd-features-cards__image.features-image-02 {
    width: 70%;
  }

  .mxd-features-cards__image.features-image-03 {
    right: auto;
    left: 4rem;
    width: -moz-calc(100% - 8rem);
    width: calc(100% - 8rem);
  }

  .mxd-features-cards__image.features-image-04 {
    right: auto;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 78%;
  }

  .mxd-features-cards__image.features-image-05 {
    width: 68%;
  }
}

.mxd-features-cards__gradient {
  position: absolute;
  width: 600px;
  height: 600px;
  z-index: 0;
}

.mxd-features-cards__gradient svg {
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 768px) {
  .mxd-features-cards__gradient {
    width: 800px;
    height: 800px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-features-cards__gradient {
    width: 1000px;
    height: 1000px;
  }

  .mxd-features-cards__gradient.features-gradient-01 {
    bottom: -300px;
    right: -200px;
    width: 900px;
    height: 900px;
  }

  .mxd-features-cards__gradient.features-gradient-02 {
    top: -340px;
    right: -200px;
    width: 700px;
    height: 700px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-features-cards__gradient {
    width: 1000px;
    height: 1000px;
  }

  .mxd-features-cards__gradient.features-gradient-01 {
    bottom: -300px;
    right: -200px;
    width: 1000px;
    height: 1000px;
  }

  .mxd-features-cards__gradient.features-gradient-02 {
    top: -400px;
    right: -260px;
    width: 900px;
    height: 900px;
  }
}

/* ------------------------------------------------*/
/* Block - Demo Features End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo CTA Start */
/* ------------------------------------------------*/
.mxd-demo-cta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 11.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-cta {
    padding-top: 13.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-cta {
    padding-top: 16.5rem;
  }
}

.mxd-demo-cta__caption {
  position: relative;
  text-align: center;
}

.mxd-demo-cta__caption h2 {
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-cta__caption h2 {
    max-width: 600px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-cta__caption h2 {
    max-width: 860px;
  }
}

.mxd-demo-cta__btn {
  margin-top: 5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-cta__btn {
    margin-top: 5.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-cta__btn {
    margin-top: 6.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-cta__btn {
    margin-top: 6.7rem;
  }
}

/* ------------------------------------------------*/
/* Block - Demo CTA End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Block - Demo Footer Start */
/* ------------------------------------------------*/
.mxd-demo-footer {
  position: relative;
}

.mxd-demo-footer__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

.mxd-demo-footer__item {
  margin: 0 0 4.4rem 0;
}

.mxd-demo-footer__item:last-of-type {
  margin: 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-footer__item {
    margin: 0;
  }
}

.mxd-demo-footer__logo {
  margin-bottom: 2.3rem;
}

.mxd-demo-footer__slogan {
  margin-bottom: 3.4rem;
  max-width: 300px;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-footer__slogan {
    max-width: 460px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-footer__slogan {
    max-width: 340px;
  }
}

.mxd-demo-footer__btn {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.mxd-demo-footer__btn.centered {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and (min-width: 576px) {
  .mxd-demo-footer__btn {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.6rem;
  }
}

.mxd-footer-nav__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 0 4.4rem 0;
}

.mxd-footer-nav__item:last-of-type {
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-footer-nav__item {
    margin: 0;
  }
}

.mxd-footer-nav__block {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin: 0 0 4.4rem 0;
}

.mxd-footer-nav__block:last-of-type {
  margin: 0;
}

.mxd-footer-nav__list ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.8rem;
}

.mxd-footer-nav__list ul li {
  display: block;
  font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
}

.mxd-footer-nav__list ul li a {
  display: inline-block;
  color: var(--t-medium);
}

.no-touch .mxd-footer-nav__list ul li a:hover {
  color: var(--accent);
  -webkit-transform: translateX(0.4rem);
  -moz-transform: translateX(0.4rem);
  -ms-transform: translateX(0.4rem);
  transform: translateX(0.4rem);
}

@media only screen and (min-width: 1600px) {
  .mxd-footer-nav__list ul li {
    font-size: 1.8rem;
  }
}

.mxd-demo-footer__promo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.4rem;
}

.mxd-footer-promo__list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.6rem;
}

.mxd-footer-promo__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.6rem;
  -webkit-transition: -webkit-transform var(--_animspeed-medium);
  transition: -webkit-transform var(--_animspeed-medium);
  -moz-transition: transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
}

.no-touch .mxd-footer-promo__item:hover {
  -webkit-transform: translateX(0.4rem);
  -moz-transform: translateX(0.4rem);
  -ms-transform: translateX(0.4rem);
  transform: translateX(0.4rem);
}

.no-touch .mxd-footer-promo__item:hover .mxd-footer-promo__link {
  color: var(--accent);
}

@media only screen and (min-width: 768px) {
  .mxd-footer-promo__item {
    max-width: 360px;
  }
}

.mxd-footer-promo__icon {
  width: 4.6rem;
  height: 4.6rem;
}

.mxd-footer-promo__icon img {
  width: 4.6rem;
  height: 4.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-footer-promo__icon {
    width: 5.6rem;
    height: 5.6rem;
  }

  .mxd-footer-promo__icon img {
    width: 5.6rem;
    height: 5.6rem;
  }
}

.mxd-footer-promo__link {
  font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
  color: var(--t-medium);
  -webkit-transition: color var(--_animspeed-medium);
  -moz-transition: color var(--_animspeed-medium);
  transition: color var(--_animspeed-medium);
}

@media only screen and (min-width: 1600px) {
  .mxd-footer-promo__link {
    font-size: 1.8rem;
  }
}

.mxd-demo-footer__mixdesign {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  bottom: 0;
  padding-top: 11.4rem;
  color: var(--t-bright);
  overflow: hidden;
}

.mxd-demo-footer__mixdesign a,
.mxd-demo-footer__mixdesign svg {
  display: block;
}

.mxd-demo-footer__mixdesign a {
  width: 100%;
  color: var(--t-bright);
}

.mxd-demo-footer__mixdesign svg {
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-demo-footer__mixdesign {
    padding-top: 10.6rem;
  }
}

@media only screen and (min-width: 992px) {
  .mxd-demo-footer__mixdesign {
    padding-top: 8.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-footer__mixdesign {
    padding-top: 7rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-demo-footer__mixdesign {
    padding-top: 5.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-demo-footer__mixdesign {
    padding-top: 5rem;
  }
}

/* ------------------------------------------------*/
/* Block - Demo Footer End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Hover Reveal Start */
/* ------------------------------------------------*/
.hover-reveal__item {
  position: relative;
}

.hover-reveal__content {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 300px;
  height: 300px;
  pointer-events: none;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
  opacity: 0;
  -webkit-transform: translate(-80%, -50%);
  -moz-transform: translate(-80%, -50%);
  -ms-transform: translate(-80%, -50%);
  transform: translate(-80%, -50%);
  -webkit-transition: opacity var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  transition: opacity var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  -moz-transition: transform var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
  z-index: 1;
}

.hover-reveal__content.overflow-visible {
  overflow: visible;
}

.hover-reveal__content.hover-reveal-360x440 {
  width: 360px;
  height: 440px;
}

.hover-reveal__content.hover-reveal-280x340 {
  width: 280px;
  height: 340px;
}

.hover-reveal__content.hover-reveal-260x260 {
  width: 220px;
  height: 220px;
}

@media only screen and (min-width: 1200px) {
  .hover-reveal__content {
    display: block;
  }
}

@media only screen and (min-width: 1600px) {
  .hover-reveal__content.hover-reveal-260x260 {
    width: 260px;
    height: 260px;
  }
}

.hover-reveal__image {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transform: scale(1, 1.4);
  -moz-transform: scale(1, 1.4);
  -ms-transform: scale(1, 1.4);
  transform: scale(1, 1.4);
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transition: -webkit-transform 0.5s var(--_animbezier);
  transition: -webkit-transform 0.5s var(--_animbezier);
  -moz-transition: transform 0.5s var(--_animbezier), -moz-transform 0.5s var(--_animbezier);
  transition: transform 0.5s var(--_animbezier);
  transition: transform 0.5s var(--_animbezier), -webkit-transform 0.5s var(--_animbezier), -moz-transform 0.5s var(--_animbezier);
}

/* ------------------------------------------------*/
/* Features - Hover Reveal End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - About Start */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - About End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Pinned Image Start */
/* ------------------------------------------------*/
.page-padding {
  width: 100%;
  padding: 0;
}

@media only screen and (min-width: 1200px) {
  .page-padding {
    padding: 6rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .page-padding {
    padding: 9rem 0;
  }
}

.mxd-pinned {
  display: block;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3rem;
  }
}

.mxd-pinned__visual {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__visual {
    position: sticky;
    top: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
  }
}

.mxd-pinned__img-wrap {
  width: 30em;
  height: 40em;
  max-height: 100%;
  max-width: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__img-wrap {
    width: 100%;
    height: 100%;
  }
}

.mxd-pinned__img-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.mxd-pinned__img-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
  -webkit-transition: opacity var(--_animspeed-medium);
  -moz-transition: opacity var(--_animspeed-medium);
  transition: opacity var(--_animspeed-medium);
}

.mxd-pinned__img-item.is-active {
  opacity: 1;
}

.mxd-pinned__img {
  width: auto;
  height: 30rem;
  -o-object-fit: cover;
  object-fit: cover;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned__img {
    height: 40rem;
  }
}

.mxd-pinned__content {
  padding: 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__content {
    padding: 6rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned__content {
    padding: 9rem 0;
  }
}

.mxd-pinned__text-wrap {
  padding: 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__text-wrap {
    padding: 0 9rem 0 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned__text-wrap {
    padding: 0 9rem 0 6rem;
  }
}

.mxd-pinned__text-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 7rem;
}

@media only screen and (min-width: 768px) {
  .mxd-pinned__text-list {
    gap: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__text-list {
    gap: 0;
  }
}

.mxd-pinned__text-item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__text-item {
    height: -moz-calc(100vh - 12rem);
    height: calc(100vh - 12rem);
    max-width: 640px;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0.2;
    -webkit-transition: opacity var(--_animspeed-medium);
    -moz-transition: opacity var(--_animspeed-medium);
    transition: opacity var(--_animspeed-medium);
  }

  .mxd-pinned__text-item.is-active {
    opacity: 1;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned__text-item {
    height: -moz-calc(100vh - 18rem);
    height: calc(100vh - 18rem);
  }
}

.mxd-pinned__img-mobile {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 460px;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  margin-bottom: 2.4rem;
}

.mxd-pinned__img-mobile img {
  display: block;
  width: auto;
  height: 24rem;
  -o-object-fit: cover;
  object-fit: cover;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

@media only screen and (min-width: 768px) {
  .mxd-pinned__img-mobile {
    height: 600px;
  }

  .mxd-pinned__img-mobile img {
    height: 30rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__img-mobile {
    display: none;
  }
}

.mxd-pinned__title {
  margin-bottom: 3.4rem;
}

.mxd-pinned__title.centered-mobile {
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__title.centered-mobile {
    text-align: left;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned__title {
    margin-bottom: 4rem;
  }
}

.mxd-pinned__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.2rem;
}

.mxd-pinned__tags.centered-mobile {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__tags.centered-mobile {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned__tags {
    gap: 1.4rem;
    margin-bottom: 3.8rem;
  }
}

/* ------------------------------------------------*/
/* Features - Pinned Image End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Pinned Universal Start */
/* ------------------------------------------------*/
.mxd-pinned-universal {
  position: relative;
}

.mxd-pinned-universal__static-inner {
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned-universal__static-inner {
    position: sticky;
    top: 0;
    padding-top: 6rem;
    text-align: left;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned-universal__static-inner {
    padding-top: 9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned-universal__scroll {
    padding-top: 6rem;
    grid-column-gap: 1.2rem;
    grid-row-gap: 1.2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned-universal__scroll {
    padding-top: 9rem;
  }
}

.mxd-pinned-universal__scroll-inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-pinned-universal__scroll-inner {
    gap: 7.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned-universal__scroll-inner {
    gap: 9.3rem;
  }
}

/* ------------------------------------------------*/
/* Features - Pinned Universal End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Pinned Projects Start */
/* ------------------------------------------------*/
.mxd-pinned-projects {
  position: relative;
}

.mxd-pinned-projects__static-inner {
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned-projects__static-inner {
    position: sticky;
    top: 0;
    padding-top: 6rem;
    text-align: left;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned-projects__static-inner {
    padding-top: 9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned-projects__scroll {
    padding-top: 6rem;
    grid-column-gap: 1.2rem;
    grid-row-gap: 1.2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned-projects__scroll {
    padding-top: 9rem;
  }
}

.mxd-pinned-projects__scroll-inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-pinned-projects__scroll-inner {
    gap: 7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned-projects__scroll-inner {
    gap: 9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pinned-projects__scroll-inner {
    gap: 11rem;
  }
}

/* ------------------------------------------------*/
/* Features - Pinned Projects End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Auto-Scrolling Works Wall Start */
/* ------------------------------------------------*/
.works-wall-section {
  overflow: hidden;
  padding: 3.5rem 0;
  position: relative;
}

.works-wall-outer {
  position: relative;
  width: 100%;
  height: 760px;
  overflow: hidden;
}

/* Fade top and bottom edges */
.works-wall-outer::before,
.works-wall-outer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 3;
  pointer-events: none;
}

.works-wall-outer::before {
  top: 0;
  background: linear-gradient(to bottom, var(--base) 0%, transparent 100%);
}

.works-wall-outer::after {
  bottom: 0;
  background: linear-gradient(to top, var(--base) 0%, transparent 100%);
}

.works-wall-grid {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* Low scale keeps the wall zoomed-out so ~10 narrow columns are visible.
     Corners are filled by columns that overflow the container top & bottom
     (see .works-wall-col height) rather than by zooming in. */
  transform: rotate(-16deg) scale(1.08);
  transform-origin: center center;
}

.works-wall-col {
  flex-shrink: 0;
  width: 165px;
  /* taller than the container so the rotated wall covers the corners;
     three card-sets per track means this can be up to two sets tall and
     still loop seamlessly */
  height: 150%;
  overflow: hidden;
  position: relative;
}

.works-wall-col--extra,
.works-wall-col--xl,
.works-wall-col--xxl {
  display: none;
}

.works-wall-track {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  animation: wallScrollUp 30s linear infinite;
}

.works-wall-track--down {
  animation: wallScrollDown 30s linear infinite;
}

.works-wall-card {
  flex-shrink: 0;
  width: 100%;
  height: 165px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.works-wall-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.works-wall-card:hover img {
  transform: scale(1.05);
}

/* Subtle overlay on each card */
.works-wall-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  transition: background 0.3s ease;
  pointer-events: none;
  border-radius: 12px;
}

.works-wall-card:hover::after {
  background: rgba(0, 0, 0, 0);
}

/* Keyframes - vertical scrolling */
/* tracks hold three copies of each set, so one period is a third of the
   track — this lets columns be up to two sets tall without a visible seam */
@keyframes wallScrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-33.3333%);
  }
}

@keyframes wallScrollDown {
  0% {
    transform: translateY(-33.3333%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Responsive */
@media only screen and (max-width: 575px) {
  .works-wall-section {
    padding: 3rem 0;
  }

  .works-wall-outer {
    height: 420px;
  }

  .works-wall-grid {
    gap: 0.6rem;
    transform: rotate(-16deg) scale(1.12);
  }

  .works-wall-col {
    width: 110px;
  }

  .works-wall-card {
    height: 110px;
    border-radius: 8px;
  }

  .works-wall-track {
    gap: 0.6rem;
  }

  .works-wall-outer::before,
  .works-wall-outer::after {
    height: 80px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .works-wall-outer {
    height: 520px;
  }

  .works-wall-col {
    width: 135px;
  }

  .works-wall-card {
    height: 135px;
  }

  .works-wall-grid {
    transform: rotate(-16deg) scale(1.1);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .works-wall-outer {
    height: 640px;
  }

  .works-wall-col {
    width: 150px;
  }

  .works-wall-card {
    height: 150px;
  }
}

/* Reveal the extra columns progressively so a dense ~10-panel wall fills
   the viewport edge-to-edge well before ultra-wide screens (columns beyond
   the viewport are clipped by overflow:hidden). */
@media only screen and (min-width: 900px) {
  .works-wall-col--extra {
    display: block;
  }
}

@media only screen and (min-width: 1100px) {
  .works-wall-col--xl {
    display: block;
  }
}

@media only screen and (min-width: 1500px) {
  .works-wall-col--xxl {
    display: block;
  }
}

@media only screen and (min-width: 1600px) {
  .works-wall-section {
    padding: 4rem 0;
  }

  .works-wall-outer {
    height: 900px;
  }

  .works-wall-grid {
    gap: 1rem;
    transform: rotate(-16deg) scale(1.1);
  }

  .works-wall-col {
    width: 168px;
  }

  .works-wall-card {
    height: 175px;
    border-radius: 16px;
  }

  .works-wall-track {
    gap: 1rem;
  }

  .works-wall-outer::before,
  .works-wall-outer::after {
    height: 150px;
  }
}

/* ultra-wide: taller container keeps card density while still covering
   the corners of the rotated wall (placed after the 1600px block so it
   wins for matching widths). */
@media only screen and (min-width: 2200px) {
  .works-wall-outer {
    height: 980px;
  }

  .works-wall-grid {
    transform: rotate(-16deg) scale(1.18);
  }

  /* only 10 columns exist, so widen them to span ultra-wide viewports
     while still showing ~10 panels; taller columns keep corners covered */
  .works-wall-col {
    width: 260px;
    height: 165%;
  }

  .works-wall-card {
    height: 240px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .works-wall-track,
  .works-wall-track--down {
    animation: none;
  }
}
/* ------------------------------------------------*/
/* Auto-Scrolling Works Wall End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Features - Projects List Start */
/* ------------------------------------------------*/
.mxd-projects-list {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-projects-list>.mxd-projects-list__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-projects-list:hover>.mxd-projects-list__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-projects-list__item {
  position: relative;
  display: block;
  margin-top: -2px;
}

.mxd-projects-list__item:first-of-type {
  margin-top: 0;
}

@media only screen and (min-width: 1200px) {
  .no-touch .mxd-projects-list__item:hover .mxd-projects-list__title p {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon i::before {
    -webkit-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight;
    -moz-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight;
    animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight;
  }

  .no-touch .mxd-projects-list__item:hover .mxd-projects-list__product p {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon-v2 {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon-v2 i::before {
    -webkit-animation: var(--_animspeed-slow) var(--_animbezier) 0.3s 1 both slideRightUp;
    -moz-animation: var(--_animspeed-slow) var(--_animbezier) 0.3s 1 both slideRightUp;
    animation: var(--_animspeed-slow) var(--_animbezier) 0.3s 1 both slideRightUp;
  }
}

.mxd-projects-list__border {
  position: relative;
  left: 1.5rem;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-projects-list__inner {
  display: block;
  padding: 3rem 0;
}

.mxd-projects-list__inner-v2 {
  display: block;
  padding: 4rem 0 5.6rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-projects-list__inner-v2 {
    padding: 3.7rem 0 5.5rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__inner-v2 {
    padding: 6rem 0;
  }
}

.mxd-projects-list__title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3.6rem;
  overflow: hidden;
}

.mxd-projects-list__title p {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-projects-list__title {
    margin-bottom: 3.9rem;
  }

  .mxd-projects-list__title p {
    font-size: 4.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__title {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    height: 100%;
    margin-bottom: 0;
  }

  .mxd-projects-list__title p {
    -webkit-transform: translateX(-5.4rem);
    -moz-transform: translateX(-5.4rem);
    -ms-transform: translateX(-5.4rem);
    transform: translateX(-5.4rem);
    -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-projects-list__title p {
    font-size: 4.4rem;
  }
}

.mxd-projects-list__title-v2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3.1rem;
  overflow: hidden;
}

.mxd-projects-list__title-v2 p {
  font: normal var(--fw-medium) 4.4rem/1.2 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-projects-list__title-v2 {
    margin-bottom: 3rem;
  }

  .mxd-projects-list__title-v2 p {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__title-v2 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    height: 100%;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-projects-list__title-v2 p {
    font-size: 7rem;
  }
}

.mxd-projects-list__icon {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 3rem;
}

.mxd-projects-list__icon i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: color var(--_animspeed-medium) var(--_animbezier);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

@media only screen and (min-width: 768px) {
  .mxd-projects-list__icon {
    font-size: 4.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__icon {
    -webkit-transform: translateX(-5.4rem);
    -moz-transform: translateX(-5.4rem);
    -ms-transform: translateX(-5.4rem);
    transform: translateX(-5.4rem);
    -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  }
}

.mxd-projects-list__icon-v2 {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.8rem;
}

.mxd-projects-list__icon-v2 i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: color var(--_animspeed-medium) var(--_animbezier);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__icon-v2 {
    font-size: 2.2rem;
    -webkit-transform: translateX(3.2rem);
    -moz-transform: translateX(3.2rem);
    -ms-transform: translateX(3.2rem);
    transform: translateX(3.2rem);
    -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-projects-list__icon-v2 {
    font-size: 2.6rem;
    -webkit-transform: translateX(3.8rem);
    -moz-transform: translateX(3.8rem);
    -ms-transform: translateX(3.8rem);
    transform: translateX(3.8rem);
  }
}

.mxd-projects-list__image {
  display: block;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
  margin-bottom: 3.4rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__image {
    display: none;
  }
}

.mxd-projects-list__tagslist {
  margin-bottom: 0.6rem;
}

.mxd-projects-list__tagslist ul li p {
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-projects-list__tagslist {
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__tagslist {
    margin-bottom: 0;
  }
}

.mxd-projects-list__tagslist-v2 {
  margin-bottom: 1rem;
}

.mxd-projects-list__tagslist-v2 ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  color: var(--t-bright);
}

.mxd-projects-list__tagslist-v2 ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.mxd-projects-list__tagslist-v2 ul li p {
  line-height: 1.2;
  color: var(--t-bright);
}

.mxd-projects-list__tagslist-v2 ul li svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

@media only screen and (min-width: 768px) {
  .mxd-projects-list__tagslist-v2 {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__tagslist-v2 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
  }

  .mxd-projects-list__tagslist-v2 ul {
    -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  }
}

.mxd-projects-list__date {
  text-align: right;
}

.mxd-projects-list__date p {
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__date {
    text-align: right;
  }
}

.mxd-projects-list__product {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 0.8rem;
  text-align: right;
}

.mxd-projects-list__product p {
  line-height: 1.2;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-projects-list__product {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-list__product {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mxd-projects-list__product p {
    -webkit-transform: translateX(3.2rem);
    -moz-transform: translateX(3.2rem);
    -ms-transform: translateX(3.2rem);
    transform: translateX(3.2rem);
    -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-projects-list__product p {
    -webkit-transform: translateX(3.8rem);
    -moz-transform: translateX(3.8rem);
    -ms-transform: translateX(3.8rem);
    transform: translateX(3.8rem);
  }
}

/* ------------------------------------------------*/
/* Features - Projects List End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Projects Masonry Start */
/* ------------------------------------------------*/
.mxd-projects-masonry {
  position: relative;
}

.mxd-projects-masonry__title {
  position: relative;
  height: auto;
  padding: 0 1.5rem;
}

.mxd-projects-masonry__title.headline-title {
  margin-bottom: 12.9rem;
}

.mxd-projects-masonry__title.section-title {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-projects-masonry__title.headline-title {
    margin-bottom: 14.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-masonry__title {
    padding: 0 3rem;
  }

  .mxd-projects-masonry__title.headline-title {
    margin-bottom: 14.2rem;
  }

  .mxd-projects-masonry__title.section-title {
    margin-bottom: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-projects-masonry__title {
    padding: 0 3rem;
  }

  .mxd-projects-masonry__title.headline-title {
    margin-bottom: 17.9rem;
  }

  .mxd-projects-masonry__title.section-title {
    margin-bottom: 20rem;
  }
}

.mxd-projects-masonry__item {
  padding: 0 1.5rem;
  margin-bottom: 6.2rem;
}

@media only screen and (min-width: 768px) {
  .mxd-projects-masonry__item {
    padding: 0 1.5rem;
    margin-bottom: 7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-masonry__item {
    padding: 0 3rem;
    margin-bottom: 9rem;
  }

  .mxd-projects-masonry__item:last-of-type {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-projects-masonry__item {
    padding: 0 4.5rem;
    margin-bottom: 11rem;
  }
}

.mxd-project-item__media.masonry-media {
  height: auto;
}

@media only screen and (min-width: 1200px) {
  .mxd-project-item__media.masonry-media {
    height: 600px;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-project-item__media.masonry-media {
    height: 600px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project-item__media.masonry-media {
    height: 800px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-project-item__preview.masonry-preview {
    height: 600px;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-project-item__preview.masonry-preview {
    height: 600px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project-item__preview.masonry-preview {
    height: 800px;
  }
}

.mxd-projects-masonry__btngroup {
  padding: 0 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-projects-masonry__btngroup {
    position: absolute;
    right: 0;
    bottom: 8rem;
    padding: 0 3rem;
  }
}

/* ------------------------------------------------*/
/* Features - Projects Masonry End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Awards List Start */
/* ------------------------------------------------*/
.mxd-awards-list {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-awards-list>.mxd-awards-list__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-awards-list:hover>.mxd-awards-list__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-awards-list__item {
  position: relative;
  display: block;
  margin-top: -2px;
}

.mxd-awards-list__item:first-of-type {
  margin-top: 0;
}

@media only screen and (min-width: 1200px) {
  .no-touch .mxd-awards-list__item:hover .mxd-awards-list__title p {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .no-touch .mxd-awards-list__item:hover .mxd-awards-list__icon {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .no-touch .mxd-awards-list__item:hover .mxd-awards-list__icon i::before {
    -webkit-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight;
    -moz-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight;
    animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight;
  }
}

.mxd-awards-list__border {
  position: relative;
  left: 1.5rem;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-awards-list__inner {
  display: block;
  padding: 3rem 0;
}

.mxd-awards-list__title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -moz-box-orient: horizontal;
  -moz-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.6rem;
  overflow: hidden;
}

.mxd-awards-list__title p {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-awards-list__title {
    margin-bottom: 2.9rem;
  }

  .mxd-awards-list__title p {
    font-size: 4.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-awards-list__title {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    height: 100%;
    margin-bottom: 0;
  }

  .mxd-awards-list__title p {
    -webkit-transform: translateX(-5.4rem);
    -moz-transform: translateX(-5.4rem);
    -ms-transform: translateX(-5.4rem);
    transform: translateX(-5.4rem);
    -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-awards-list__title p {
    font-size: 4.4rem;
  }
}

.mxd-awards-list__icon {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 3rem;
}

.mxd-awards-list__icon i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: color var(--_animspeed-medium) var(--_animbezier);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

@media only screen and (min-width: 768px) {
  .mxd-awards-list__icon {
    font-size: 4.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-awards-list__icon {
    -webkit-transform: translateX(-5.4rem);
    -moz-transform: translateX(-5.4rem);
    -ms-transform: translateX(-5.4rem);
    transform: translateX(-5.4rem);
    -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  }
}

.mxd-awards-list__image {
  display: block;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
  margin-bottom: 3.4rem;
}

@media only screen and (min-width: 768px) {
  .mxd-awards-list__image {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-awards-list__image {
    display: none;
  }
}

.mxd-awards-list__tagslist {
  margin-bottom: 0.6rem;
}

.mxd-awards-list__tagslist ul li p {
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-awards-list__tagslist {
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-awards-list__tagslist {
    margin-bottom: 0;
  }
}

.mxd-awards-list__date {
  text-align: right;
}

.mxd-awards-list__date p {
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .mxd-awards-list__date {
    text-align: right;
  }
}

/* ------------------------------------------------*/
/* Features - Awards List End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Statistics Simple Start */
/* ------------------------------------------------*/
.mxd-stats-simple {
  position: relative;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-stats-simple>.mxd-stats-simple__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-stats-simple:hover>.mxd-stats-simple__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-stats-simple__item {
  position: relative;
  padding-top: 3rem;
}

.mxd-stats-simple__item:first-of-type {
  padding-top: 0;
}

.mxd-stats-simple__item:first-of-type .mxd-stats-simple__inner {
  padding-top: 6rem;
  border-top: 1px solid var(--st-bright);
}

.mxd-stats-simple__item .mxd-stats-simple__inner {
  padding-bottom: 6rem;
  border-bottom: 1px solid var(--st-bright);
}

@media only screen and (min-width: 992px) {
  .mxd-stats-simple__item {
    padding-top: 0;
  }

  .mxd-stats-simple__item .mxd-stats-simple__inner {
    padding-bottom: 0;
    border-bottom: none;
  }

  .mxd-stats-simple__item:first-of-type .mxd-stats-simple__inner {
    padding-top: 0;
    border-top: none;
  }
}

.no-touch .mxd-stats-simple__item:hover .mxd-stats-simple__image {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.mxd-stats-simple__inner {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (min-width: 992px) {
  .mxd-stats-simple__inner {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    height: 320px;
    padding: 0 3rem;
    border-bottom: none;
    border-left: 1px solid var(--st-bright);
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-stats-simple__inner {
    height: 400px;
  }
}

.mxd-stats-simple__image {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 5.4rem;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
  .mxd-stats-simple__image {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-stats-simple__image {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
    transition: all var(--_animspeed-medium) var(--_animbezier);
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-stats-simple__image {
    height: 7rem;
  }
}

.mxd-stats-simple__counter {
  margin-bottom: 2.8rem;
}

@media only screen and (min-width: 992px) {
  .mxd-stats-simple__counter {
    margin-bottom: 1.6rem;
  }
}

.mxd-stats-simple__descr {
  text-align: center;
}

@media only screen and (min-width: 992px) {
  .mxd-stats-simple__descr {
    text-align: left;
  }
}

/* ================================================================ */
/* Statistics Simple — phone 2×2 compact grid                         */
/* Four stacked stats ran ~2.5 screens on phones (7rem numerals plus  */
/* 6rem paddings each). Below 992px they sit as a hairline-divided    */
/* 2×2 grid instead — the whole story in one glance, ~a third of a   */
/* screen. Desktop (>=992px) keeps the four-across row. Shared by     */
/* index.html and about.html.                                         */
/* ================================================================ */
@media only screen and (max-width: 991px) {
  .mxd-stats-simple__item {
    width: 50%;
    padding: 0;
    margin-top: 0;
  }

  .mxd-stats-simple__item .mxd-stats-simple__inner,
  .mxd-stats-simple__item:first-of-type .mxd-stats-simple__inner {
    height: auto;
    padding: 2.6rem 1.2rem;
    border: none;
  }

  /* hairline cross dividers */
  .mxd-stats-simple__item:nth-child(-n+2) .mxd-stats-simple__inner {
    border-bottom: 1px solid var(--st-bright);
  }

  .mxd-stats-simple__item:nth-child(even) .mxd-stats-simple__inner {
    border-left: 1px solid var(--st-bright);
  }

  .mxd-stats-simple .mxd-stats-simple__counter {
    margin-bottom: 1.2rem;
  }

  .mxd-stats-simple .mxd-stats-number {
    font-size: 4.6rem;
    letter-spacing: -0.05rem;
  }

  .mxd-stats-simple .mxd-stats-simple__descr {
    font-size: 1.4rem;
  }
}

/* ------------------------------------------------*/
/* Features - Statistics Simple End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Statistics Cards Start */
/* ------------------------------------------------*/
.mxd-stats-cards {
  position: relative;
}

.mxd-stats-cards__item {
  position: relative;
  height: 540px;
}

@media only screen and (min-width: 768px) {
  .mxd-stats-cards__item {
    height: 420px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-stats-cards__item {
    height: 600px;
  }
}

.mxd-stats-cards__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 3.4rem;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mxd-stats-cards__inner .mxd-counter {
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .mxd-stats-cards__inner {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0;
  }

  .mxd-stats-cards__inner.align-end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}

.mxd-stats-cards__btngroup {
  z-index: 1;
}

.mxd-stats-cards__image {
  position: absolute;
  left: 0;
  top: 32rem;
  width: 100%;
  max-width: 400px;
  height: auto;
  padding: 0 4rem 0 0;
  z-index: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-stats-cards__image {
    top: 0;
    width: 60%;
    max-width: none;
    padding: 0;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-1 {
    width: 470px;
    top: -4rem;
    left: -4rem;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-2 {
    width: 420px;
    top: auto;
    bottom: -4rem;
    padding-top: 4rem;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-3 {
    width: 450px;
    top: auto;
    right: -4rem;
    bottom: 0;
    left: auto;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-4 {
    width: 400px;
    top: auto;
    bottom: 4rem;
    left: auto;
    right: -6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-stats-cards__image.mxd-stats-cards-image-1 {
    width: 330px;
    top: 0;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-4 {
    width: 280px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-stats-cards__image.mxd-stats-cards-image-1 {
    width: 470px;
    top: 4rem;
    left: -6rem;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-2 {
    width: 620px;
    bottom: auto;
    top: 4rem;
    padding-top: 0;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-3 {
    width: 620px;
  }

  .mxd-stats-cards__image.mxd-stats-cards-image-4 {
    width: 400px;
  }
}

/* ------------------------------------------------*/
/* Features - Statistics Cards End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Services Cards #01 Start */
/* ------------------------------------------------*/
.mxd-services-cards {
  position: relative;
}

.mxd-services-cards__item {
  position: relative;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-services-cards__item {
    height: 540px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards__item {
    height: 760px;
  }
}

.mxd-services-cards__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards__inner.justify-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .mxd-services-cards__inner.justify-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.mxd-services-cards__controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

.mxd-services-cards__title {
  margin-bottom: 3.6rem;
  padding-right: 2.6rem;
}

.mxd-services-cards__title p {
  font: normal var(--fw-medium) 3.6rem/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

.mxd-services-cards__title p.opposite {
  color: var(--t-opp-bright);
}

.mxd-services-cards__title p.permanent-light {
  color: var(--pt-t-light-bright);
}

.mxd-services-cards__title p.permanent-dark {
  color: var(--pt-t-dark-bright);
}

@media only screen and (min-width: 768px) {
  .mxd-services-cards__title {
    margin-bottom: 3.4rem;
  }

  .mxd-services-cards__title p {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards__title {
    z-index: 1;
  }

  .mxd-services-cards__title.width-60 {
    width: 60%;
    max-width: 640px;
  }

  .mxd-services-cards__title.width-70 {
    width: 70%;
    max-width: 360px;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-services-cards__title.width-70 {
    max-width: 440px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards__title {
    margin-bottom: 4rem;
  }

  .mxd-services-cards__title p {
    font-size: 7rem;
  }

  .mxd-services-cards__title.width-70 {
    max-width: 490px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards__info {
    z-index: 1;
  }

  .mxd-services-cards__info.width-60 {
    width: 60%;
    max-width: 640px;
  }

  .mxd-services-cards__info.width-70 {
    width: 70%;
    max-width: 300px;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-services-cards__info.width-70 {
    max-width: 440px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards__info.width-70 {
    max-width: 490px;
  }
}

.mxd-services-cards__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.2rem;
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards__tags {
    gap: 1.4rem;
    margin-bottom: 3.8rem;
  }
}

.mxd-services-cards__image {
  width: 100%;
  max-width: 400px;
  margin-top: 3.4rem;
}

.mxd-services-cards__image.mxd-services-cards-image-3 .image-2 {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards__image {
    position: absolute;
    max-width: none;
    margin-top: 0;
    z-index: 0;
  }

  .mxd-services-cards__image.mxd-services-cards-image-1 {
    width: 480px;
    right: 0;
    bottom: -240px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-2 {
    width: 380px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -220px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-3 {
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
  }

  .mxd-services-cards__image.mxd-services-cards-image-3 .image-1,
  .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 {
    position: absolute;
  }

  .mxd-services-cards__image.mxd-services-cards-image-3 .image-1 {
    width: 300px;
    left: 0;
    top: -100px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 {
    display: block;
    width: 480px;
    bottom: -180px;
    right: -40px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-4 {
    width: 280px;
    top: 1rem;
    right: -50px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-5 {
    width: 450px;
    bottom: -30px;
    right: -80px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards__image.mxd-services-cards-image-1 {
    width: 710px;
    right: 0;
    bottom: -320px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-2 {
    width: 580px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -300px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-3 .image-1 {
    width: 400px;
    left: -3rem;
    top: -180px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 {
    display: block;
    width: 610px;
    bottom: -130px;
    right: 20px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-4 {
    width: 410px;
    top: 1rem;
    right: -70px;
  }

  .mxd-services-cards__image.mxd-services-cards-image-5 {
    width: 670px;
    bottom: -50px;
    right: -100px;
  }
}

/* ------------------------------------------------*/
/* Features - Services Cards #01 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Services Cards #02 Start */
/* ------------------------------------------------*/
.mxd-services-cards-s {
  position: relative;
}

.mxd-services-cards-s__item {
  position: relative;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-services-cards-s__item {
    height: 420px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards-s__item {
    height: 600px;
  }
}

.mxd-services-cards-s__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__inner.justify-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .mxd-services-cards-s__inner.justify-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.mxd-services-cards-s__title {
  margin-bottom: 2.8rem;
}

.mxd-services-cards-s__title h3 {
  font-size: 3.6rem;
}

@media only screen and (min-width: 992px) {
  .mxd-services-cards-s__title {
    width: 50%;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__title {
    width: 100%;
    z-index: 1;
  }

  .mxd-services-cards-s__title h3 {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards-s__title h3 {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 992px) {
  .mxd-services-cards-s__info {
    width: 50%;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__info {
    width: 100%;
    z-index: 1;
  }

  .mxd-services-cards-s__info.width-50 {
    width: 50%;
    max-width: 480px;
  }
}

.mxd-services-cards-s__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.6rem;
}

.mxd-services-cards-s__image {
  width: 100%;
  margin-top: 2.8rem;
}

@media only screen and (min-width: 992px) {
  .mxd-services-cards-s__image {
    position: absolute;
    top: 0;
    right: -3rem;
    width: 50%;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__image {
    max-width: none;
    margin-top: 0;
    z-index: 0;
  }

  .mxd-services-cards-s__image.image-right {
    top: 3rem;
  }

  .mxd-services-cards-s__image.image-top-right {
    width: 260px;
    top: -80px;
    right: -30px;
  }

  .mxd-services-cards-s__image.image-bottom {
    width: 100%;
    max-width: 300px;
    top: auto;
    right: auto;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -160px;
  }

  .mxd-services-cards-s__image.image-bottom-2 {
    bottom: -260px;
  }

  .mxd-services-cards-s__image.image-top {
    width: 100%;
    max-width: 330px;
    top: auto;
    right: auto;
    top: -120px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards-s__image.image-top-right {
    width: 414px;
    top: -120px;
    right: -60px;
  }

  .mxd-services-cards-s__image.image-bottom {
    max-width: 470px;
    bottom: -200px;
  }

  .mxd-services-cards-s__image.image-bottom-2 {
    bottom: -350px;
  }

  .mxd-services-cards-s__image.image-top {
    max-width: 470px;
    top: -100px;
  }
}

/* ------------------------------------------------*/
/* Services Cards #02 - live visual responsive fix */
/* The 3D PNGs were decorative and bled outside the */
/* card (clipped by overflow:hidden). The live      */
/* canvas visuals (js/service-card-visuals.js) are  */
/* pinned in-flow at full width instead, so the      */
/* template's fixed card height clipped the graphic  */
/* and squeezed the copy on every screen >= 768px.   */
/* Let these cards grow to fit heading + tags + copy */
/* + the full graphic at all breakpoints.            */
/* ------------------------------------------------*/
.mxd-services-cards-s__item {
  height: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-services-cards-s__item {
    height: auto;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-cards-s__item {
    height: auto;
  }
}

/* keep the inner panel filling equal-height rows */
.mxd-services-cards-s__inner {
  height: 100%;
}

/* keep the heading readable on small screens */
@media only screen and (max-width: 575px) {
  .mxd-services-cards-s__title {
    margin-bottom: 2rem;
  }

  .mxd-services-cards-s__title h3 {
    font-size: 3rem;
  }
}

/* ------------------------------------------------*/
/* Compact (col-4) demos as corner accents          */
/* These cards are only as tall as their copy, so a  */
/* full-bleed canvas had nowhere to sit but on top   */
/* of the text. Pin each demo small in the top-right */
/* corner so it stays fully visible and clear of the */
/* heading + tags + paragraph, with no change to     */
/* card height. To keep the long headings (Web       */
/* Development / Custom Software) from running into   */
/* the accent, the col-4 headings are trimmed a notch */
/* so the corner stays free (Cloud / Lipsync headings */
/* already fit). The wide col-8 card (image-right) is  */
/* tall and two-column already, so it's left as-is.   */
/* ------------------------------------------------*/
@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__image.image-top-right,
  .mxd-services-cards-s__image.image-bottom,
  .mxd-services-cards-s__image.image-bottom.image-bottom-2,
  .mxd-services-cards-s__image.image-top {
    width: 42%;
    max-width: 200px;
    min-width: 132px;
    top: 1.6rem;
    bottom: auto;
    left: auto;
    right: 1.6rem;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }

  /* reserve the left column so the heading + tags stay clear of */
  /* the corner accent; the accent and these scale together      */
  .col-xl-4.mxd-services-cards-s__item .mxd-services-cards-s__title,
  .col-xl-4.mxd-services-cards-s__item .mxd-services-cards-s__tags {
    width: 56%;
  }

  .col-xl-4.mxd-services-cards-s__item .mxd-services-cards-s__title h3 {
    font-size: 2.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .col-xl-4.mxd-services-cards-s__item .mxd-services-cards-s__title h3 {
    font-size: 3.6rem;
  }
}

/* The wide col-8 card's timeline was hung 3rem past the card edge */
/* (a leftover from the old decorative PNG), so the "Final" node + */
/* caption were clipped by overflow:hidden. Tuck it back inside.   */
@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__image.image-right {
    right: 1.5rem;
    width: 48%;
  }
}

/* ================================================================ */
/* Services Cards #02 - unified "dark lab" premium treatment         */
/* The five cards previously used four clashing full-bleed colours    */
/* (white / purple / lime / black), which read as scattered. Unify    */
/* them onto one refined near-black surface with a hairline border,   */
/* a faint per-card accent glow matched to the live visual inside,    */
/* a top accent rule and a soft lift on hover. The canvas visuals     */
/* (retuned for a dark field in service-card-visuals.js) become the   */
/* hero of each card and the whole section reads as one set.          */
/* ================================================================ */
#services .mxd-services-cards-s__inner {
  --card-accent: 159, 139, 231;            /* lavender (default) */
  /* pointer position (px, relative to the card) — set by js/card-spotlight.js */
  --mx: 50%;
  --my: 0%;
  background-color: #141416;
  background-image:
    radial-gradient(135% 120% at 100% 0%, rgba(var(--card-accent), 0.13), rgba(var(--card-accent), 0) 55%),
    linear-gradient(180deg, #1c1c20 0%, #141416 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-box-shadow: 0 2rem 5rem -2.5rem rgba(0, 0, 0, 0.7);
  box-shadow: 0 2rem 5rem -2.5rem rgba(0, 0, 0, 0.7);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier), border-color var(--_animspeed-medium) var(--_animbezier), -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), border-color var(--_animspeed-medium) var(--_animbezier), box-shadow var(--_animspeed-medium) var(--_animbezier);
  will-change: transform;
}

/* per-card accent, matched to the dominant colour of its visual */
#services .mxd-services-cards-s__item:nth-child(2) .mxd-services-cards-s__inner,   /* AI Lipsync (lime) */
#services .mxd-services-cards-s__item:nth-child(4) .mxd-services-cards-s__inner {  /* Cloud & Infra (lime) */
  --card-accent: 221, 241, 96;
}

/* thin accent rule along the top edge ties the chrome to the visual */
#services .mxd-services-cards-s__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(var(--card-accent), 0)), color-stop(50%, rgba(var(--card-accent), 0.65)), color-stop(100%, rgba(var(--card-accent), 0)));
  background: linear-gradient(90deg, rgba(var(--card-accent), 0) 0%, rgba(var(--card-accent), 0.65) 50%, rgba(var(--card-accent), 0) 100%);
  opacity: 0.5;
  -webkit-transition: opacity var(--_animspeed-medium) var(--_animbezier);
  transition: opacity var(--_animspeed-medium) var(--_animbezier);
  z-index: 2;
}

/* soft spotlight on the card surface, tracking the cursor */
#services .mxd-services-cards-s__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(var(--card-accent), 0.1), transparent 60%);
  opacity: 0;
  -webkit-transition: opacity 0.45s ease;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 1;
}

/* hover: gentle lift + accent-tinted edge, refined neutral elevation */
.no-touch #services .mxd-services-cards-s__inner:hover {
  -webkit-transform: translateY(-0.6rem);
  transform: translateY(-0.6rem);
  border-color: rgba(var(--card-accent), 0.4);
  -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.35), 0 1.6rem 3.2rem -1rem rgba(0, 0, 0, 0.6), 0 3.4rem 7rem -2.6rem rgba(var(--card-accent), 0.28);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.35), 0 1.6rem 3.2rem -1rem rgba(0, 0, 0, 0.6), 0 3.4rem 7rem -2.6rem rgba(var(--card-accent), 0.28);
}

.no-touch #services .mxd-services-cards-s__inner:hover::before {
  opacity: 1;
}

.no-touch #services .mxd-services-cards-s__inner:hover::after {
  opacity: 1;
}

/* typography: light ink on the dark field, across every card */
#services .mxd-services-cards-s__title h3 {
  color: #FAF7F6;
}

#services .mxd-services-cards-s__info p {
  color: rgba(250, 247, 246, 0.66);
}

/* tags: one unified light hairline pill on all cards */
#services .mxd-services-cards-s__tags .tag {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(250, 247, 246, 0.92);
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

.no-touch #services .mxd-services-cards-s__tags .tag:hover {
  border-color: rgba(var(--card-accent), 0.7);
  color: #fff;
}

/* ================================================================ */
/* Services Cards #02 — phone "capability index" accordion            */
/* Stacked full cards ran ~4 screens deep on phones. Below 768px the  */
/* five cards compress into one numbered index: each card folds to a  */
/* slim title row (01–05 + name + plus), and tapping a row unfolds    */
/* its tags, copy and live visual in place. The fold is the pure-CSS  */
/* grid-template-rows 0fr -> 1fr trick (no JS height measuring);      */
/* js/services-accordion.js only toggles .is-open and re-fires a      */
/* window resize so the canvas visuals re-measure after unfolding.    */
/* Tablet (>=768px) and desktop layouts are untouched.                */
/* ================================================================ */
@media only screen and (max-width: 767px) {
  #services .mxd-services-cards-s .row {
    counter-reset: svc-idx;
  }

  #services .mxd-services-cards-s__item {
    counter-increment: svc-idx;
    margin-top: 1.2rem;
    /* the items carry anim-uni-scale-in-* scroll reveals; folding a card
       shortens the page, their triggers re-reverse, and rows get stuck
       scaled/offset. Neutralize the wrapper transforms on phones — the
       fold is presentation enough */
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
  }

  #services .mxd-services-cards-s__item:first-child {
    margin-top: 0;
  }

  #services .mxd-services-cards-s__inner {
    display: grid;
    grid-template-rows: auto 0fr 0fr;
    padding: 0 2rem;
    -moz-border-radius: var(--_radius-m);
    border-radius: var(--_radius-m);
    /* the desktop per-card radial accent glow (lime on cards 02/04) covers
       most of a collapsed row and reads as a stray colour wash on the slim
       index — flatten every row to the plain dark surface on phones */
    background-image: linear-gradient(180deg, #1c1c20 0%, #141416 100%);
    /* cheaper rows: no lift/shadow choreography on touch */
    -webkit-box-shadow: none;
    box-shadow: none;
    will-change: auto;
    /* NO fold transition on phones. Animating grid-template-rows re-runs
       layout every frame — on a phone the 0.55s tween stuttered opening and
       clipped half-collapsed content on close (the "buggy" fold). Rows now
       snap open/closed instantly; speed over choreography on touch. */
    -webkit-transition: none;
    transition: none;
  }

  /* the cursor-spotlight overlay never shows on touch — drop its layer */
  #services .mxd-services-cards-s__inner::after {
    display: none;
  }

  #services .mxd-services-cards-s__item.is-open .mxd-services-cards-s__inner {
    grid-template-rows: auto 1fr 1fr;
    border-color: rgba(var(--card-accent), 0.4);
  }

  /* the title row is the whole tap target: index number + name + plus */
  #services .mxd-services-cards-s__title {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.4rem;
    width: 100%;
    margin: 0;
    padding: 1.7rem 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* no browser focus ring on tap; keep a clear one for keyboards */
  #services .mxd-services-cards-s__title:focus {
    outline: none;
  }

  #services .mxd-services-cards-s__title:focus-visible {
    outline: 2px solid rgba(var(--card-accent), 0.7);
    outline-offset: 3px;
    -moz-border-radius: 0.6rem;
    border-radius: 0.6rem;
  }

  #services .mxd-services-cards-s__title::before {
    content: counter(svc-idx, decimal-leading-zero);
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.14em;
    color: rgba(var(--card-accent), 0.95);
  }

  #services .mxd-services-cards-s__title h3 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-size: 2rem;
    line-height: 1.2;
  }

  /* headings keep their desktop two-line breaks; flow them on one row */
  #services .mxd-services-cards-s__title h3 br {
    display: none;
  }

  /* plus -> cross affordance */
  #services .mxd-services-cards-s__title::after {
    content: "\002B";
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(250, 247, 246, 0.65);
    -webkit-transition: color 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.4s ease;
  }

  #services .mxd-services-cards-s__item.is-open .mxd-services-cards-s__title::after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    color: rgb(var(--card-accent));
  }

  /* the two folding rows: clip while their track sits at 0fr */
  #services .mxd-services-cards-s__info,
  #services .mxd-services-cards-s__image {
    min-height: 0;
    overflow: hidden;
  }

  #services .mxd-services-cards-s__tags {
    gap: 0.8rem;
    margin-bottom: 1.8rem;
  }

  /* live visual: compact and centered, with the card's bottom padding
     carried as margin so the closed row collapses to nothing */
  #services .mxd-services-cards-s__image {
    width: 100%;
    max-width: 26rem;
    margin: 2rem auto 0;
  }

  #services .mxd-services-cards-s__image > * {
    margin-bottom: 2.4rem;
  }

  /* the lipsync visual composes into the lower ~65% of its canvas (its
     desktop slot overlaps the card corner), which reads as dead space
     when in-flow — crop the empty headroom (mount already clips) */
  #services [data-card-visual="lipsync"] .mxd-card-visual__canvas {
    margin-top: -24%;
  }

  /* the GSAP in-up reveals were measured against the pre-accordion
     layout, so their triggers go stale once the rows fold (titles can
     stick at opacity 0). Force every animated child visible and let
     the unfold itself do the presenting */
  #services .mxd-services-cards-s__inner .anim-uni-in-up {
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
  }
}

/* ------------------------------------------------*/
/* Features - Services Cards #02 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Services List Start */
/* ------------------------------------------------*/
.mxd-services-list {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-services-list.grid-top {
  padding-top: 14rem;
}

@media only screen and (min-width: 768px) {
  .mxd-services-list.grid-top {
    padding-top: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-list.grid-top {
    padding-top: 20rem;
  }
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-services-list>.mxd-services-list__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-services-list:hover>.mxd-services-list__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-services-list__item {
  position: relative;
  margin-top: -2px;
}

.mxd-services-list__item:first-of-type {
  margin-top: 0;
}

.mxd-services-list__border {
  position: relative;
  left: 1.5rem;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-services-list__inner {
  padding: 6rem 0;
}

.mxd-services-list__title {
  margin-bottom: 3.4rem;
}

.mxd-services-list__title p {
  font: normal var(--fw-medium) 4.4rem/0.7 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .mxd-services-list__title {
    margin-bottom: 0;
  }

  .mxd-services-list__title p {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-list__title p {
    font-size: 12rem;
  }
}

.mxd-services-list__descr {
  margin-bottom: 2.6rem;
}

.mxd-services-list__descr p {
  color: var(--t-medium);
  font-size: 1.8rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-services-list__descr {
    margin-bottom: 0;
  }
}

.mxd-services-list__tagslist ul li p {
  color: var(--t-medium);
  font-size: 1.8rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-services-list__tagslist {
    padding: 0 3rem;
  }
}

/* ------------------------------------------------*/
/* Features - Services List End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Capabilities List Start */
/* ------------------------------------------------*/
.mxd-cpb-list {
  position: relative;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-cpb-list>.mxd-cpb-list__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-cpb-list:hover>.mxd-cpb-list__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-cpb-list__item {
  position: relative;
  display: block;
  margin-top: -2px;
}

.mxd-cpb-list__item:hover {
  z-index: 10;
}

.mxd-cpb-list__item:first-of-type {
  margin-top: 0;
}

.mxd-cpb-list__divider {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-cpb-list__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 3rem 0 3.5rem 0;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .mxd-cpb-list__content {
    padding: 3rem 0;
  }
}

.mxd-cpb-list__title {
  position: relative;
  color: var(--t-bright);
}

.mxd-cpb-list__num {
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-muted);
}

@media only screen and (min-width: 1200px) {
  .mxd-cpb-list__num {
    font-size: 3rem;
    color: var(--t-bright);
  }
}

.mxd-cpb-list__image {
  display: block;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
  margin-bottom: 4rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-cpb-list__image {
    display: none;
  }
}

/* ------------------------------------------------*/
/* Features - Capabilities List End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Resume List Start */
/* ------------------------------------------------*/
.mxd-res-list {
  position: relative;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-res-list>.mxd-res-list__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-res-list:hover>.mxd-res-list__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-res-list__item {
  position: relative;
  display: block;
  margin-top: -2px;
}

.mxd-res-list__item:first-of-type {
  margin-top: 0;
}

.mxd-res-list__divider {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-res-list__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 3.6rem 0 3.5rem 0;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .mxd-res-list__content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 6rem 0 7rem 0;
  }
}

.mxd-res-list__data {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.6rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-res-list__data {
    gap: 2.8rem;
  }
}

.mxd-res-list__source {
  font-size: 1.6rem;
  margin-top: 0.2rem;
}

@media only screen and (min-width: 1600px) {
  .mxd-res-list__source {
    font-size: 1.8rem;
  }
}

.mxd-res-list__descr {
  max-width: 560px;
}

.mxd-res-list__year {
  margin-bottom: 1.1rem;
}

.mxd-res-list__year p {
  font-weight: var(--fw-medium);
  color: var(--t-bright);
}

/* ------------------------------------------------*/
/* Features - Resume List End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Approach List Start */
/* ------------------------------------------------*/
.mxd-approach-list {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-approach-list>.mxd-approach-list__item {
    -webkit-transition: opacity var(--_animspeed-medium) ease;
    -moz-transition: opacity var(--_animspeed-medium) ease;
    transition: opacity var(--_animspeed-medium) ease;
  }

  .no-touch .mxd-approach-list:hover>.mxd-approach-list__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-approach-list__item {
  position: relative;
  width: 100%;
  margin-top: -2px;
}

.mxd-approach-list__item:first-of-type {
  margin-top: 0;
}

.no-touch .mxd-approach-list__item:hover .mxd-approach-list__image img {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}

.mxd-approach-list__border {
  position: relative;
  left: 1.5rem;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-approach-list__inner {
  padding: 7rem 0;
}

@media only screen and (min-width: 768px) {
  .mxd-approach-list__inner {
    padding: 8rem 0;
  }
}

.mxd-approach-list__image {
  display: block;
  width: 7rem;
  height: 7rem;
  margin-bottom: 2.4rem;
}

.mxd-approach-list__image img {
  display: block;
  position: relative;
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}

@media only screen and (min-width: 1200px) {
  .mxd-approach-list__image {
    margin-bottom: 0;
  }
}

.mxd-approach-list__title {
  margin-bottom: 2.2rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-approach-list__title {
    margin-bottom: 0;
    padding: 0 3rem;
    text-align: right;
  }
}

/* ------------------------------------------------*/
/* Features - Approach List End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Divider Image Parallax Start */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Divider Image Parallax End */
/* ------------------------------------------------*/
/* Features - Marquee Mobile Scaling Start */
/* ------------------------------------------------*/
/* (moved) The phone-scaling rules for the muted-extra marquees now live
   AFTER the base .marquee.muted-extra colour rules — see "Marquee Mobile
   Scaling (phones)" further down. They used to sit here, before the base
   rules, where the equal-specificity colour declaration lost the cascade
   and phones silently kept the ultra-muted #535151-on-dark text — the
   "invisible marquee" bug. */
.marquee-mobile-tags {
  display: none;                     /* static fallback, permanently hidden */
}
/* ------------------------------------------------*/
/* Features - Marquee Mobile Scaling End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Features - Marquee Start */
/* ------------------------------------------------*/
.marquee {
  max-width: 100%;
  overflow: hidden;
}

.marquee.bright .marquee__text,
.marquee.bright .marquee__image {
  color: var(--t-bright);
}

.marquee.medium .marquee__text,
.marquee.medium .marquee__image {
  color: var(--t-medium);
}

.marquee.muted .marquee__text,
.marquee.muted .marquee__image {
  color: var(--t-muted);
}

.marquee.muted-extra .marquee__text,
.marquee.muted-extra .marquee__image {
  color: var(--t-muted-extra);
}

.marquee.permanent-desktop .marquee__text,
.marquee.permanent-desktop .marquee__image {
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {

  .marquee.permanent-desktop .marquee__text,
  .marquee.permanent-desktop .marquee__image {
    color: var(--pt-t-light-bright);
  }

  .marquee.permanent-desktop .marquee__text {
    font-weight: var(--fw-regular);
  }
}

/* Marquee Mobile Scaling (phones). On phones the muted-extra marquee text
   is 6rem (60px) on a ~375px viewport — only a sliver of one word is in
   frame at any time, and the ultra-muted colour makes it read as a blank
   dark bar. Scale the type and separator down so 2-3 words sit in the
   viewport at once, and lift the colour to medium so it actually reads
   against the dark background. Must stay BELOW the base .marquee.muted-extra
   colour rule above: same specificity, so source order decides the winner. */
@media only screen and (max-width: 767px) {
  .marquee.muted-extra .marquee__text {
    font-size: 3.8rem;
    letter-spacing: -0.02rem;
  }
  .marquee.muted-extra .marquee__image {
    width: 2.6rem;
    height: 2.6rem;
  }
  .marquee.muted-extra .marquee__text,
  .marquee.muted-extra .marquee__image {
    color: var(--t-medium);
  }
}

.marquee--gsap .marquee__top,
.marquee--gsap .marquee__bottom {
  translate: -moz-calc(-100% + 100vw) !important;
  translate: calc(-100% + 100vw) !important;
}

.marquee-right--gsap .marquee__toright,
.marquee-left--gsap .marquee__toleft {
  translate: -moz-calc(-100% + 100vw) !important;
  translate: calc(-100% + 100vw) !important;
}

.marquee__top,
.marquee__bottom,
.marquee__toleft,
.marquee__toright,
.items__container {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}

.marquee__item {
  margin-top: 1.5rem;
  margin-right: 1.5rem;
}

.marquee__item.one-line {
  margin-top: 0;
}

.marquee__item.item-regular-xl {
  margin-right: 3rem;
}

@media only screen and (min-width: 768px) {
  .marquee__item {
    margin-top: 3rem;
    margin-right: 3rem;
  }

  .marquee__item.one-line {
    margin-top: 0;
  }

  .marquee__item.item-regular-xl {
    margin-right: 6rem;
  }
}

.marquee__item {
  position: relative;
  width: 430px;
  height: 320px;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  -webkit-animation: animateZ 1s infinite;
  -moz-animation: animateZ 1s infinite;
  animation: animateZ 1s infinite;
}

.marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.marquee__item.overflow-visible {
  overflow: visible;
}

.marquee__item.has-caption {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  background-color: var(--accent);
}

.marquee__item.has-caption p {
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-opp-bright);
}

.marquee__item.item-vertical {
  width: 400px;
  height: 460px;
}

.marquee__item.item-regular {
  width: auto;
  height: auto;
  -moz-border-radius: 0;
  border-radius: 0;
  gap: 0;
  background-color: transparent;
  -webkit-animation: animateZ 1s infinite;
  -moz-animation: animateZ 1s infinite;
  animation: animateZ 1s infinite;
}

.marquee__item.item-regular-xl {
  gap: 3rem;
}

.marquee__item.item-partners {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 380px;
  height: 250px;
}

.marquee__item.item-partners::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  z-index: -1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
}

.marquee__item.item-partners img {
  width: 170px;
  height: auto;
}

.marquee__item.item-large {
  width: 830px;
  height: 630px;
}

@media only screen and (min-width: 768px) {
  .marquee__item {
    width: 490px;
    height: 360px;
  }

  .marquee__item.has-caption p {
    font-size: 3rem;
  }

  .marquee__item.item-vertical {
    width: 525px;
    height: 600px;
  }

  .marquee__item.item-regular-xl {
    gap: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .marquee__item {
    width: 540px;
    height: 400px;
  }

  .marquee__item.item-vertical {
    width: 470px;
    height: 540px;
  }
}

@media only screen and (min-width: 1400px) {
  .marquee__item.item-large {
    width: 880px;
    height: 670px;
  }
}

@media only screen and (min-width: 1600px) {
  .marquee__item {
    width: 730px;
    height: 540px;
  }

  .marquee__item.has-caption p {
    font-size: 5rem;
  }

  .marquee__item.item-vertical {
    width: 525px;
    height: 600px;
  }

  .marquee__item.item-large {
    width: 1000px;
    height: 760px;
  }
}

.marquee__link {
  display: block;
  width: 100%;
  height: 100%;
}

.marquee__link img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.marquee__text {
  margin-right: 1.6rem;
}

.marquee__text.text-with-gliph {
  margin-right: 0;
}

.marquee__text.text-with-gliph::after {
  content: "*";
  display: inline;
  padding-left: 1.6rem;
}

@media only screen and (min-width: 1200px) {
  .marquee__text {
    margin-right: 3.6rem;
  }

  .marquee__text.text-with-gliph::after {
    padding-left: 3.6rem;
  }
}

.marquee__image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 4.1rem;
  height: 4.1rem;
}

.marquee__image.image-xl {
  width: 9rem;
  height: 9rem;
}

@media only screen and (min-width: 768px) {
  .marquee__image {
    width: 8.1rem;
    height: 8.1rem;
  }

  .marquee__image.image-xl {
    width: 14rem;
    height: 14rem;
  }
}

@media only screen and (min-width: 1400px) {
  .marquee__image.image-xl {
    width: 18rem;
    height: 18rem;
  }
}

.marquee__image img,
.marquee__image video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.marquee__text {
  font: normal var(--fw-regular) 6rem/1.2 var(--_font-accent);
  letter-spacing: -0.06rem;
}

.marquee__text.text-xl {
  font-weight: var(--fw-medium);
  font-size: 20rem;
  line-height: 0.8;
}

@media only screen and (min-width: 768px) {
  .marquee__text {
    font-size: 12rem;
  }

  .marquee__text.text-xl {
    font-size: 30rem;
  }
}

@media only screen and (min-width: 1200px) {
  .marquee__text {
    font-size: 12rem;
  }
}

@media only screen and (min-width: 1400px) {
  .marquee__text.text-xl {
    font-size: 40rem;
  }
}

.marquee__component {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  height: 280px;
  margin: 3rem 0;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  overflow: hidden;
  padding: 1rem;
  background-color: var(--base-tint);
  border: 1px solid var(--st-muted);
}

.marquee__component img {
  -moz-border-radius: 1rem;
  border-radius: 1rem;
}

@media only screen and (min-width: 768px) {
  .marquee__component {
    -moz-border-radius: 2rem;
    border-radius: 2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .marquee__component {
    height: 320px;
  }
}

@-webkit-keyframes toLeft {
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@-moz-keyframes toLeft {
  to {
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes toLeft {
  to {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@-webkit-keyframes toRight {
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes toRight {
  to {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes toRight {
  to {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes animateZ {
  to {
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
  }
}

@-moz-keyframes animateZ {
  to {
    -moz-transform: translateZ(1px);
    transform: translateZ(1px);
  }
}

@keyframes animateZ {
  to {
    -webkit-transform: translateZ(1px);
    -moz-transform: translateZ(1px);
    transform: translateZ(1px);
  }
}

/* ------------------------------------------------*/
/* Features - Marquee End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Stack Services #01 Start */
/* ------------------------------------------------*/
.stack-wrapper {
  position: relative;
  width: 100%;
}

.stack-wrapper.in-content-stack {
  margin-top: -7.6rem;
}

.stack-wrapper.mxd-hero-02-stack {
  margin-top: -10.6rem;
}

@media only screen and (min-width: 768px) {
  .stack-wrapper.mxd-hero-02-stack {
    margin-top: -13.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .stack-wrapper.mxd-hero-08-stack {
    margin-top: -1.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .stack-wrapper.in-content-stack {
    margin-top: -4.6rem;
  }

  .stack-wrapper.mxd-hero-02-stack {
    margin-top: -13.6rem;
  }

  .stack-wrapper.mxd-hero-08-stack {
    margin-top: 2.3rem;
  }
}

.stack-offset {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 10.6rem;
  background-color: transparent;
}

@media only screen and (min-width: 768px) {
  .stack-offset {
    height: 13.6rem;
  }
}

.services-stack {
  width: 100%;
  position: relative;
  height: 75vh;
  min-height: 600px;
}

@media only screen and (min-width: 992px) {
  .services-stack {
    height: 600px;
    min-height: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .services-stack {
    height: 760px;
  }
}

.stack-item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-bottom: 3rem;
}

@media only screen and (min-width: 1600px) {
  .stack-item {
    padding-bottom: 6rem;
  }
}

.mxd-services-stack__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 2.6rem 3rem 0 3rem;
  z-index: 0;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
}

.mxd-services-stack__inner.radius-dark {
  -moz-border-radius: 3.6rem;
  border-radius: 3.6rem;
}

.mxd-services-stack__inner.showcase-inner {
  padding: 2.6rem 3rem 3rem 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-services-stack__inner {
    padding: 4.2rem 5rem 0 5rem;
  }

  .mxd-services-stack__inner.showcase-inner {
    padding: 4.2rem 5rem 5rem 5rem;
  }

  .mxd-services-stack__inner.radius-dark {
    -moz-border-radius: 4.6rem;
    border-radius: 4.6rem;
  }
}

@media only screen and (min-width: 992px) {
  .mxd-services-stack__inner {
    padding: 4.2rem 5rem 4.6rem 5rem;
  }

  .mxd-services-stack__inner.justify-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .mxd-services-stack__inner.justify-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.mxd-services-stack__container {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}

.mxd-services-stack__controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.mxd-services-stack__title {
  margin-bottom: 3.4rem;
  padding-right: 2.6rem;
}

.mxd-services-stack__title.showcase-title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  gap: 0;
  width: 100%;
  padding-right: 0;
  margin-bottom: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-services-stack__title.showcase-title {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 2.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .mxd-services-stack__title {
    z-index: 1;
  }

  .mxd-services-stack__title.width-60 {
    width: 60%;
    max-width: 580px;
  }

  .mxd-services-stack__title.width-70 {
    width: 70%;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-stack__title h3 {
    font-size: 7rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-services-stack__title.showcase-title {
    margin-bottom: 2.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-stack__title {
    margin-bottom: 4rem;
  }

  .mxd-services-stack__title.width-60 {
    max-width: 800px;
  }

  .mxd-services-stack__title.showcase-title {
    margin-bottom: 3rem;
  }
}

.mxd-services-stack__number {
  font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent);
}

.mxd-services-stack__number.t-muted {
  color: var(--t-muted);
}

.mxd-services-stack__number.t-muted-extra {
  color: var(--t-muted-extra);
}

.mxd-services-stack__number.t-opp-brigth {
  color: var(--t-opp-bright);
}

.mxd-services-stack__number.t-opp-muted {
  color: var(--t-opp-muted);
}

@media only screen and (min-width: 768px) {
  .mxd-services-stack__number {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-stack__number {
    font-size: 7rem;
  }
}

.mxd-services-stack__info {
  z-index: 1;
  margin-bottom: 3.3rem;
}

.mxd-services-stack__info.showcase-info {
  width: 100%;
  margin-bottom: 2.7rem;
}

@media only screen and (min-width: 768px) {
  .mxd-services-stack__info {
    width: 80%;
    margin-bottom: 3.3rem;
  }

  .mxd-services-stack__info.showcase-info {
    margin-bottom: 3.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .mxd-services-stack__info.width-60 {
    width: 60%;
    max-width: 470px;
    margin-bottom: 0;
  }

  .mxd-services-stack__info.width-70 {
    width: 70%;
    max-width: 300px;
  }

  .mxd-services-stack__info.showcase-info {
    width: 50%;
    padding-right: 1.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-services-stack__info.showcase-info {
    margin-bottom: 4.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-stack__info.width-60 {
    max-width: 610px;
  }

  .mxd-services-stack__info.width-70 {
    max-width: 490px;
  }

  .mxd-services-stack__info.showcase-info {
    margin-bottom: 5rem;
  }
}

.mxd-services-stack__works {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  gap: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-services-stack__works {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 3rem;
  }
}

.mxd-services-stack__work {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
}

@media only screen and (min-width: 768px) {
  .mxd-services-stack__work {
    width: -moz-calc(50% - 1.5rem);
    width: calc(50% - 1.5rem);
  }
}

.no-touch .mxd-services-stack__work:hover .mxd-services-stack__preview {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.no-touch .mxd-services-stack__work:hover .mxd-preview-hover {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}

.mxd-services-stack__preview {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

.mxd-services-stack__tags {
  display: none;
}

@media only screen and (min-width: 768px) {
  .mxd-services-stack__tags {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .mxd-services-stack__tags.tags-absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.6rem 3rem;
    -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
    -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
    transition: all var(--_animspeed-medium) var(--_animbezier);
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-stack__tags.tags-absolute {
    padding: 3.6rem 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-stack__tags {
    gap: 1.4rem;
  }
}

.services-stack__image {
  position: relative;
  overflow: hidden;
}

.services-stack__image .service-img-m {
  display: none;
}

@media only screen and (min-width: 992px) {
  .services-stack__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    padding-left: 0;
  }

  .services-stack__image .service-img {
    position: absolute;
    right: -15%;
    bottom: 0;
    height: 100%;
    width: auto;
  }

  .services-stack__image .service-img-s {
    display: none;
  }

  .services-stack__image .service-img-m {
    display: block;
  }
}

@media only screen and (min-width: 1200px) {
  .services-stack__image .service-img {
    position: absolute;
    right: 0;
    bottom: -5%;
    max-height: none;
    height: 110%;
    width: auto;
  }
}

.portfolio-stack__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--base);
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: cover;
  background-size: cover;
}

.portfolio-stack__descr {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.4rem 3rem;
}

@media only screen and (min-width: 768px) {
  .portfolio-stack__descr {
    display: block;
    width: 60%;
    padding: 2.6rem 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .portfolio-stack__descr {
    width: 40%;
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .portfolio-stack__descr {
    width: 33.3334%;
  }
}

.portfolio-stack__title.dark {
  font-weight: 400;
}

.portfolio-stack__title.light {
  font-weight: 300;
}

.portfolio-stack__text {
  margin-top: 3rem;
  font-weight: 300;
}

.portfolio-stack__text.dark {
  font-weight: 400;
}

@media only screen and (min-width: 1400px) {
  .portfolio-stack__text {
    margin-top: 4rem;
  }
}

/* ------------------------------------------------*/
/* Features - Stack Services #01 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Stack Services #02 Start */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Stack Services #02 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Stack Projects Start */
/* ------------------------------------------------*/
.projects-stack {
  width: 100%;
  position: relative;
  height: 75vh;
  min-height: 600px;
}

@media only screen and (min-width: 992px) {
  .projects-stack {
    height: 600px;
    min-height: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .projects-stack {
    height: 760px;
  }
}

.mxd-projects-stack__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  padding: 3rem;
  z-index: 0;
}

.mxd-projects-stack__inner.justify-between {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.mxd-projects-stack__inner.justify-end {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media only screen and (min-width: 768px) {
  .mxd-projects-stack__inner {
    padding: 5rem;
  }
}

.mxd-projects-stack__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mxd-projects-stack__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mxd-projects-stack__image img.mobile {
  display: block;
}

.mxd-projects-stack__image img.desktop {
  display: none;
}

@media only screen and (min-width: 768px) {
  .mxd-projects-stack__image img.mobile {
    display: none;
  }

  .mxd-projects-stack__image img.desktop {
    display: block;
  }
}

.mxd-projects-stack__title {
  position: relative;
  margin-bottom: 2.4rem;
  max-width: 600px;
}

.mxd-projects-stack__title.no-margin {
  margin-bottom: 0;
}

.mxd-projects-stack__tags {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

@media only screen and (min-width: 1600px) {
  .mxd-projects-stack__tags {
    gap: 1.4rem;
  }
}

/* ------------------------------------------------*/
/* Features - Stack Projects End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Testimonials Style #01 Start */
/* ------------------------------------------------*/
.mxd-testimonials-card {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 4.6rem;
  padding: 3rem;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-card {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 600px;
    max-width: 460px;
    padding: 4rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-testimonials-card {
    height: 640px;
    max-width: 500px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-testimonials-card {
    height: 700px;
    max-width: 630px;
  }
}

.mxd-testimonials-card__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4.9rem;
}

.mxd-testimonials-card__media {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-card__media {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.mxd-testimonials-card__photo {
  width: 8rem;
  height: 8rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}

.mxd-testimonials-card__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-card__photo {
    width: 12rem;
    height: 12rem;
  }
}

.mxd-testimonials-card__company {
  position: relative;
  max-width: 12rem;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-card__company {
    max-width: 18rem;
  }
}

.mxd-testimonials-card__text p {
  margin-bottom: 3.3rem;
}

.mxd-testimonials-photo {
  position: relative;
}

@media only screen and (min-width: 992px) {
  .mxd-testimonials-photo {
    height: 600px;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-testimonials-photo {
    height: 640px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-testimonials-photo {
    height: 760px;
  }
}

.mxd-testimonials-photo__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
}

@media only screen and (min-width: 992px) {
  .mxd-testimonials-photo__content {
    padding-right: 6rem;
  }
}

.mxd-testimonials-photo__author {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-photo__author {
    gap: 3rem;
  }
}

.mxd-testimonials-photo__avatar {
  width: 8rem;
  height: 8rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}

.mxd-testimonials-photo__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-photo__avatar {
    width: 12rem;
    height: 12rem;
  }
}

.mxd-testimonials-photo__info {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.6rem;
  width: -moz-calc(100% - 9.5rem);
  width: calc(100% - 9.5rem);
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-photo__info {
    width: auto;
  }
}

.mxd-testimonials-photo__position {
  line-height: 1.2;
}

.mxd-testimonials-photo__rating {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.mxd-testimonials-photo__rating i {
  display: block;
  font-size: 1.8rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 1600px) {
  .mxd-testimonials-photo__rating i {
    font-size: 2rem;
  }
}

.mxd-testimonials-photo__image {
  position: relative;
}

@media only screen and (min-width: 992px) {
  .mxd-testimonials-photo__image {
    height: 100%;
  }
}

.mxd-testimonials-photo__image-inner {
  overflow: hidden;
}

.mxd-testimonials-photo__image-inner img {
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mxd-testimonials-photo__text {
  margin-bottom: 6rem;
}

.mxd-testimonials-photo__text p {
  margin-bottom: 3rem;
}

@media only screen and (min-width: 992px) {
  .mxd-testimonials-photo__text {
    margin-bottom: 0;
  }
}

.testimonials-slider {
  position: relative;
  height: auto;
  padding: 0 3rem;
}

.testimonials-slider.no-padding {
  padding: 0;
}

@media only screen and (min-width: 768px) {
  .testimonials-slider {
    padding: 0 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonials-slider {
    padding: 0 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonials-slider__shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 6rem;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(var(--base-rgb), 0)), to(rgba(var(--base-rgb), 1)));
    background: -moz-linear-gradient(left, rgba(var(--base-rgb), 0) 0%, rgba(var(--base-rgb), 1) 100%);
    background: linear-gradient(to right, rgba(var(--base-rgb), 0) 0%, rgba(var(--base-rgb), 1) 100%);
    z-index: 1;
  }
}

.swiper-testimonials {
  position: relative;
  height: 100%;
  padding-bottom: 7rem;
}

@media only screen and (min-width: 992px) {
  .swiper-testimonials.no-padding {
    padding-bottom: 0;
  }
}

.swiper-slide {
  width: 100%;
  -webkit-filter: blur(4px);
  filter: blur(4px);
  -webkit-transition: -webkit-filter var(--_animspeed-slow) var(--_animbezier);
  transition: -webkit-filter var(--_animspeed-slow) var(--_animbezier);
  -moz-transition: filter var(--_animspeed-slow) var(--_animbezier);
  transition: filter var(--_animspeed-slow) var(--_animbezier);
  transition: filter var(--_animspeed-slow) var(--_animbezier), -webkit-filter var(--_animspeed-slow) var(--_animbezier);
}

.swiper-slide.mxd-fullwidth-slide {
  width: 100%;
}

.swiper-slide.swiper-slide-active {
  -webkit-filter: blur(0);
  filter: blur(0);
}

@media only screen and (min-width: 768px) {
  .swiper-slide {
    width: auto;
  }

  .swiper-slide.mxd-fullwidth-slide {
    width: 100%;
  }
}

.mxd-slider-btn {
  display: block;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0.2rem;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
}

.mxd-slider-btn::after {
  display: none;
}

.mxd-slider-btn-round-prev {
  left: 0;
}

.mxd-slider-btn-round-prev.v2 {
  bottom: 0.2rem;
  left: 0.2rem;
}

.mxd-slider-btn-round-next {
  left: 5.4rem;
}

.mxd-slider-btn-round-next.v2 {
  left: auto;
  bottom: 0.2rem;
  right: 0.2rem;
}

.mxd-swiper-pagination-fraction {
  font: normal var(--fw-regular) 1.6rem/1.6 var(--_font-default);
  color: var(--t-bright);
}

.mxd-swiper-pagination-fraction.opposite {
  color: var(--t-opp-bright);
}

.swiper-testimonials__controls {
  position: relative;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 3rem;
  padding: 0 1.5rem;
}

.swiper-testimonials__controls .mxd-slider-btn {
  position: relative;
  bottom: auto;
  width: auto;
  height: auto;
  margin: 0;
}

.swiper-testimonials__controls .mxd-slider-btn-round-prev {
  left: auto;
}

.swiper-testimonials__controls .mxd-slider-btn-round-next {
  left: auto;
}

.swiper-testimonials__controls .mxd-swiper-pagination-fraction {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
}

@media only screen and (min-width: 992px) {
  .swiper-testimonials__controls {
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    padding: 0;
  }
}

/* ------------------------------------------------*/
/* Features - Testimonials Style #01 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Testimonials Style #02 Start */
/* ------------------------------------------------*/
.testimonials-slider-2 {
  position: relative;
  height: auto;
}

.swiper-testimonials-2 {
  position: relative;
  height: 100%;
  padding-bottom: 7rem;
}

@media only screen and (min-width: 1200px) {
  .swiper-testimonials-2.no-padding {
    padding-bottom: 0;
  }
}

.swiper-slide.no-blur {
  -webkit-filter: blur(0);
  filter: blur(0);
}

.mxd-testimonials-image {
  position: relative;
}

.mxd-testimonials-image__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-testimonials-image__content {
    padding-right: 6rem;
    padding-bottom: 9.6rem;
  }
}

.mxd-testimonials-image__img {
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .mxd-testimonials-image__img {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.mxd-testimonials-image__author {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-image__author {
    gap: 3rem;
  }
}

.mxd-testimonials-image__avatar {
  width: 8rem;
  height: 8rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}

.mxd-testimonials-image__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-image__avatar {
    width: 12rem;
    height: 12rem;
  }
}

.mxd-testimonials-image__info {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.6rem;
  width: -moz-calc(100% - 9.5rem);
  width: calc(100% - 9.5rem);
}

@media only screen and (min-width: 768px) {
  .mxd-testimonials-image__info {
    width: auto;
  }
}

.mxd-testimonials-image__position {
  line-height: 1.2;
}

.mxd-testimonials-image__rating {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.mxd-testimonials-image__rating i {
  display: block;
  font-size: 1.8rem;
  color: var(--t-bright);
}

.mxd-testimonials-image__rating.opposite i {
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 1600px) {
  .mxd-testimonials-image__rating i {
    font-size: 2rem;
  }
}

.mxd-testimonials-image__text {
  margin-bottom: 6rem;
}

.mxd-testimonials-image__text p {
  margin-bottom: 3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-testimonials-image__text {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------*/
/* Features - Testimonials Style #02 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Partners Cards Start */
/* ------------------------------------------------*/
.mxd-partners-cards {
  position: relative;
}

.mxd-partners-cards__item {
  position: relative;
  height: 250px;
}

.mxd-partners-cards__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mxd-partners-cards__inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  z-index: -1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
}

.no-touch .mxd-partners-cards__inner:hover::before {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.no-touch .mxd-partners-cards__inner:hover .mxd-partners-cards__logo img {
  opacity: 1;
}

.mxd-partners-cards__logo {
  width: 170px;
  height: auto;
}

.mxd-partners-cards__logo img {
  opacity: 0.6;
  -webkit-transition: opacity var(--_animspeed-slow) ease;
  -moz-transition: opacity var(--_animspeed-slow) ease;
  transition: opacity var(--_animspeed-slow) ease;
}

/* ------------------------------------------------*/
/* Features - Partners Cards End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Tech Stack Cards Start */
/* ------------------------------------------------*/
.mxd-tech-stack-cards {
  position: relative;
}

.mxd-tech-stack-cards.grid-cards {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-tech-stack-cards.grid-cards {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-tech-stack-cards.grid-cards {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.mxd-tech-stack-cards__item {
  position: relative;
}

.mxd-tech-stack-cards__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.6rem;
  width: 100%;
  height: 100%;
  padding: 3rem;
}

.mxd-tech-stack-cards__inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  z-index: -1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
}

.no-touch .mxd-tech-stack-cards__inner:hover::before {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.mxd-tech-stack-cards__inner-v2 {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  height: 100%;
  padding: 3rem 1rem;
}

.mxd-tech-stack-cards__inner-v2::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  z-index: -1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier);
}

.no-touch .mxd-tech-stack-cards__inner-v2:hover::before {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

@media only screen and (min-width: 768px) {
  .mxd-tech-stack-cards__inner-v2 {
    gap: 2.2rem;
    padding: 4rem 1rem;
  }
}

.mxd-tech-stack-cards__inner-v3 {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  height: 100%;
  padding: 3rem 4rem;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
}

@media only screen and (min-width: 768px) {
  .mxd-tech-stack-cards__inner-v3 {
    gap: 2.2rem;
    padding: 4rem 6rem;
  }
}

.mxd-tech-stack-cards__logo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  -moz-border-radius: var(--_radius-pt-m);
  border-radius: var(--_radius-pt-m);
  background-color: var(--accent);
  color: var(--t-opp-bright);
}

.mxd-tech-stack-cards__logo svg,
.mxd-tech-stack-cards__logo img {
  display: block;
  width: 4.4rem;
  height: auto;
}

.mxd-tech-stack-cards__logo svg {
  fill: currentColor;
}

.mxd-tech-stack-cards__icon {
  position: relative;
  height: 7rem;
}

.mxd-tech-stack-cards__icon img {
  width: auto;
  height: 100%;
}

@media only screen and (min-width: 768px) {
  .mxd-tech-stack-cards__icon {
    height: 9rem;
  }
}

/* ------------------------------------------------*/
/* Features - Tech Stack Cards End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Blog Preview Start */
/* ------------------------------------------------*/
.mxd-blog-preview {
  position: relative;
}

.mxd-blog-preview__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-bottom: 3.2rem;
}

.mxd-blog-preview__item:last-of-type {
  padding-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-blog-preview__item {
    padding-bottom: 4.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-blog-preview__item {
    padding-bottom: 0;
  }
}

.mxd-blog-preview__media {
  display: block;
  position: relative;
  height: 460px;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.no-touch .mxd-blog-preview__media:hover .mxd-preview-hover {
  opacity: 1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media only screen and (min-width: 768px) {
  .mxd-blog-preview__media {
    height: 600px;
    margin-bottom: 2.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-blog-preview__media {
    height: 460px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-blog-preview__media {
    height: 600px;
  }
}

.mxd-blog-preview__image {
  position: relative;
  width: 100%;
  height: 460px;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

.mxd-blog-preview__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-blog-preview__image {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-blog-preview__image {
    height: 460px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-blog-preview__image {
    height: 600px;
  }
}

.mxd-blog-preview__tags {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.6rem 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

@media only screen and (min-width: 768px) {
  .mxd-blog-preview__tags {
    padding: 3.6rem 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-blog-preview__tags {
    gap: 1.4rem;
  }
}

.mxd-blog-preview__data {
  padding: 0 3rem;
}

.mxd-blog-preview__data a {
  display: inline;
  font: normal var(--fw-regular) 2.2rem/1.2 var(--_font-accent);
  line-height: 1.2;
  color: var(--t-medium);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .mxd-blog-preview__data a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

.mxd-blog-preview__data a span {
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--t-bright);
}

.mxd-blog-preview__data p {
  font: normal var(--fw-regular) 2.2rem/1.2 var(--_font-accent);
}

@media only screen and (min-width: 768px) {
  .mxd-blog-preview__data {
    padding: 0 4rem;
  }
}

@media only screen and (min-width: 1600px) {

  .mxd-blog-preview__data p,
  .mxd-blog-preview__data a {
    font-size: 3rem;
  }
}

/* ------------------------------------------------*/
/* Features - Blog Preview End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Accordion Start */
/* ------------------------------------------------*/
.mxd-accordion {
  position: relative;
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .mxd-accordion>.mxd-accordion__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .mxd-accordion:hover>.mxd-accordion__item:not(:hover) {
    opacity: 0.2;
  }
}

.mxd-accordion__item {
  position: relative;
  cursor: pointer;
  margin-top: -2px;
}

.mxd-accordion__item:first-of-type {
  margin-top: 0;
}

.mxd-accordion__divider {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--st-bright);
}

.mxd-accordion__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 0 3.6rem 0;
  overflow: hidden;
  display: none;
}

@media only screen and (min-width: 1200px) {
  .mxd-accordion__content {
    padding: 0 0 3.4rem 0;
  }
}

.mxd-accordion__title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3rem 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-accordion__title {
    padding: 3rem 0 3.4rem 0;
  }
}

.mxd-accordion__arrow {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--t-bright);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  will-change: transform;
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

@media only screen and (min-width: 1200px) {
  .mxd-accordion__arrow {
    font-size: 3rem;
  }
}

.accordion-rotate {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

/* ------------------------------------------------*/
/* Features - Accordion End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Pricing Cards Start */
/* ------------------------------------------------*/
.mxd-pricing-table {
  position: relative;
}

.mxd-pricing-table__item {
  position: relative;
}

.mxd-pricing-table__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  padding: 3rem;
  -webkit-transition: -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier);
  transition: -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier);
  -moz-transition: box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier);
  transition: box-shadow var(--_animspeed-slow) var(--_animbezier);
  transition: box-shadow var(--_animspeed-slow) var(--_animbezier), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier);
}

.no-touch .mxd-pricing-table__inner:hover {
  -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
}

@media only screen and (min-width: 1200px) {
  .mxd-pricing-table__inner {
    height: 100%;
    padding: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pricing-table__inner {
    padding: 5rem;
  }
}

.mxd-pricing-table__tag {
  position: absolute;
  top: -1.6rem;
  left: 3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-pricing-table__tag {
    left: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-pricing-table__tag {
    left: 5rem;
  }
}

.mxd-pricing-table__data {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-pricing-table__data {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.pricing-data__header {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.pricing-header__title {
  margin-bottom: 1rem;
}

.pricing-header__descr {
  font-size: 1.8rem;
}

@media only screen and (min-width: 1600px) {
  .pricing-header__descr {
    font-size: 1.8rem;
  }
}

.pricing-data__info {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.pricing-data__price {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.pricing-data__num {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 0.4rem;
}

.pricing-data__currency,
.pricing-data__period {
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-muted);
}

@media only screen and (min-width: 1600px) {

  .pricing-data__currency,
  .pricing-data__period {
    font-size: 2.2rem;
  }
}

.pricing-data__amount {
  font: normal var(--fw-semibold) 7.4rem/0.9 var(--_font-accent);
  letter-spacing: -0.2rem;
  color: var(--t-bright);
}

.pricing-data__btnholder {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1.8rem;
}

.pricing-data__divider {
  width: 100%;
  height: 0.2rem;
  -moz-border-radius: 0.2rem;
  border-radius: 0.2rem;
  background-color: var(--base-opp);
}

.mxd-pricing-table__plan {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.7rem;
}

.pricing-plan__caption {
  font-size: 1.8rem;
}

@media only screen and (min-width: 1600px) {
  .pricing-plan__caption {
    font-size: 1.8rem;
  }
}

.mxd-pricing-table__link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  width: 100%;
}

.mxd-pricing-table__link a {
  font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: -moz-linear-gradient(left, var(--t-bright), var(--t-bright)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, var(--t-bright), var(--t-bright)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch .mxd-pricing-table__link a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

/* ------------------------------------------------*/
/* Features - Pricing Cards End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Team Cards Start */
/* ------------------------------------------------*/
.mxd-team-cards {
  position: relative;
}

.mxd-team-cards__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-bottom: 3.5rem;
}

.mxd-team-cards__item:last-of-type {
  padding-bottom: 0;
}

.mxd-team-cards__item:last-of-type.padding-bottom-mobile {
  padding-bottom: 3.5rem;
}

.mxd-team-cards__item.no-padding-bottom {
  padding-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-team-cards__item {
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-team-cards__item {
    padding-bottom: 0;
  }

  .mxd-team-cards__item:last-of-type {
    padding-bottom: 0;
  }

  .mxd-team-cards__item:last-of-type.padding-bottom-mobile {
    padding-bottom: 0;
  }

  .mxd-team-cards__item.padding-bottom-desktop {
    padding-bottom: 3.5rem;
  }
}

.mxd-team-cards__h2-block {
  position: relative;
}

.mxd-team-cards__h2-block.right-block {
  padding-left: 0;
}

.mxd-team-cards__h2-block.left-block {
  padding-right: 0;
}

@media only screen and (min-width: 1200px) {
  .mxd-team-cards__h2-block.right-block {
    padding-left: 3rem;
  }

  .mxd-team-cards__h2-block.left-block {
    padding-right: 3rem;
  }
}

.mxd-team-cards__media {
  position: relative;
  height: 460px;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  margin-bottom: 1.7rem;
  overflow: hidden;
}

.mxd-team-cards__media.no-margin {
  margin-bottom: 0;
}

.mxd-team-cards__media.overflow-visible {
  overflow: visible;
}

@media only screen and (min-width: 768px) {
  .mxd-team-cards__media {
    height: 460px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-team-cards__media {
    height: 460px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-team-cards__media {
    height: 600px;
  }
}

.mxd-team-cards__career {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
}

.mxd-team-cards__career::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--base-tint);
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
  z-index: -1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-slow), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-slow), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-slow), box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow), box-shadow var(--_animspeed-slow) var(--_animbezier);
  transition: transform var(--_animspeed-slow), box-shadow var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow), -moz-transform var(--_animspeed-slow), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier);
}

.no-touch .mxd-team-cards__career:hover::before {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
  -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12);
}

.career__image {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 256px;
  height: auto;
  padding-bottom: 4rem;
}

.career__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.6rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .career__caption {
    padding: 2.6rem;
  }
}

.mxd-team-cards__photo {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

.mxd-team-cards__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-team-cards__photo {
    height: 460px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-team-cards__photo {
    height: 460px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-team-cards__photo {
    height: 600px;
  }
}

.mxd-team-cards__socials {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.6rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .mxd-team-cards__socials {
    padding: 2.6rem;
  }
}

.mxd-team-cards__info {
  padding: 0 1.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-team-cards__info {
    padding: 0 2.6rem;
  }
}

/* ------------------------------------------------*/
/* Features - Team Cards End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Values Start */
/* ------------------------------------------------*/
.mxd-values {
  position: relative;
}

.mxd-values__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-values__item.mobile-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

@media only screen and (min-width: 1200px) {
  .mxd-values__item.mobile-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.mxd-values__lists {
  padding: 6rem 3rem 0 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-values__lists {
    padding: 6.4rem 4rem 0 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-values__lists {
    padding: 0;
  }
}

.mxd-values__lists-item {
  margin-bottom: 2.6rem;
}

.mxd-values__lists-item:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 576px) {
  .mxd-values__lists-item {
    margin-bottom: 0;
  }
}

.mxd-values__image {
  position: relative;
  height: 460px;
  -moz-border-radius: var(--_radius-l);
  border-radius: var(--_radius-l);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

@media only screen and (min-width: 768px) {
  .mxd-values__image {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-values__image.image-large-desktop {
    height: 930px;
  }
}

.mxd-values__descr {
  padding: 5.4rem 3rem 5.9rem 3rem;
}

.mxd-values__descr.has-top-list {
  padding: 4.6rem 3rem 5.9rem 3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-values__descr {
    padding: 6.4rem 4rem 6.9rem 4rem;
  }

  .mxd-values__descr.has-top-list {
    padding: 5.5rem 4rem 6.9rem 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-values__descr {
    padding: 6.4rem 4rem 0 4rem;
  }

  .mxd-values__descr.has-top-list {
    padding: 6.4rem 4rem 0 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-values__descr {
    padding: 6rem 4rem 0 4rem;
  }

  .mxd-values__descr.has-top-list {
    padding: 6rem 4rem 0 4rem;
  }
}

/* ------------------------------------------------*/
/* Features - Values End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features - Project Details Start */
/* ------------------------------------------------*/
.mxd-project {
  position: relative;
  width: 100%;
  min-width: 360px;
}

.mxd-project__block {
  position: relative;
  margin-top: 12.3rem;
  margin-bottom: 13.1rem;
}

.mxd-project__block.pre-grid {
  margin-bottom: 10.1rem;
}

.mxd-project__block.no-margin {
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-project__block {
    margin-top: 13.1rem;
    margin-bottom: 15.1rem;
  }

  .mxd-project__block.pre-grid {
    margin-bottom: 12.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-project__block {
    margin-top: 14.3rem;
    margin-bottom: 15.1rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project__block {
    margin-top: 18.3rem;
    margin-bottom: 19rem;
  }

  .mxd-project__block.pre-grid {
    margin-bottom: 16.1rem;
  }
}

.mxd-project__subtitle {
  position: relative;
}

.mxd-project__paragraph {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-project__paragraph {
    margin-top: 1.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-project__paragraph {
    margin-top: 0.4rem;
    gap: 3rem;
  }

  .mxd-project__paragraph.medium-text {
    margin-top: 0.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project__paragraph {
    max-width: 855px;
  }

  .mxd-project__paragraph.medium-text {
    margin-top: 0.6rem;
  }
}

.mxd-project__controls {
  margin-top: 1.3rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-project__controls {
    margin-top: 1.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project__controls {
    margin-top: 1.7rem;
  }
}

.mxd-project__client {
  margin-top: 0.2rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-project__client {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project__client {
    margin-top: 0.2rem;
  }
}

.mxd-project-cards {
  position: relative;
}

.mxd-project-cards__item {
  position: relative;
  height: auto;
  min-height: 320px;
  aspect-ratio: 16 / 9;
}

@media only screen and (min-width: 768px) {
  .mxd-project-cards__item {
    min-height: 350px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project-cards__item {
    min-height: 450px;
  }
}

.mxd-project-cards__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -moz-border-radius: var(--_radius-m);
  border-radius: var(--_radius-m);
}

.mxd-project-cards__inner img,
.mxd-project-cards__inner video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -moz-border-radius: inherit;
  border-radius: inherit;
}

.mxd-project__nav {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 13.3rem;
}

@media only screen and (min-width: 768px) {
  .mxd-project__nav {
    padding-bottom: 15.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-project__nav {
    padding-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project__nav {
    padding-bottom: 19.1rem;
  }
}

.mxd-project__divider {
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: 0.2rem;
  background-color: var(--base-opp);
}

.mxd-project__navitem {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mxd-project__navitem.left {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.mxd-project__navitem.right {
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  text-align: right;
}

.mxd-project__link {
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.mxd-project__link.opposite {
  color: var(--t-opp-bright);
}

.mxd-project__link span {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}

.no-touch .mxd-project__link span:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

@media only screen and (min-width: 768px) {
  .mxd-project__link {
    font-size: 3.4rem;
  }
}

/* ------------------------------------------------*/
/* Features - Project Details End */
/* ------------------------------------------------*/
/* ============================================ */
/* Video Lazy Loading Skeleton Styles           */
/* ============================================ */
.video-skeleton-loading,
.lazy-video:not(.is-loaded) {
  position: relative;
  overflow: hidden;
  background: #1e1e1e;
  /* Dark fallback */
  min-height: 200px;
}

.video-skeleton-loading::before,
.lazy-video:not(.is-loaded)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 25%,
      rgba(255, 255, 255, 0.08) 50%,
      transparent 75%);
  animation: skeleton-shimmer 2s infinite cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 10;
  pointer-events: none;
}

.lazy-video {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.lazy-video.is-loaded {
  opacity: 1;
}

@keyframes skeleton-shimmer {
  0% {
    left: -50%;
  }

  100% {
    left: 150%;
  }
}

/* ------------------------------------------------*/
/* Hover Play Video Custom Integration Start */
/* ------------------------------------------------*/
.hover-play-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--base-shade);
}

.hover-play-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity var(--_animspeed-slow) var(--_animbezier), transform var(--_animspeed-slow) var(--_animbezier);
}

.hover-play-wrapper video.hover-play-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--_animspeed-slow) var(--_animbezier), transform var(--_animspeed-slow) var(--_animbezier);
  pointer-events: none;
  /* Let the wrapper handle the hover event */
}

.hover-play-wrapper:hover img {
  opacity: 0;
  transform: scale(0.95);
}

.hover-play-wrapper:hover video.hover-play-video {
  opacity: 1;
  transform: scale(1);
}

/* Recent Work (pinned projects): show full poster, no crop.
   Posters here aren't all 16:9, so contain keeps text/faces intact;
   the wrapper background fills the letterbox area. */
.mxd-pinned-projects .hover-play-wrapper img,
.mxd-pinned-projects .hover-play-wrapper video.hover-play-video {
  object-fit: contain;
}

/* ------------------------------------------------*/
/* Hover Play Video Custom Integration End */

/* ------------------------------------------------*/
/* Premium Case Study Enhancements Start */
/* ------------------------------------------------*/
.ie-case-hero-video,
.ie-case-feature-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--base-shade);
}

.ie-case-hero-video {
  aspect-ratio: 16 / 9;
  min-height: 320px;
}

.ie-case-feature-video {
  height: 100%;
  min-height: 320px;
}

.ie-case-hero-video video,
.ie-case-feature-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ie-case-kicker {
  margin-bottom: 1.8rem;
  font: normal var(--fw-medium) 1.2rem/1.2 var(--_font-default);
  text-transform: uppercase;
  letter-spacing: 0.16rem;
  color: var(--t-muted);
}

.ie-case-stat-grid,
.ie-case-language-grid,
.ie-case-proof-grid {
  display: grid;
  gap: clamp(1.8rem, 1.6vw, 2.6rem);
}

.ie-case-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ie-case-language-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ie-case-proof-grid {
  grid-template-columns: 1fr;
}

/* --- Premium cards: stats / languages / proof --- */
.ie-case-stat,
.ie-case-language,
.ie-case-proof {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  padding: 3rem 2.8rem;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(var(--accent-rgb), 0.05) 0%, transparent 45%),
    linear-gradient(165deg, var(--base-tint) 0%, var(--base-shade) 135%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 22px 48px -34px rgba(0, 0, 0, 0.6);
  transition: transform 0.55s var(--_animbezier),
              border-color 0.55s var(--_animbezier),
              box-shadow 0.55s var(--_animbezier);
}

/* soft accent hairline across the top edge */
.ie-case-stat::before,
.ie-case-language::before,
.ie-case-proof::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.8rem;
  right: 2.8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.45), transparent);
  opacity: 0.55;
  transition: opacity 0.55s var(--_animbezier);
  z-index: 2;
}

/* warm accent wash that lifts in on hover */
.ie-case-stat::after,
.ie-case-language::after,
.ie-case-proof::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(95% 120% at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%);
  opacity: 0;
  transition: opacity 0.55s var(--_animbezier);
  z-index: -1;
}

.ie-case-stat:hover,
.ie-case-language:hover,
.ie-case-proof:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.65);
}

.ie-case-stat:hover::before,
.ie-case-language:hover::before,
.ie-case-proof:hover::before { opacity: 1; }

.ie-case-stat:hover::after,
.ie-case-language:hover::after,
.ie-case-proof:hover::after { opacity: 1; }

.ie-case-stat span,
.ie-case-language span,
.ie-case-proof span {
  color: var(--t-muted);
  line-height: 1.5;
}

/* --- Stat cards — luxe pass --- */
.ie-case-stat {
  justify-content: space-between;
  min-height: clamp(200px, 19vw, 240px);
  padding: clamp(2.6rem, 2.4vw, 3.4rem);
}

.ie-case-stat:hover {
  box-shadow: 0 36px 72px -38px rgba(0, 0, 0, 0.72),
              0 0 0 1px rgba(var(--accent-rgb), 0.14);
}

/* hero number with gradient fill + an accent underline that extends on hover */
.ie-case-stat strong {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(1.8rem, 2vw, 2.6rem);
  padding-bottom: 1.4rem;
  font: normal var(--fw-medium) clamp(4.6rem, 5.4vw, 6rem)/0.85 var(--_font-accent);
  letter-spacing: -0.03em;
  color: var(--t-bright);
  background: linear-gradient(172deg, var(--t-bright) 18%, color-mix(in srgb, var(--t-bright) 58%, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ie-case-stat strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.2rem;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.55s var(--_animbezier);
}

.ie-case-stat:hover strong::after { width: 5.2rem; }

.ie-case-stat span {
  max-width: 24ch;
  font-size: 1.5rem;
}

/* --- Language cards — luxe redesign --- */
.ie-case-language-grid { counter-reset: lang; }

.ie-case-language {
  counter-increment: lang;
  justify-content: space-between;
  min-height: clamp(210px, 20vw, 252px);
  padding: clamp(2.6rem, 2.4vw, 3.4rem);
  background:
    radial-gradient(150% 130% at 100% -12%, rgba(var(--accent-rgb), 0.12) 0%, transparent 52%),
    linear-gradient(158deg, var(--base-tint) 0%, var(--base-shade) 150%);
}

.ie-case-language:hover {
  box-shadow: 0 36px 72px -38px rgba(0, 0, 0, 0.72),
              0 0 0 1px rgba(var(--accent-rgb), 0.14);
}

/* signature index numeral, top-right — replaces the shared top hairline */
.ie-case-language::before {
  content: counter(lang, decimal-leading-zero);
  top: clamp(2.2rem, 2.2vw, 3rem);
  right: clamp(2.4rem, 2.2vw, 3.4rem);
  left: auto;
  width: auto;
  height: auto;
  font: normal var(--fw-medium) 1.5rem/1 var(--_font-accent);
  letter-spacing: 0.06em;
  color: rgba(var(--accent-rgb), 0.55);
  background: none;
  opacity: 1;
  transition: color 0.55s var(--_animbezier), transform 0.55s var(--_animbezier);
}

.ie-case-language:hover::before {
  color: var(--accent);
  transform: translateY(-2px);
}

/* English overline */
.ie-case-language em {
  display: block;
  margin-bottom: clamp(1.2rem, 1.4vw, 1.8rem);
  font-style: normal;
  font-size: 1.15rem;
  letter-spacing: 0.22rem;
  text-transform: uppercase;
  color: var(--t-muted);
}

/* native-script hero glyph with a soft gradient fill */
.ie-case-language strong {
  display: block;
  margin: 0 0 auto;
  padding-bottom: 0.4rem;
  font: normal var(--fw-medium) clamp(3rem, 4.2vw, 4.4rem)/1.15 var(--_font-accent);
  letter-spacing: -0.01em;
  color: var(--t-bright);
  background: linear-gradient(176deg, var(--t-bright) 14%, color-mix(in srgb, var(--t-bright) 62%, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.55s var(--_animbezier);
}

.ie-case-language:hover strong { transform: translateY(-3px); }

/* descriptor with a live-pulse dot and a hairline that extends on hover */
.ie-case-language span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: clamp(1.6rem, 1.8vw, 2.2rem);
  padding-top: clamp(1.6rem, 1.8vw, 2.2rem);
  font-size: 1.4rem;
  color: var(--t-muted);
}

.ie-case-language span::before {
  content: "";
  position: static;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  animation: ie-lang-pulse 2.8s ease-out infinite;
}

.ie-case-language span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.8rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.55s var(--_animbezier);
}

.ie-case-language:hover span::after { width: 4.6rem; }

@keyframes ie-lang-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 0.7rem rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ie-case-language span::before { animation: none; }
}

/* Proof card */
.ie-case-proof strong {
  display: block;
  margin-bottom: 1.1rem;
  font: normal var(--fw-medium) 2rem/1.25 var(--_font-default);
  color: var(--t-bright);
}

/* --- Reel cards --- */
.ie-case-reel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 1.6vw, 2.6rem);
}

.ie-case-reel-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background: linear-gradient(165deg, var(--base-tint), var(--base-shade));
  transition: transform 0.55s var(--_animbezier),
              border-color 0.55s var(--_animbezier),
              box-shadow 0.55s var(--_animbezier);
}

.ie-case-reel-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.65);
}

.ie-case-reel-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-top-left-radius: var(--_radius-m);
  border-top-right-radius: var(--_radius-m);
}

.ie-case-reel-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.9rem 2.2rem;
  color: var(--t-muted);
}

.ie-case-reel-card__caption strong {
  color: var(--t-bright);
  font-weight: var(--fw-medium);
}

/* --- Reel mini-player controls --- */
.ie-reel-stage {
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--_radius-m);
  border-top-right-radius: var(--_radius-m);
  background: var(--base-shade);
  cursor: pointer;
}

.ie-reel-stage video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ie-reel-big {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6.4rem;
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.4s var(--_animbezier), transform 0.4s var(--_animbezier), background 0.3s;
  z-index: 3;
}

.ie-reel-stage.is-paused .ie-reel-big {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ie-reel-big:hover {
  background: var(--accent);
  color: var(--base-shade);
}

.ie-reel-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.15) 60%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--_animbezier), transform 0.4s var(--_animbezier);
  z-index: 4;
}

.ie-reel-stage:hover .ie-reel-bar,
.ie-reel-stage.is-paused .ie-reel-bar,
.ie-reel-stage.is-seeking .ie-reel-bar {
  opacity: 1;
  transform: none;
}

.ie-reel-btn {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}

.ie-reel-btn:hover {
  background: #fff;
  color: var(--base-shade);
  transform: translateY(-1px);
}

.ie-reel-btn.is-on {
  background: var(--accent);
  color: var(--base-shade);
}

.ie-reel-seek {
  position: relative;
  flex: 1 1 auto;
  height: 1.8rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ie-reel-seek::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}

.ie-reel-seek__fill {
  position: relative;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
}

.ie-reel-seek__fill::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}

.ie-reel-stage:hover .ie-reel-seek__fill::after,
.ie-reel-stage.is-seeking .ie-reel-seek__fill::after {
  opacity: 1;
}

/* touch devices: keep the bar visible since there's no hover */
@media (hover: none) {
  .ie-reel-bar {
    opacity: 1;
    transform: none;
  }
}

/* Section eyebrow + heading for the premium case sections */
.ie-case-head {
  margin-bottom: clamp(2.4rem, 4vw, 4rem);
}

.ie-case-head h2 {
  margin: 0;
}

.ie-case-lead {
  margin: 1.8rem 0 0;
  max-width: 64rem;
  color: var(--t-muted);
  line-height: 1.6;
}

.ie-case-lead strong {
  color: var(--t-bright);
  font-weight: var(--fw-medium);
}

/* "More Projects" related grid with hover-play previews */
.ie-related-grid {
  display: grid;
  gap: clamp(1.8rem, 1.6vw, 2.6rem);
  grid-template-columns: 1fr;
}

.ie-related-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--_radius-m);
  overflow: hidden;
}

.ie-related-item .mxd-project-item__name {
  margin-top: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .ie-case-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ie-case-reel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ie-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 1200px) {
  .ie-case-language-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ie-case-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ie-case-hero-video {
    min-height: 520px;
  }
}

/* --- Campaign art collage --- */
/* Mobile: 2-col grid, every tile a clean 16:9 (feature spans full width). */
.ie-case-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.6vw, 1rem);
}

.ie-case-collage__tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background: var(--base-shade);
  transition: border-color 0.55s var(--_animbezier),
              box-shadow 0.55s var(--_animbezier);
}

.ie-case-collage__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--_animbezier);
}

.ie-case-collage__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.3));
  opacity: 0;
  transition: opacity 0.55s var(--_animbezier);
  pointer-events: none;
}

.ie-case-collage__tile:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.65);
}

.ie-case-collage__tile:hover img {
  transform: scale(1.06);
}

.ie-case-collage__tile:hover::after {
  opacity: 1;
}

/* mobile: full-width feature, then supporting tiles paired 2-up */
.ie-case-collage__tile--hero { grid-column: 1 / 3; }

/* Desktop: 4x2 cell grid at a 32:9 footprint, so every cell is exactly 16:9.
   The hero occupies a 2x2 block, which stays 16:9 too, so nothing is cropped. */
@media only screen and (min-width: 768px) {
  .ie-case-collage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 32 / 9;
    gap: clamp(0.7rem, 1.1vw, 1.1rem);
  }
  .ie-case-collage__tile {
    aspect-ratio: auto;
  }
  .ie-case-collage__tile--hero   { grid-column: 1 / 3; grid-row: 1 / 3; }
  .ie-case-collage__tile--jars   { grid-column: 3 / 4; grid-row: 1 / 2; }
  .ie-case-collage__tile--spread { grid-column: 4 / 5; grid-row: 1 / 2; }
  .ie-case-collage__tile--dish-a { grid-column: 3 / 4; grid-row: 2 / 3; }
  .ie-case-collage__tile--dish-b { grid-column: 4 / 5; grid-row: 2 / 3; }
}
/* ------------------------------------------------*/
/* Premium Case Study Enhancements End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Headline wrapping on narrow screens Start        */
/* ------------------------------------------------*/
/* At display sizes a single long word ("Zero-Downtime", "Optimization",
   "Screenwriting:") can be wider than a 390px phone on its own. Because
   body sets overflow-x:unset, that one word drags a horizontal scrollbar
   across the whole page — seen on the blog titles and a few inner-page
   headlines. break-word only engages when the word genuinely cannot fit,
   so normal headline ragging is untouched. */
h1, h2, h3, h4, h5, h6,
.h1-small,
.inner-headline__title {
  overflow-wrap: break-word;
}
/* ------------------------------------------------*/
/* Headline wrapping on narrow screens End          */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Reveal overshoot containment Start               */
/* ------------------------------------------------*/
/* The .anim-uni-scale-in* reveals park a block at scale(1.2) until it
   scrolls into view (js/app.js). On a full-width block that 20% overshoot
   pokes ~100px past the viewport at 1920 and, because body sets
   overflow-x:unset, it spawns a real horizontal scrollbar. Blocks that sit
   below the fold and never get scrolled to keep that scale forever, so the
   sideways scroll is permanent, not a flash during load — which is why it
   clears only once you scroll far enough to trigger the reveal.

   Clip the horizontal overshoot at the section level. `clip` rather than
   `hidden` on purpose: it doesn't create a scroll container, so sticky
   children and the page's vertical scroll behaviour are untouched.

   css/lipsmatch.css already carried this fix scoped to `.mxd-section:has(.lm)`;
   this generalises it to every section that hosts one of these reveals. */
.mxd-section:has(.anim-uni-scale-in),
.mxd-section:has(.anim-uni-scale-in-left),
.mxd-section:has(.anim-uni-scale-in-right) {
  overflow-x: clip;
}
/* ------------------------------------------------*/
/* Reveal overshoot containment End                 */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Scroll cue (".ie-scroll-cue") Start              */
/* ------------------------------------------------*/
/* The fold nudge, built by js/scroll-cue.js on every page: a glass chip
   (same language as .hero-tile__tag) with "scroll" microcopy and a
   dipping arrow, fixed to the viewport bottom. The chip carries its own
   translucent backdrop because it floats over whatever crosses the fold
   and a bare cue collides with that ink. It appears a beat after the
   loader curtain lifts, hides once the visitor is past the fold, and
   comes back if they return to the top. Lives only in JS, so no-JS
   visitors never get a pill they can't dismiss.
   Lives in main.css because it is the one stylesheet every page loads,
   the marketing site and the lipsmatch sub-site alike. */

.ie-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2.1rem;
  margin: 0;
  border-radius: 3rem;
  border: 1px solid color-mix(in srgb, var(--t-bright) 30%, transparent);
  background: rgba(var(--base-rgb), 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

.ie-scroll-cue.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* going away: a touch quicker than the entrance. The node stays in the
   DOM — the visitor can scroll back to the top and call it up again. */
.ie-scroll-cue.is-off {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition-duration: 0.45s;
}

/* a slow accent ring that blooms off the chip every few seconds —
   the "notice me" beat the chip itself is too polite to carry */
/* a slow accent ring that blooms off the chip every few seconds —
   the "notice me" beat the chip itself is too polite to carry */
.ie-scroll-cue::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(var(--accent-rgb), 0.65);
  opacity: 0;
  pointer-events: none;
}

.ie-scroll-cue.is-on::before {
  animation: ie-cue-ping 3.4s cubic-bezier(0.16, 1, 0.3, 1) 1.2s infinite;
}

/* The ring must be INVISIBLE while it still sits on the chip's own border:
   at scale(1) the two outlines are a hair apart and read as one doubled
   border rather than a pulse. So it starts fully transparent and only
   fades up once it has cleared the edge, then fades out as it expands. */
@keyframes ie-cue-ping {
  0%        { opacity: 0;    transform: scale(1); }
  14%       { opacity: 0.75; transform: scale(1.07); }
  60%, 100% { opacity: 0;    transform: scale(1.3); }
}

.ie-scroll-cue:hover,
.ie-scroll-cue:focus-visible {
  border-color: color-mix(in srgb, var(--t-bright) 55%, transparent);
}

.ie-scroll-cue:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--t-bright) 45%, transparent);
  outline-offset: 3px;
}

.ie-scroll-cue__label {
  font: normal 500 1.2rem/1 var(--_font-accent);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--t-bright) 88%, transparent);
  transition: color 0.4s ease;
}

.ie-scroll-cue:hover .ie-scroll-cue__label,
.ie-scroll-cue:focus-visible .ie-scroll-cue__label {
  color: var(--t-bright);
}

.ie-scroll-cue__arrow {
  font-size: 1.6rem;
  line-height: 1;
  color: rgb(var(--accent-rgb));
  animation: ie-cue-dip 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes ie-cue-dip {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* phones: the chip sits close to the thumb rail and competes with the
   to-top button, so it rides tighter and lighter */
@media (max-width: 767px) {
  .ie-scroll-cue {
    bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
    gap: 0.8rem;
    padding: 0.9rem 1.6rem;
  }

  .ie-scroll-cue__label {
    font-size: 1.05rem;
    letter-spacing: 2px;
  }

  .ie-scroll-cue__arrow {
    font-size: 1.4rem;
  }
}

/* landscape phones have almost no vertical room — the label goes and the
   arrow alone carries the message */
@media (max-height: 460px) and (orientation: landscape) {
  .ie-scroll-cue {
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    padding: 0.7rem 1rem;
    gap: 0;
  }

  .ie-scroll-cue__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ie-scroll-cue__arrow {
    animation: none;
    opacity: 1;
  }

  /* stilled, and left fully transparent — a frozen ring would sit on the
     chip's border and be exactly the doubled outline this avoids */
  .ie-scroll-cue.is-on::before {
    animation: none;
    opacity: 0;
  }

  .ie-scroll-cue,
  .ie-scroll-cue.is-on,
  .ie-scroll-cue.is-off {
    transform: translateX(-50%);
    transition: opacity 0.4s ease;
  }
}
/* ------------------------------------------------*/
/* Scroll cue End                                   */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Featured post scrim Start                        */
/* ------------------------------------------------*/
/* The featured card sets light text directly over the post's artwork.
   Campaign stills are often bright and busy, so the title needs a scrim
   that darkens the text side and the bottom edge while leaving the image
   readable. Sits inside the thumb so the content stack stays above it. */
.post-featured__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.5) 42%, rgba(8, 8, 8, 0.1) 78%, rgba(8, 8, 8, 0.22) 100%),
    linear-gradient(to top, rgba(8, 8, 8, 0.6) 0%, rgba(8, 8, 8, 0) 45%);
  pointer-events: none;
}

.post-featured__title,
.post-featured__excerpt p,
.post-featured__meta span {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
/* ------------------------------------------------*/
/* Featured post scrim End                          */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Prose links Start                                */
/* ------------------------------------------------*/
/* The global `a` rule sets no colour, so any link without a class fell
   through to the browser default (blue, purple once visited). These are
   the containers that hold running prose: blog article blocks, the text
   sections on generated service pages, FAQ answers and service copy.
   Scoped to p/li so tag chips and buttons (which nest a classless <a>
   inside a styled span) keep their own treatment. */
.mxd-article__block a:not([class]),
.mxd-block__content p a:not([class]),
.mxd-block__content li a:not([class]),
.mxd-accordion__text a:not([class]),
.svc-desc a:not([class]) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: text-decoration-color 0.25s ease, opacity 0.25s ease;
}

.mxd-article__block a:not([class]):visited,
.mxd-block__content p a:not([class]):visited,
.mxd-block__content li a:not([class]):visited,
.mxd-accordion__text a:not([class]):visited,
.svc-desc a:not([class]):visited {
  color: var(--accent);
}

.mxd-article__block a:not([class]):hover,
.mxd-block__content p a:not([class]):hover,
.mxd-block__content li a:not([class]):hover,
.mxd-accordion__text a:not([class]):hover,
.svc-desc a:not([class]):hover,
.mxd-article__block a:not([class]):focus-visible,
.mxd-block__content p a:not([class]):focus-visible,
.mxd-block__content li a:not([class]):focus-visible,
.mxd-accordion__text a:not([class]):focus-visible,
.svc-desc a:not([class]):focus-visible {
  text-decoration-color: var(--accent);
}

/* Chips and buttons wrap a classless anchor; keep them as designed. */
.tag a:not([class]),
.btn a:not([class]) {
  color: inherit;
  text-decoration: none;
}
/* ------------------------------------------------*/
/* Prose links End                                  */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Prose lists Start                                */
/* ------------------------------------------------*/
/* plugins.css resets every list to `list-style: none`, and only
   .mxd-article__content restores markers. The generated service pages
   render their prose lists in .mxd-block__content, so their bullets and
   numbers were invisible. Restore markers and give the lead-in phrase
   real weight. */
.mxd-block__content ul.t-large {
  list-style: disc outside;
}

.mxd-block__content ol.t-large {
  list-style: decimal outside;
}

/* `t-large` is defined as `p.t-large`, so lists carrying the same class were
   rendering at default body size, far smaller than the paragraphs around
   them. Match the paragraph treatment and give the items room to breathe. */
.mxd-block__content ul.t-large,
.mxd-block__content ol.t-large {
  font-family: var(--_font-accent);
  font-size: 2.1rem;
  line-height: 1.5;
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .mxd-block__content ul.t-large,
  .mxd-block__content ol.t-large {
    font-size: 2.4rem;
  }
}

.mxd-block__content ul.t-large li,
.mxd-block__content ol.t-large li {
  padding-left: 0.3em;
  margin-bottom: 1.4rem;
}

.mxd-block__content ul.t-large li:last-child,
.mxd-block__content ol.t-large li:last-child {
  margin-bottom: 0;
}

.mxd-block__content ul.t-large li::marker,
.mxd-block__content ol.t-large li::marker {
  color: var(--accent);
}

.mxd-block__content li strong,
.mxd-block__content p strong,
.mxd-article__block li strong {
  font-weight: 600;
}

/* Vertical rhythm for the generated prose sections. padding-default alone
   (8rem) reads as cramped at this type scale, and the final section sits
   directly above the booking block, so it needs real separation. */
.mxd-section.ie-prose-section {
  padding-bottom: 8rem;
}

@media only screen and (min-width: 768px) {
  .mxd-section.ie-prose-section {
    padding-bottom: 10rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-section.ie-prose-section {
    padding-bottom: 12.5rem;
  }
}

/* Headings on the generated pages sat hard against the block above them. */
.ie-prose-section .mxd-block__content > h2 {
  margin-top: 0;
}

.ie-prose-section .mxd-block__content > h2 + p,
.ie-prose-section .mxd-block__content > h2 + ul,
.ie-prose-section .mxd-block__content > h2 + ol {
  margin-top: 2.8rem;
}
/* ------------------------------------------------*/
/* Prose lists End                                  */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Article hero height Start                        */
/* ------------------------------------------------*/
/* The template sizes the article hero at up to 760px tall, which pushes
   the opening paragraph below the fold on desktop. Cap it so the image
   sets the scene and the text stays in reach. */
.mxd-article__thumb {
  height: 300px;
}

@media only screen and (min-width: 768px) {
  .mxd-article__thumb {
    height: 380px;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-article__thumb {
    height: 460px;
  }
}
/* ------------------------------------------------*/
/* Article hero height End                          */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Article video embed Start                        */
/* ------------------------------------------------*/
.mxd-article__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--_radius-l);
  overflow: hidden;
  margin: 1.2rem 0 1.8rem;
  background: #000;
}

.mxd-article__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* ------------------------------------------------*/
/* Article video embed End                          */
/* ------------------------------------------------*/