/* ============================================================
   CRAFTON LP - styles.css
   Pixel-perfect extraction from crafton.eu Vue component SCSS
   Source: Nuxt.js 2 SSR codebase components/
   ============================================================ */

/* --- CSS Custom Properties (from utils/colors.scss + animations.scss) --- */
:root {
  --c-white: #ffffff;
  --c-black: #000000;
  --c-dark: #171a21;
  --c-dark-gray: #3b3b3b;
  --c-dark-gray2: #21232b;
  --c-dark-gray4: #2a2f3b;
  --c-light-gray: #e7e8e8;
  --c-light-gray2: #64666a;
  --c-red: #eb0c4e;
  --c-blue: #32c0ca;
  --c-main: var(--c-dark);
  --c-sec: var(--c-white);
  --c-bg-light: #f8f8f8;
  --c-bg-section: #f5f7f9;
  --tr: 0.2s;
  --tr-m: 0.3s;
  --tr-l: 0.4s;
  --tr-slow: 0.8s;

  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

  --f-text: 'Visby CF', Arial, Helvetica, sans-serif;
  --f-title: 'NoeDisplay', 'Times New Roman', Times, serif;
  --f-icons: 'icomoon';
}

/* --- Font Faces (from globals/fonts.scss) --- */
@font-face {
  font-family: 'Visby CF';
  src: url('../fonts/VisbyCF/subset-VisbyCF-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visby CF';
  src: url('../fonts/VisbyCF/subset-VisbyCF-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visby CF';
  src: url('../fonts/VisbyCF/subset-VisbyCF-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visby CF';
  src: url('../fonts/VisbyCF/subset-VisbyCF-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visby CF';
  src: url('../fonts/VisbyCF/subset-VisbyCF-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NoeDisplay';
  src: url('../fonts/NoeDisplay/subset-NoeDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NoeDisplay';
  src: url('../fonts/NoeDisplay/subset-NoeDisplay-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon/icomoon.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Reset (from globals/reset.scss - Meyer) --- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body { line-height: 1; overflow-x: hidden; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
svg, input, textarea, button, select {
  vertical-align: baseline;
  margin: 0; padding: 0; border: 0;
  font-family: inherit; font-size: 100%; outline: none;
}
input, textarea, select, button {
  background: none; border-radius: 0; outline: none; appearance: none;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus, *:focus { outline: 0; text-decoration: none; }
img { border: 0; }

/* --- ImageBox component (from ImageBox.vue) --- */
.imageBox {
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
}
.imageBox__image {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.2s, filter 0.2s;
}
.imageBox--inline {
  display: inline-block;
  width: auto;
  height: auto;
}
.imageBox--inline .imageBox__image {
  width: auto;
  height: auto;
  max-width: 100%;
}
.imageBox--contain .imageBox__image {
  object-fit: contain;
}
.imageBox--aspect .imageBox__image {
  position: absolute;
}

/* --- Base (from globals/document.scss) --- */
html {
  font-family: var(--f-text);
  font-size: 10px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  color: var(--c-dark);
}
@media (min-width: 769px) {
  html { font-size: 8px; }
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
::selection { color: var(--c-white); background-color: var(--c-black); }
button {
  font-family: var(--f-text);
  background-color: transparent;
  border: 0; margin: 0; padding: 0; cursor: pointer;
}
textarea, input { font-family: var(--f-text); background-color: transparent; }
img { max-width: 100%; height: auto; display: block; }

.page {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Container (from globals/document.scss) --- */
.container {
  width: 100%;
  padding: 0 6vw;
}
.container__back {
  margin: 0 -6vw;
}

/* --- Heading (from globals/document.scss) ---
   Source uses max-width breakpoints (descending) */
.heading {
  line-height: 1.279;
  font-size: clamp(2rem, 5.375vw, 8.6rem);
  font-family: var(--f-title);
  font-weight: 400;
}
@media (max-width: 1600px) { .heading { font-size: 7rem; } }
@media (max-width: 1366px) { .heading { font-size: 6rem; } }
@media (max-width: 1024px) { .heading { font-size: 5.2rem; } }
@media (max-width: 768px)  { .heading { font-size: 3.4rem; } }
@media (max-width: 600px)  { .heading { font-size: 3rem; } }
@media (max-width: 360px)  { .heading { font-size: 2.4rem; } }

/* --- Scroll reveal (replaces v-inview) --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--tr-slow) var(--ease-out-cubic),
              transform var(--tr-slow) var(--ease-out-cubic);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   COMPONENT: Header Navigation
   Source: components/Header.vue + BurgerButton.vue + Menu.vue
   ============================================================ */
.headerNav {
  z-index: 111;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  color: var(--c-dark);
  pointer-events: none; /* let clicks pass through to hero; children re-enable */
}
.headerNav * {
  pointer-events: auto;
}
.headerNav__box {
  left: 0;
  width: 100%;
}
.headerNav__box--static {
  z-index: 0;
  position: absolute;
  top: 3vw;
  height: 8.5vw;
}
@media (max-width: 600px) {
  .headerNav__box--static { top: calc(3vw + 10px); }
}
.headerNav__box--static > .container {
  /* Production uses container--full which adds flex layout + height:100%.
     This ensures headerNav__utils (height:100%) gets a real height
     from the static box's 8.5vw height. */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.headerNav__box--fixed {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* All children are position:absolute so this box collapses to 0 height.
     Give it a min-height matching the burger button so the fixed bar is
     a proper container and ensures stacking context works. */
  min-height: 6vw;
  pointer-events: none; /* box itself doesn't block clicks */
}
.headerNav__box--fixed > * {
  pointer-events: auto;
}

.headerNav__utils {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 100%;
  visibility: visible;
  padding-right: calc(4vw + 24px);
}
@media (min-width: 769px) {
  .headerNav__utils { padding-right: calc(4vw + 32px); }
}

.headerNav__logo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 6vw;
  height: 6vw;
  transform: translateY(4.25vw);
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
}
@media (max-width: 600px) {
  .headerNav__logo:not(.headerNav__logo--fixed) { transform: translateY(calc(4.25vw + 10px)); }
}
.headerNav__logo--fixed {
  transition: transform 0.3s 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0);
}
.headerNav__logoBox {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(calc(3vw + 1.1rem));
  transition: transform 0.3s 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.headerNav__logo--fixed .headerNav__logoBox {
  transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
  transform: translateX(0);
}
.headerNav__fullLogoBox {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-7.6%, -60%);
  font-size: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0.3s, visibility 0.3s 0.3s;
  z-index: 1;
}
@media (max-width: 600px) {
  .headerNav__fullLogoBox { left: calc(50% - 3vw + 10px); }
}
.headerNav__logo--fixed .headerNav__fullLogoBox {
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
}
.headerNav__fullLogo {
  display: block;
  position: relative;
}
.headerNav__fullLogo img {
  display: block;
  height: 2.4rem;
  width: auto;
  max-width: none;
}
@media (min-width: 769px) {
  .headerNav__fullLogo img { height: 3rem; }
}

.headerNav__logoText {
  display: block;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 50%;
  color: var(--c-dark);
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: justify;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 240%);
  transition: opacity var(--tr), visibility var(--tr), transform var(--tr);
}
.headerNav__logoText::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
}
.headerNav__fullLogo:hover .headerNav__logoText {
  opacity: 0.6;
  visibility: visible;
  transform: translate(-50%, 70%);
}

.headerNav__logoAside {
  display: none;
}
@media (min-width: 769px) {
  .headerNav__logoAside {
    display: block;
    margin-left: 2vw;
  }
  .headerNav__logoAside img {
    height: 3.2rem;
    width: auto;
    max-width: none;
  }
}

.headerNav__sideLogo {
  z-index: 0;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0.3s, visibility 0.3s 0.3s;
}
.headerNav__logo--fixed .headerNav__sideLogo {
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 1;
  visibility: visible;
  top: 3vw;
  left: 6vw;
}
@media (min-width: 441px) {
  .headerNav__logo--fixed .headerNav__sideLogo { left: 4vw; }
}
@media (min-width: 1025px) {
  .headerNav__logo--fixed .headerNav__sideLogo { top: 0; left: 0; }
}
.headerNav__sideLogoImg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.headerNav__sideLogoImg .icon {
  display: block;
  width: 1em;
  height: 1em;
  font-size: 2.24rem;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  fill: currentColor;
  backface-visibility: hidden;
}
@media (min-width: 769px) {
  .headerNav__sideLogoImg .icon { font-size: 2.8rem; }
}
.headerNav__sideLogoImg:hover .icon {
  animation: pulseLogo 1s infinite ease-in-out;
}
@keyframes pulseLogo {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.headerNav__nav {
  display: none;
}
@media (min-width: 769px) {
  .headerNav__nav {
    display: block;
    opacity: 1;
    visibility: visible;
    margin-right: 4vw;
  }
}
.headerNav__navItems {
  display: flex;
  align-items: center;
}
.headerNav__navItem + .headerNav__navItem {
  margin-left: 4vw;
}
.headerNav__link {
  display: inline-block;
  text-align: left;
  padding: 4px 0;
}
.headerNav__linkText {
  font-family: var(--f-text);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.167;
  text-transform: uppercase;
  display: block;
  position: relative;
  overflow: hidden;
}
@media (min-width: 769px) {
  .headerNav__linkText { font-size: 2rem; }
}
@media (min-width: 1025px) {
  .headerNav__linkText { font-size: 2.4rem; }
}
.headerNav__linkText::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 2px;
  margin-top: -1px;
  transform: translateX(-101%);
  background-color: var(--c-black);
  transition: transform var(--tr);
}
.headerNav__link:hover .headerNav__linkText::before {
  transform: translateX(0);
}

.headerNav__langs {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 -8px;
}
@media (min-width: 769px) {
  .headerNav__langs { margin: 0 -16px; }
}
.headerNav__langItem {
  flex-shrink: 0;
  display: block;
  padding: 0 8px;
}
@media (min-width: 769px) {
  .headerNav__langItem { padding: 0 16px; }
}
.headerNav__lang {
  display: block;
  padding: 4px 0;
  font-family: var(--f-text);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.167;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity var(--tr);
  position: relative;
  overflow: hidden;
}
@media (min-width: 361px) {
  .headerNav__lang { font-size: 1.6rem; }
}
@media (min-width: 769px) {
  .headerNav__lang { font-size: 2rem; }
}
@media (min-width: 1025px) {
  .headerNav__lang { font-size: 2.4rem; }
}
.headerNav__lang::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%;
  height: 2px; margin-top: -1px;
  transform: translateX(-101%);
  background-color: var(--c-black);
  transition: transform var(--tr);
}
.headerNav__lang:hover { opacity: 1; }
.headerNav__lang:hover::before { transform: translateX(0); }

/* Menu button (absolutely positioned, outside utils flow) */
.headerNav__menuButton {
  z-index: 1;
  position: absolute;
  top: 0; right: 0;
  transform: translateY(4.25vw);
  transition: transform var(--tr-m) var(--ease-in-cubic);
}
@media (max-width: 768px) {
  .headerNav__menuButton { transform: translateY(4vw); }
}
@media (max-width: 600px) {
  .headerNav__menuButton { transform: translateY(calc(4vw + 10px)); }
}
.headerNav__menuButton--fixed {
  top: 3vw; right: 6vw;
  transition: top var(--tr-m), right var(--tr-m), transform var(--tr-m) var(--tr-m) var(--ease-out-cubic);
  transform: translateY(0);
}
@media (min-width: 1025px) {
  .headerNav__menuButton--fixed { top: 0; right: 0; }
}
.headerNav__menuButton--active {
  top: 5px; right: 5px;
  transition: transform var(--tr);
}
@media (max-width: 600px) {
  .headerNav__menuButton--active {
    transform: translate(calc(-6vw + 8px), calc(3vh - 8px));
  }
}
.headerNav__menuButtonBox {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  transform: translateX(calc(-3vw - 12px));
  transition: transform var(--tr-m) var(--tr-m) var(--ease-out-cubic);
}
@media (min-width: 769px) {
  .headerNav__menuButtonBox { transform: translateX(calc(-3vw - 16px)); }
}
.headerNav__menuButton--fixed .headerNav__menuButtonBox {
  transition: transform var(--tr-m) var(--ease-in-cubic);
  transform: translateX(0);
}

/* BurgerButton */
.burgerButton {
  flex-shrink: 0;
  position: relative;
  display: block;
  width: 6vw; height: 6vw;
  padding: 0; border: none;
  visibility: visible;
  cursor: pointer;
  background: none;
}
.burgerButton__bg {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  background-color: #f5f7f9;
  transition: background-color var(--tr);
}
.burgerButton__bars {
  position: absolute;
  top: 50%; left: 50%;
  display: block;
  width: 20px; height: 20px;
  visibility: hidden;
  transform: translate(-50%, -50%);
}
@media (min-width: 769px) {
  .burgerButton__bars { width: 32px; height: 32px; }
}
.burgerButton__bar {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transition: transform var(--tr);
}
.burgerButton__bar::before {
  content: '';
  display: block;
  width: 100%; height: 2px;
  position: absolute;
  top: 50%; left: 0;
  margin-top: -1px;
  background-color: var(--c-dark);
  visibility: visible;
}
.burgerButton__bar--t { transform: translateY(-16%); }
.burgerButton__bar--m { transform: scaleX(0); }
.burgerButton__bar--b { transform: translateY(16%); }
@media (max-width: 768px) {
  .burgerButton__bar--t { transform: translateY(-32%); }
  .burgerButton__bar--m { transform: scaleX(1); }
  .burgerButton__bar--b { transform: translateY(32%); }
}
.burgerButton:hover .burgerButton__bar--t { transform: translateY(-32%); }
.burgerButton:hover .burgerButton__bar--m { transform: scaleX(1); }
.burgerButton:hover .burgerButton__bar--b { transform: translateY(32%); }
.burgerButton--active .burgerButton__bar--t,
.burgerButton--active:hover .burgerButton__bar--t { transform: translateY(0) rotate(135deg); }
.burgerButton--active .burgerButton__bar--m,
.burgerButton--active:hover .burgerButton__bar--m { transform: scaleX(0); }
.burgerButton--active .burgerButton__bar--b,
.burgerButton--active:hover .burgerButton__bar--b { transform: translateY(0) rotate(-135deg); }
@keyframes burgerButtonSpin {
  0% { transform: translate(-50%, -50%) rotate(-360deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.burgerButton--spin:hover .burgerButton__bars {
  animation: burgerButtonSpin var(--tr-l) var(--ease-in-out-cubic);
}

/* Sidebar Menu */
.headerNav__menu {
  z-index: 0;
  display: block;
  color: var(--c-dark);
  background-color: var(--c-bg-light, #f8f8f8);
  position: absolute;
  top: 0; right: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: visibility var(--tr-l), transform var(--tr-l);
  width: 100%;
}
@media (min-width: 601px) {
  .headerNav__menu { width: auto; max-width: 100%; min-width: 68%; }
}
@media (min-width: 1281px) {
  .headerNav__menu { min-width: 64%; }
}
.headerNav__menu--active {
  visibility: visible;
  transform: translateX(0);
}

.menu { display: block; width: 100%; }
.menu__inner {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.menu__head {
  flex-shrink: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-grow: 0;
  padding: 6vw 0;
  margin: 0 -6vw;
  order: 2;
}
@media (min-width: 601px) {
  .menu__head {
    order: unset;
    height: 6vw;
    padding: 0;
    margin-right: 2vw;
    flex-direction: row;
    justify-content: flex-end;
    flex-grow: 0;
  }
}
.menu__socItems { display: flex; margin-top: 6vw; }
@media (min-width: 601px) {
  .menu__socItems { margin-top: 0; }
}
.menu__socItem {
  position: relative;
  display: block;
  padding-top: 4vw;
}
@media (min-width: 601px) {
  .menu__socItem { padding-top: 0; }
}
.menu__socItem + .menu__socItem { margin-left: 4vw; }
@media (min-width: 601px) {
  .menu__socItem + .menu__socItem { margin-left: 24px; }
}
.menu__socItem::before {
  z-index: 0;
  display: block;
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0;
  transform: scale(0);
  transition: transform var(--tr-m), opacity var(--tr-m);
  opacity: 0;
  backface-visibility: hidden;
}
.menu__socItem::after {
  z-index: 1;
  font-family: var(--f-icons) !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  display: block;
  width: 32px; height: 32px;
  font-size: 32px;
  line-height: 1;
  text-align: center;
  transition: color var(--tr);
}
@keyframes menuSocLinkBefore {
  0% { transform: scale(0); }
  60% { transform: scale(2.2); }
  100% { transform: scale(1.6); }
}
@keyframes menuSocLinkAfter {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.4); }
}
.menu__socItem:hover::before {
  opacity: 1;
  transform: scale(1.6);
  animation: menuSocLinkBefore var(--tr-m) var(--ease-in-out-cubic);
}
.menu__socItem:hover::after {
  color: var(--c-white);
  animation: menuSocLinkAfter var(--tr-m) 0.04s var(--ease-in-out-cubic);
}
.menu__socItem--facebook::before { background-color: #3b5998; }
.menu__socItem--facebook::after { content: '\e909' !important; }
.menu__socItem--instagram::before { background-image: linear-gradient(45deg, #405de6, #833ab4, #e1306c, #f77737, #ffdc80); }
.menu__socItem--instagram::after { content: '\e90d' !important; }
.menu__langs {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 -8px;
}
@media (min-width: 769px) {
  .menu__langs { margin: 0 -16px; }
}
.menu__langItem {
  flex-shrink: 0;
  display: block;
  padding: 0 8px;
}
@media (min-width: 769px) {
  .menu__langItem { padding: 0 16px; }
}
.menu__langLink {
  display: block;
  padding: 4px 0;
  font-family: var(--f-text);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.167;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-dark);
  opacity: 0.6;
  position: relative;
  overflow: hidden;
  transition: opacity var(--tr);
}
@media (min-width: 361px) {
  .menu__langLink { font-size: 1.6rem; }
}
@media (min-width: 769px) {
  .menu__langLink { font-size: 2rem; }
}
@media (min-width: 1025px) {
  .menu__langLink { font-size: 2.4rem; }
}
.menu__langLink::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 2px;
  margin-top: -1px;
  transform: translateX(-100%);
  background-color: var(--c-black);
  transition: transform var(--tr);
}
.menu__langLink:hover { opacity: 1; }
.menu__langLink:hover::before { transform: translateX(0); }
@media (min-width: 601px) {
  .menu__langs { margin-left: 4vw; order: 2; }
}

.menu__body {
  flex-grow: 0;
  display: block;
  padding: 3vw 0;
  padding-top: 1vw;
  margin: 0 -6vw;
}
@media (min-width: 601px) {
  .menu__body { display: flex; margin: 0; flex-grow: 1; }
}
.menu__nav { display: block; }
@media (min-width: 601px) {
  .menu__nav { margin-right: 4vw; min-width: 20vw; }
}
.menu__items {
  display: block;
  text-align: left;
  margin: 0;
  padding-top: 8vh;
}
@media (min-width: 601px) {
  .menu__items { padding-top: 0; margin: -8px 0; visibility: hidden; }
}
.headerNav__menu--active .menu__items { visibility: visible; }

.menu__item {
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(23, 26, 33, 0.08);
}
.menu__item:last-of-type { border-bottom: 1px solid rgba(23, 26, 33, 0.08); }
@media (min-width: 601px) {
  .menu__item { display: block; border: none; }
  .menu__item:last-of-type { border: none; }
}
.menu__link {
  display: inline-block;
  text-align: left;
  padding: 3vh 0;
  visibility: visible;
  transition: opacity var(--tr);
  margin: 0 auto;
}
@media (min-width: 601px) {
  .menu__link { padding: 0 3vw 5vw 3vw; }
}
@media (min-width: 769px) {
  .menu__link { padding: 16px 0; }
}
.menu__items:hover .menu__link { opacity: 0.5; }
.menu__items:hover .menu__link:hover { opacity: 1; }

.menu__linkText {
  font-family: var(--f-text);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.167;
  display: block;
  position: relative;
  overflow: hidden;
}
@media (min-width: 769px) {
  .menu__linkText { font-size: 2.4rem; }
}
@media (min-width: 1025px) {
  .menu__linkText { font-size: 3rem; }
}
@media (min-width: 1367px) {
  .menu__linkText { font-size: 3.8rem; }
}
@media (min-width: 1601px) {
  .menu__linkText { font-size: 4.8rem; }
}
.menu__linkText::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 2px;
  margin-top: -1px;
  transform: scaleX(0);
  transform-origin: left;
  background-color: var(--c-black);
  transition: transform var(--tr);
}
.menu__link:hover .menu__linkText::before { transform: none; }

.menu__info { display: none; }
@media (min-width: 601px) {
  .menu__info {
    display: block;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
  }
}
.menu__contacts { display: block; }
@media (min-width: 1025px) {
  .menu__contacts { margin-bottom: 3vw; }
}
.menu__contact + .menu__contact { margin-top: 4vw; }
@media (min-width: 1025px) {
  .menu__contact + .menu__contact { margin-top: 3vw; }
}
.menu__contactLogo {
  display: inline-block;
}
.menu__contactLogo::before {
  font-family: var(--f-icons) !important;
  content: '\e907' !important;

  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 2rem;
}
.menu__contactLogoText {
  display: block;
  font-weight: 800;
  font-family: var(--f-text);
  font-size: 1rem;
  text-transform: uppercase;
  text-align: right;
  margin-top: 0.3em;
}
.menu__contactAddress,
.menu__contactInfos {
  display: block;
  font-size: 1.2rem;
  line-height: 1.667;
  margin-top: 1.2em;
}
@media (min-width: 601px) {
  .menu__contactAddress,
  .menu__contactInfos { font-size: 1.3rem; }
}
@media (min-width: 1025px) {
  .menu__contactAddress,
  .menu__contactInfos { font-size: 1.4rem; }
}
@media (min-width: 1367px) {
  .menu__contactAddress,
  .menu__contactInfos { font-size: 1.5rem; }
}
@media (min-width: 1025px) {
  .menu__contactInfos { display: flex; }
}
.menu__contactInfo--phone {
  flex-shrink: 0;
}
@media (min-width: 1025px) {
  .menu__contactInfo--phone { margin-right: 3vw; }
  .menu__contactInfo--email { margin-left: auto; margin-right: 0; }
}
.menu__textLink {
  display: inline-block;
  position: relative;
}
.menu__textLink::before {
  content: '';
  display: block;
  width: 100%; height: 1px;
  background-color: currentColor;
  position: absolute;
  bottom: 0; left: 0;
  transition: transform var(--tr);
  transform: scaleX(0);
}
.menu__textLink:hover::before { transform: scaleX(1); }

/* ============================================================
   SECTION: HomeHeader
   Source: components/Home/HomeHeader.vue
   ============================================================ */
.homeHeader {
  position: relative;
  overflow: hidden;
  /* overflow:hidden clips position:absolute children but NOT position:fixed
     children (headerNav__box--fixed). The headerNav wrapper is absolute but
     sits at top:0 within bounds, so it is not clipped. */
}

.homeHeader::before {
  content: '';
  display: block;
  position: absolute;
  top: 3vw;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: var(--c-bg-section);
  transform: scale(0, 1);
  transform-origin: 0% 50%;
  will-change: transform;
}

@keyframes homeHeaderShow {
  0% { transform: scale(0, 1); transform-origin: 0% 50%; }
  49% { transform: scale(1, 1); transform-origin: 0% 50%; }
  50% { transform: scale(1, 1); transform-origin: 100% 50%; }
  100% { transform: scale(0.36, 1); transform-origin: 100% 50%; }
}
@keyframes homeHeaderShowTablet {
  0% { transform: scale(0, 1); transform-origin: 0% 50%; }
  49% { transform: scale(1, 1); transform-origin: 0% 50%; }
  50% { transform: scale(1, 1); transform-origin: 100% 50%; }
  100% { transform: scale(0.68, 1); transform-origin: 100% 50%; }
}
@keyframes homeHeaderShowLaptop {
  0% { transform: scale(0, 1); transform-origin: 0% 50%; }
  49% { transform: scale(1, 1); transform-origin: 0% 50%; }
  50% { transform: scale(1, 1); transform-origin: 100% 50%; }
  100% { transform: scale(0.64, 1); transform-origin: 100% 50%; }
}

.homeHeader--showBg::before {
  transform: scale(0.36, 1);
  transform-origin: 100% 50%;
  animation: homeHeaderShow var(--tr-slow) var(--ease-in-out-cubic);
}
@media (min-width: 769px) {
  .homeHeader--showBg::before {
    transform: scale(0.68, 1);
    animation: homeHeaderShowTablet var(--tr-slow) var(--ease-in-out-cubic);
  }
}
@media (min-width: 1281px) {
  .homeHeader--showBg::before {
    transform: scale(0.64, 1);
    animation: homeHeaderShowLaptop var(--tr-slow) var(--ease-in-out-cubic);
  }
}

.homeHeader__content {
  position: relative;
  padding-top: 11.5vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 601px) {
  .homeHeader__content { justify-content: unset; }
}
@media (min-width: 769px) {
  .homeHeader__content {
    flex-direction: row;
    align-items: center;
    transition: transform var(--tr-slow) var(--ease-out-cubic);
  }
}

.homeHeader__content--intro .homeHeader__titleInner {
  transform: translateY(110%);
}
.homeHeader__content--intro .homeHeader__subtitleInner {
  transform: translateY(110%);
}
@media (max-width: 768px) {
  .homeHeader__content--intro .homeHeader__titleInner,
  .homeHeader__content--intro .homeHeader__subtitleInner {
    transform: none;
  }
  .homeHeader__titleInner,
  .homeHeader__subtitleInner {
    transition: none;
  }
}

.homeHeader__outer {
  position: relative;
  display: flex;
  align-items: flex-end;
  order: 2;
  transition: transform var(--tr-slow);
}
@media (min-width: 541px) {
  .homeHeader__outer { order: unset; }
}
@media (min-width: 601px) {
  .homeHeader__outer { flex-grow: 1; }
}
@media (min-width: 769px) {
  .homeHeader__outer {
    flex-shrink: 0;
    display: block;
    padding: 0;
    width: 64%;
  }
}
@media (min-width: 1281px) {
  .homeHeader__outer { width: 73%; }
}

.homeHeader__inner {
  text-align: right;
  margin: 0 auto;
  margin-bottom: 6vh;
}
@media (min-width: 769px) {
  .homeHeader__inner {
    max-width: none;
    margin: 0;
    margin-bottom: 24vh;
  }
}
@media (min-width: 1025px) {
  .homeHeader__inner { margin-bottom: 16vh; }
}
@media (min-width: 1367px) {
  .homeHeader__inner { margin-bottom: 12vh; }
}

.homeHeader__textBox {
  margin-left: -3vw;
}

.homeHeader__title {
  font-family: var(--f-title);
  margin-bottom: 0.1em;
  overflow: hidden;
}
.homeHeader__titleInner {
  white-space: pre-line;
  display: inline-block;
  transition: transform var(--tr) var(--ease-out-cubic) var(--tr-slow);
}

.homeHeader__subtitle {
  display: block;
  overflow: hidden;
}
.homeHeader__subtitleInner {
  display: inline-block;
  transition: transform var(--tr-m) var(--ease-out-cubic) calc(var(--tr-slow) + var(--tr));
}

.homeHeader__text {
  font-weight: 800;
  font-family: var(--f-text);
}
@media (min-width: 601px) {
  .homeHeader__text { white-space: nowrap; }
}
.homeHeader__text--textEnd {
  position: relative;
}
.homeHeader__text--alwaysBlock {
  display: block;
}

.homeHeader__textMid {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  text-align: left;
}

.homeHeader__animeText {
  display: inline-block;
}
.homeHeader__animeText--client {
  position: relative;
  width: 100%;
}
.homeHeader__animeText--mid {
  text-align: right;
}
.homeHeader__animeClient {
  display: block;
}

.homeHeader__buttonMask {
  display: block;
  font-size: 0;
  margin-top: 4vw;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .homeHeader__buttonMask { margin-top: 2vw; }
}
@media (max-width: 600px) {
  .homeHeader__buttonMask { margin-top: 6vw; }
}

.homeHeader__button {
  display: block;
  transform: translateY(101%);
  transition: transform var(--tr) var(--tr-slow) var(--ease-out-cubic);
}
.homeHeader--showBg .homeHeader__button {
  transform: translateY(0);
}

/* CTA Button (from components/Button.vue) */
.homeHeader__cta {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 0;
  color: var(--c-sec);
  background-color: var(--c-main);
  padding: 4vw;
  transition: color var(--tr-m) var(--ease-in-out-cubic);
  border: 2px solid var(--c-main);
  overflow: hidden;
  font-weight: 800;
  font-family: var(--f-text);
  font-size: 1.6rem;
  line-height: 1.25;
}
@media (min-width: 601px) {
  .homeHeader__cta {
    padding: 4px 2vw;
    min-height: 50px;
  }
}
@media (min-width: 769px) {
  .homeHeader__cta {
    min-height: 70px;
    font-size: 1.8rem;
  }
}
@media (min-width: 1367px) {
  .homeHeader__cta { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .homeHeader__cta { font-size: 2.4rem; }
}
.homeHeader__cta::before {
  content: '';
  z-index: 0;
  position: absolute;
  top: 50%; left: 50%;
  display: block;
  background-color: var(--c-sec);
  width: 140%; height: 0; padding-top: 100%;
  border-radius: 50%;
  transform-origin: var(--x, 50%) var(--y, 50%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--tr-m) var(--ease-in-out-cubic);
}
.homeHeader__cta:hover {
  color: var(--c-main);
}
.homeHeader__cta:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
.homeHeader__cta span {
  position: relative;
  z-index: 1;
}

/* CTA button icon (in-link arrow) */
.homeHeader__ctaBox {
  z-index: 1;
  position: relative;
  display: block;
  padding-right: 24px;
}
.homeHeader__ctaBox::before,
.homeHeader__ctaBox::after {
  font-family: var(--f-icons) !important;
  content: '\e904' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  pointer-events: none;
  transition: transform var(--tr), opacity var(--tr);
}
.homeHeader__ctaBox::before {
  color: var(--c-blue);
  left: 0;
  opacity: 0;
  transform: translate(-12px, -12px);
}
.homeHeader__cta:hover .homeHeader__ctaBox::before {
  opacity: 1;
  transform: translate(0, 0);
}
.homeHeader__ctaBox::after {
  right: 0;
  opacity: 0.6;
  transform: translate(0, 0);
}
.homeHeader__cta:hover .homeHeader__ctaBox::after {
  opacity: 0;
  transform: translate(12px, 12px);
}
.homeHeader__ctaText {
  position: relative;
  display: block;
  transform: translateX(0);
  transition: transform var(--tr);
}
.homeHeader__cta:hover .homeHeader__ctaText {
  transform: translateX(24px);
}

/* Hero character (static frame from HeroAnimation) */
/* Hero walk animation (canvas) */
.heroAnimation.homeHeader__hero {
  display: block;
  position: relative;
  width: calc(100% - 20px);
  height: 200px;
  pointer-events: none;
  order: 1;
}
.heroAnimation.homeHeader__hero--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease-out;
}
@media (min-width: 541px) {
  .heroAnimation.homeHeader__hero { order: unset; }
}
@media (min-width: 541px) {
  .heroAnimation.homeHeader__hero {
    width: calc(80% - 20px);
    height: 260px;
  }
}
@media (min-width: 769px) {
  .heroAnimation.homeHeader__hero {
    position: absolute;
    padding: 0;
    left: 0;
    bottom: 30px;
    width: calc(70% - 20px);
  }
}
@media (min-width: 1025px) {
  .heroAnimation.homeHeader__hero { width: calc(35% - 20px); }
}
@media (min-width: 1281px) {
  .heroAnimation.homeHeader__hero { width: calc(45% - 20px); }
}
@media (min-width: 1601px) {
  .heroAnimation.homeHeader__hero { width: calc(48% - 20px); }
}

/* VideoAccordion right panel */
.homeHeader__accordion {
  display: none;
}
@media (min-width: 1025px) {
  .homeHeader__accordion {
    display: block;
    width: 36%;
    height: 100%;
    position: relative;
    flex-shrink: 1;
  }
}
@media (min-width: 1281px) {
  .homeHeader__accordion {
    width: 27vw;
  }
}

.videoAccordion {
  width: 100%;
  height: 100%;
}

.videoAccordion__wrapper {
  width: 100%;
  height: 100%;
  padding: 4vw 3vw;
}

.videoAccordion__inner {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  color: var(--c-sec);
}

.videoAccordion__bg {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.videoAccordion__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videoAccordion__bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.03) 20%, transparent 40%);
}

.videoAccordion__text {
  z-index: 1;
  position: relative;
  width: 100%;
  font-size: 2rem;
  line-height: 1.6;
  margin-right: -2vw;
}
@media (min-width: 1025px) {
  .videoAccordion__text { font-size: 2.2rem; }
}
@media (min-width: 1367px) {
  .videoAccordion__text { font-size: 2.4rem; }
}
@media (min-width: 1601px) {
  .videoAccordion__text { font-size: 3rem; }
}

.videoAccordion__question {
  font-family: var(--f-title);
  font-size: 2rem;
  line-height: 1.6;
  margin-right: -2vw;
  margin-bottom: 0.2em;
  white-space: pre-line;
  color: var(--c-white);
}
@media (min-width: 1025px) {
  .videoAccordion__question { font-size: 2.4rem; }
}
@media (min-width: 1367px) {
  .videoAccordion__question { font-size: 2.6rem; }
}
@media (min-width: 1601px) {
  .videoAccordion__question { font-size: 3rem; }
}

.videoAccordion__answer {
  font-family: var(--f-text);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--c-white);
}
@media (min-width: 1601px) {
  .videoAccordion__answer { font-size: 2.4rem; }
}

.videoAccordion__moreButton {
  margin-top: 5rem;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 5;
  cursor: pointer;
}

.videoAccordion__moreIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  color: var(--c-dark);
  background-color: var(--c-white);
  transition: background-color var(--tr-m);
  margin-right: 2rem;
  position: relative;
}
.videoAccordion__moreIcon::before {
  font-family: var(--f-icons) !important;
  content: '\e90c' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
}

.videoAccordion__moreText {
  position: relative;
  display: block;
  font-weight: 600;
  font-family: var(--f-text);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--c-white);
  transition: transform var(--tr);
}
@media (min-width: 769px) {
  .videoAccordion__moreText { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .videoAccordion__moreText { font-size: 2rem; }
}
.videoAccordion__moreText::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform var(--tr);
}
.videoAccordion__moreButton:hover .videoAccordion__moreText {
  transform: translateX(2.8rem);
}
.videoAccordion__moreButton:hover .videoAccordion__moreText::after {
  transform: scaleX(1);
}

/* Scroll-down arrow */
.homeHeader__scrollDown {
  position: absolute;
  bottom: -2vw;
  right: 6vw;
  z-index: 2;
}
@media (min-width: 769px) {
  .homeHeader__scrollDown { bottom: 6vw; }
}
@media (min-width: 1025px) {
  .homeHeader__scrollDown { left: 6vw; right: unset; }
}
@media (min-width: 1601px) {
  .homeHeader__scrollDown { bottom: 2vw; }
}

.buttonGoDown {
  animation-name: upAndDown;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  color: var(--c-dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.buttonGoDown::before {
  font-family: var(--f-icons) !important;
  content: '\e912' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 25px;
  line-height: 1;
  display: block;
}
.buttonGoDown:hover {
  animation-play-state: paused;
}
.buttonGoDown:hover::before {
  transform: scale(1.2);
}

@keyframes upAndDown {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 30px, 0); }
}

/* Brand name always on its own line (no jump between 2/3 lines) */

/* ============================================================
   SECTION: PuffLogos
   Source: components/PuffLogos.vue (EXACT)
   ============================================================ */
.puffLogos {
  position: relative;
}

.puffLogos::before {
  content: '';
  display: block;
  background-color: var(--c-bg-section);
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
  transform: scale(0, 1);
  transform-origin: 100% 50%;
  will-change: transform;
}

@keyframes puffLogosBg {
  0% { transform: scale(0, 1); transform-origin: 100% 50%; }
  49% { transform: scale(1, 1); transform-origin: 100% 50%; }
  50% { transform: scale(1, 1); transform-origin: 0% 50%; }
  100% { transform: scale(0.24, 1); transform-origin: 0% 50%; }
}

.puffLogos--showBg::before {
  transform: scale(0.24, 1);
  transform-origin: 0% 50%;
}
@media (min-width: 1025px) {
  .puffLogos--showBg::before {
    transform: scale(0.19, 1);
    transform-origin: 0% 50%;
    animation: puffLogosBg 0.8s var(--ease-in-out-cubic);
  }
}

.puffLogos__wrapper.container {
  /* inherits container padding */
}
@media (min-width: 769px) {
  .puffLogos__wrapper.container { padding-right: 0; }
}

.puffLogos__inner {
  /* mobile: block */
}
@media (min-width: 769px) {
  .puffLogos__inner { display: flex; }
}
@media (min-width: 1025px) {
  .puffLogos__inner { min-height: 390px; }
}

.puffLogos__title {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--f-title);
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 500;
  white-space: pre-line;
  margin-top: 2rem;
  margin-bottom: 3rem;
}
@media (min-width: 769px) {
  .puffLogos__title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2.2rem;
    width: 32%;
  }
}
@media (min-width: 1025px) {
  .puffLogos__title {
    width: 26%;
    font-size: 2.4rem;
  }
}
@media (min-width: 1367px) {
  .puffLogos__title { font-size: 2.6rem; }
}
@media (min-width: 1601px) {
  .puffLogos__title { font-size: 3rem; }
}

.puffLogos__items {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.puffLogos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  text-align: center;
  position: relative;
  padding: 1.6rem 0;
  z-index: 0;
}
@media (min-width: 1025px) {
  .puffLogos__item { width: 25%; }
}

.puffLogos__item::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 0;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: currentColor;
  transition: transform var(--tr), opacity var(--tr);
  opacity: 0;
}
.puffLogos__item:hover {
  z-index: 1;
}
.puffLogos__item:hover::before {
  transform: scaleY(1.2);
  opacity: 1;
}

.puffLogos__content {
  visibility: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--c-white);
  transition: transform var(--tr);
  padding: 0 3rem;
  transform: translateY(50%);
}
.puffLogos__item:hover .puffLogos__content {
  transform: translateY(0);
}

.puffLogos__logo {
  display: block;
  position: relative;
  width: 80%;
  visibility: visible;
  transform: translateY(-50%);
  transition: transform var(--tr);
  overflow: hidden;
}
.puffLogos__item:hover .puffLogos__logo {
  transform: translateY(0);
}

.puffLogos__image {
  top: 0; left: 0;
  transition: opacity var(--tr);
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.puffLogos__image--default {
  position: relative;
  opacity: 1;
}
.puffLogos__item:hover .puffLogos__image--default {
  opacity: 0;
}
.puffLogos__image--hover {
  position: absolute;
  width: 100%; height: 100%;
  opacity: 0;
}
.puffLogos__item:hover .puffLogos__image--hover {
  opacity: 1;
}

.puffLogos__text {
  display: none;
  font-size: 1.4rem;
  line-height: 1.667;
  font-weight: 500;
  padding-top: 3rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--tr), visibility var(--tr);
}
.puffLogos__item:hover .puffLogos__text {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 769px) {
  .puffLogos__text {
    display: block;
    font-size: 1.6rem;
  }
}
@media (min-width: 1281px) {
  .puffLogos__text { font-size: 1.8rem; }
}

/* ============================================================
   SECTION: Features
   Source: components/Features.vue (EXACT layout)
   ============================================================ */
.features {
  position: relative;
  padding-top: 6vw;
  padding-bottom: 12vw;
}
@media (min-width: 601px) {
  .features { padding-top: 0; padding-bottom: 0; }
}

.features__inner {
  padding: 6vw 0;
}

.features__title {
  display: block;
}

.features__text {
  display: block;
  margin: 2.6rem 0 1rem 0;
}
@media (min-width: 601px) {
  .features__text { margin: 2.6rem 0 0 0; }
}
@media (min-width: 1025px) {
  .features__text { max-width: 50%; }
}

.features__titleBox {
  display: block;
  line-height: 1.333;
  font-size: 2.8rem;
  margin: 0 0 1.6rem 0;
}
@media (min-width: 481px) {
  .features__titleBox { font-size: 3.2rem; margin-bottom: 1rem; }
}
@media (min-width: 769px) {
  .features__titleBox { font-size: 3.4rem; }
}
@media (min-width: 1025px) {
  .features__titleBox { font-size: 4.2rem; }
}
@media (min-width: 1367px) {
  .features__titleBox { font-size: 4.6rem; }
}
@media (min-width: 1601px) {
  .features__titleBox { font-size: 5.8rem; }
}

.features__titleLabel {
  display: block;
  position: relative;
  overflow: hidden;
  font-family: var(--f-title);
  font-weight: 500;
  margin-bottom: 0.1em;
}

.features__titleSub {
  display: block;
  position: relative;
  overflow: hidden;
  font-weight: 800;
  font-family: var(--f-text);
}

.features__titleInner {
  display: block;
  position: relative;
  white-space: pre-wrap;
}

.features__description {
  font-family: var(--f-text);
  line-height: 2;
  font-size: 1.4rem;
  margin: 2.6rem 0 1rem 0;
  white-space: pre-wrap;
}
@media (min-width: 601px) {
  .features__description { margin: 2.6rem 0 0 0; }
}
@media (min-width: 769px) {
  .features__description { font-size: 1.8rem; }
}
@media (min-width: 1025px) {
  .features__description { max-width: 50%; }
}
@media (min-width: 1367px) {
  .features__description { font-size: 2.2rem; }
}
@media (min-width: 1601px) {
  .features__description { font-size: 2.6rem; }
}

/* --- Slider layout --- */
.features__slider {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 12vw;
}
@media (min-width: 769px) {
  .features__slider {
    display: flex;
    align-items: center;
  }
}
@media (min-width: 1025px) {
  .features__slider { padding-bottom: 0; }
}

/* Image box (canvas container - populated by another agent) */
.features__sliderImageBox {
  display: none;
}
@media (min-width: 769px) {
  .features__sliderImageBox {
    display: block;
    position: relative;
    width: 35%;
    margin-bottom: 5%;
  }
}
@media (min-width: 1025px) {
  .features__sliderImageBox {
    width: 50%;
    margin-bottom: 2%;
  }
}
@media (min-width: 1601px) {
  .features__sliderImageBox {
    margin-bottom: 5%;
  }
}

/* Animation canvas - responsive sizing */
.featuresAnimation {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  height: auto;
}
@media (min-width: 1601px) {
  .featuresAnimation {
    max-width: 620px;
  }
}

/* Slider items list */
.features__sliderItems {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-left: 6vw;
  padding-right: 6vw;
}
@media (min-width: 769px) {
  .features__sliderItems {
    width: 65%;
    padding-left: 0;
    margin-left: auto;
  }
}
@media (min-width: 1025px) {
  .features__sliderItems {
    width: 50%;
    margin: 5rem 0;
  }
}
@media (min-width: 1367px) {
  .features__sliderItems {
    margin-bottom: 0;
  }
}
@media (min-width: 1601px) {
  .features__sliderItems {
    margin-bottom: 5rem;
  }
}

/* --- Slider item (row: checkbox + button) --- */
.features__sliderItem {
  display: flex;
  align-items: flex-start;
  width: 100%;
  opacity: 0;
  transform: translateX(6vw);
  transition: opacity var(--tr);
}
.features__sliderItems--show .features__sliderItem {
  opacity: 1;
  transform: translateX(0);
}
.features__sliderItem:nth-of-type(1) {
  transition: opacity var(--tr-m) 0s, transform var(--tr-m) var(--ease-out-cubic) 0s;
}
.features__sliderItem:nth-of-type(2) {
  transition: opacity var(--tr-m) 0.2s, transform var(--tr-m) var(--ease-out-cubic) 0.2s;
}
.features__sliderItem:nth-of-type(3) {
  transition: opacity var(--tr-m) 0.4s, transform var(--tr-m) var(--ease-out-cubic) 0.4s;
}
.features__sliderItem:nth-of-type(4) {
  transition: opacity var(--tr-m) 0.6s, transform var(--tr-m) var(--ease-out-cubic) 0.6s;
}
.features__sliderItem:nth-of-type(5) {
  transition: opacity var(--tr-m) 0.8s, transform var(--tr-m) var(--ease-out-cubic) 0.8s;
}
.features__sliderItem + .features__sliderItem {
  margin-top: 2rem;
}

/* --- Checkbox --- */
.features__checkbox {
  flex-shrink: 0;
  margin-right: 1rem;
  margin-top: 0.5rem;
}
.features__checkboxLabel {
  display: block;
  position: relative;
  cursor: pointer;
}
.features__checkboxInput {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.features__checkboxBox {
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-dark);
  background: transparent;
  position: relative;
  cursor: pointer;
  margin: 2px 0;
}
.features__checkboxBox::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--c-dark);
  transition: opacity var(--tr), transform var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0;
  transform: scale(0);
}
.features__checkboxInput:checked + .features__checkboxBox::before {
  opacity: 1;
  transform: scale(1);
}

/* --- Item button --- */
.features__item {
  display: block;
  text-align: left;
  transition: color var(--tr);
  color: rgba(23, 26, 33, 0.6);
  width: 100%;
}
.features__item--active {
  color: var(--c-dark);
}
.features__item:hover {
  color: var(--c-dark);
}

.features__itemTitle {
  font-family: var(--f-title);
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 500;
  white-space: pre-line;
}
@media (min-width: 769px) {
  .features__itemTitle { font-size: 2.2rem; }
}
@media (min-width: 1367px) {
  .features__itemTitle { font-size: 2.4rem; }
}
@media (min-width: 1601px) {
  .features__itemTitle { font-size: 3rem; }
}

.features__itemText {
  font-family: var(--f-text);
  line-height: 2;
  font-size: 1.4rem;
  margin: 0 0 1rem 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--tr-m), transform var(--tr-m);
}
@media (min-width: 769px) {
  .features__itemText {
    opacity: 0;
    font-size: 1.8rem;
  }
}
.features__itemText--active {
  opacity: 1;
}
@media (min-width: 1367px) {
  .features__itemText { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .features__itemText { font-size: 2.4rem; }
}

/* --- CTA button (hidden until checkbox checked) --- */
.features__cta {
  width: 100%;
  padding: 1rem 0 0 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.features__cta--active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.features__ctaButton {
  cursor: pointer;
}

/* --- More block --- */
.features__more {
  display: flex;
  position: relative;
  padding: 12vw 6vw 24vw 6vw;
  font-size: 2rem;
  line-height: 1.6;
  margin: -6vw;
  margin-top: 0;
  z-index: 0;
  will-change: transform;
}
@media (min-width: 601px) {
  .features__more {
    padding: 4vw 6vw;
    margin-top: -4vw;
  }
}
@media (min-width: 1025px) {
  .features__more { font-size: 2.4rem; }
}
@media (min-width: 1281px) {
  .features__more {
    font-size: 3rem;
    margin-top: -8vw;
  }
}
@media (min-width: 1601px) {
  .features__more { margin-top: -10vw; }
}
.features__more::before {
  content: '';
  display: block;
  background-color: #f5f7f9;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 10vw;
  z-index: -1;
  transform: scale(0, 1);
  transform-origin: 100% 50%;
}
@media (min-width: 601px) {
  .features__more::before {
    bottom: -6vw;
  }
}
.features__more--show::before {
  transform: scale(0.7, 1);
  transform-origin: 0% 50%;
  animation: featuresMoreShow 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (min-width: 601px) {
  .features__more--show::before {
    transform: scale(0.3, 1);
  }
}
@media (min-width: 1025px) {
  .features__more--show::before {
    transform: scale(0.19, 1);
  }
}
@keyframes featuresMoreShow {
  0%   { transform: scale(0, 1); transform-origin: 100% 50%; }
  49%  { transform: scale(1, 1); transform-origin: 100% 50%; }
  50%  { transform: scale(1, 1); transform-origin: 0% 50%; }
  100% { transform: scale(0.3, 1); transform-origin: 0% 50%; }
}
.features__moreInner {
  margin-right: auto;
}
@media (min-width: 601px) {
  .features__moreInner {
    opacity: 0;
    transform: translateX(60%);
  }
  .features__more--show .features__moreInner {
    transition: opacity var(--tr-m) 0.8s cubic-bezier(0.33, 1, 0.68, 1),
                transform var(--tr-m) 0.8s cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 1;
    transform: translateX(0%);
  }
}
.features__moreTitle {
  font-family: var(--f-title);
  font-weight: 500;
  margin-bottom: 0.1em;
  white-space: pre-line;
}
.features__moreSubtitle {
  font-weight: 800;
  white-space: pre-line;
}
.features__moreButton {
  margin-top: 2vw;
  cursor: pointer;
}

/* --- LineButton component --- */
.lineButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  padding-left: 6vw;
  overflow: hidden;
  color: currentColor;
  cursor: pointer;
}
.lineButton__text {
  position: relative;
  display: block;
  font-weight: 600;
  font-family: var(--f-text);
  font-size: 1.6rem;
  line-height: 1.2;
  transform: translateX(0);
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  padding: 0 12px;
  margin: 0 -12px;
}
@media (min-width: 769px) {
  .lineButton__text { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .lineButton__text { font-size: 2rem; }
}
.lineButton:hover .lineButton__text {
  transform: translateX(-6vw);
}
.lineButton__text::before,
.lineButton__text::after {
  content: '';
  display: block;
  width: 6vw;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  transform: translateZ(0);
}
.lineButton__text::before {
  right: 100%;
}
.lineButton__text::after {
  left: 100%;
}
.lineButton__textOnly {
  display: block;
}
.lineButton--shake .lineButton__textOnly {
  animation: lineButtonShake 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.lineButton--shake:hover .lineButton__textOnly {
  animation-play-state: paused;
}
@keyframes lineButtonShake {
  2%, 18% { transform: rotate(0deg); }
  4%, 16% { transform: rotate(2deg); }
  6%, 10%, 14% { transform: rotate(-4deg); }
  8%, 12% { transform: rotate(4deg); }
}

/* --- PageButton component --- */
.pageButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--c-white);
  padding: 6px 0;
  padding-right: 24px;
  border-bottom: 1px solid var(--c-white);
  border-top: 1px solid transparent;
  transition: color 0.2s, transform 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.pageButton::before,
.pageButton::after {
  content: '\e904';
  font-family: 'icomoon' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  pointer-events: none;
  transition: transform 0.2s, opacity 0.2s;
}
.pageButton::before {
  color: var(--c-blue);
  left: 0;
  opacity: 0;
  transform: translate(-12px, -12px);
}
.pageButton::after {
  right: 0;
  opacity: 0.6;
  transform: translate(0, 0);
}
.pageButton:hover::before {
  opacity: 1;
  transform: translate(0, 0);
}
.pageButton:hover::after {
  opacity: 0;
  transform: translate(12px, 12px);
}
.pageButton__line {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -2px;
  left: 0;
  background-color: var(--c-white);
  transition: transform 0.2s;
  transform-origin: 0 0;
  transform: scaleX(0);
}
.pageButton:hover .pageButton__line {
  transform: scaleX(1);
}
.pageButton__text {
  position: relative;
  display: block;
  font-weight: 800;
  font-family: var(--f-text);
  font-size: 1.6rem;
  line-height: 1.25;
  transform: translateX(0);
  transition: transform 0.2s;
}
@media (min-width: 769px) {
  .pageButton__text { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .pageButton__text { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .pageButton__text { font-size: 2.4rem; }
}
.pageButton:hover .pageButton__text {
  transform: translateX(24px);
}

/* --- Button component --- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--c-white);
  background-color: var(--c-dark);
  padding: 4vw;
  transition: color 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  border: 2px solid var(--c-dark);
  overflow: hidden;
  cursor: pointer;
}
@media (min-width: 601px) {
  .button { padding: 4px 2vw; min-height: 50px; }
}
@media (min-width: 769px) {
  .button { min-height: 70px; }
}
.button::before {
  content: '';
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: var(--c-white);
  width: 140%;
  height: 0;
  padding-top: 100%;
  border-radius: 50%;
  transform-origin: var(--x, 50%) var(--y, 50%);
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: var(--c-dark);
}
.button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
.button__box {
  z-index: 1;
  position: relative;
  display: block;
}
.button__box--icon {
  padding-right: 24px;
}
.button__box--icon::before,
.button__box--icon::after {
  font-family: var(--f-icons) !important;
  content: '\e904' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  pointer-events: none;
  transition: transform 0.2s, opacity 0.2s;
}
.button__box--icon::before {
  color: var(--c-blue);
  left: 0;
  opacity: 0;
  transform: translate(-12px, -12px);
}
.button:hover .button__box--icon::before {
  opacity: 1;
  transform: translate(0, 0);
}
.button__box--icon::after {
  right: 0;
  opacity: 0.6;
  transform: translate(0, 0);
}
.button:hover .button__box--icon::after {
  opacity: 0;
  transform: translate(12px, 12px);
}
.button__text {
  position: relative;
  display: block;
  font-weight: 800;
  font-family: var(--f-text);
  font-size: 1.6rem;
  line-height: 1.25;
  transform: translateX(0);
  transition: transform 0.2s;
}
@media (min-width: 769px) {
  .button__text { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .button__text { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .button__text { font-size: 2.4rem; }
}
.button:hover .button__box--icon .button__text {
  transform: translateX(24px);
}

/* ============================================================
   SECTION: TabCards
   Source: components/TabCards/TabCards.vue,
          components/TabCards/TabCardsItem.vue,
          components/Tags.vue
   ============================================================ */

/* -----------------------------------------------------------
   1. TabCards container (TabCards.vue)
   ----------------------------------------------------------- */
.tabCards {
  z-index: 0;
  position: relative;
  color: var(--c-white);
  background: #171a21;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 0 6vw 0;
  padding-top: 22vw;
}
.tabCards::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
@media (min-width: 601px) {
  .tabCards { padding-top: 0; }
}
@media (min-width: 769px) {
  .tabCards { padding: 0; }
}
@media (max-width: 768px) {
  .tabCards { height: auto !important; }
}

/* __inner */
.tabCards__inner {
  display: block;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 3vw;
}
@media (min-width: 769px) {
  .tabCards__inner { display: flex; }
}

/* __sidebar */
.tabCards__sidebar {
  position: relative;
  z-index: 10;
  display: block;
  padding-top: 6vw;
  padding-bottom: 6vw;
  transition: transform var(--tr) var(--tr);
}
@media (max-width: 540px) {
  .tabCards__sidebar { display: none; }
}
@media (min-width: 769px) {
  .tabCards__sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex-shrink: 0;
    padding: 6vw 2vw 6vw 0;
    width: 220px;
    backdrop-filter: none;
  }
}
@media (min-width: 1601px) {
  .tabCards__sidebar { width: 300px; }
}
.tabCards__sidebar--toggle {
  display: none;
  position: absolute;
  top: 50%;
  transition: transform var(--tr) 0.8s;
  background: var(--c-white);
  padding: 1.6vw;
  font-size: 1.6em;
  border-radius: 0 4px 4px 0;
  border: 1px solid var(--c-white);
  border-left: none;
}
.tabCards__sidebar.inactive {
  transform: translateX(-100vw);
}
.tabCards__sidebar.inactive .tabCards__sidebar--toggle {
  display: block;
  transform: translate(calc(100vw - 6vw), -50%);
}

/* __mainTabs */
.tabCards__mainTabs {
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--c-dark-gray);
}

/* __mainTab */
.tabCards__mainTab {
  flex-shrink: 0;
  display: block;
  position: relative;
  padding-bottom: 12px;
}
.tabCards__mainTab:last-of-type {
  display: none;
}
.tabCards__mainTab:first-of-type {
  flex-grow: 1;
}
.tabCards__mainTab:first-of-type::before {
  content: '';
  display: block;
  height: 5px;
  width: 17px;
  background-color: var(--c-white);
  position: absolute;
  bottom: -3px;
  left: 0;
  transition: left var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
}
.tabCards__mainTab--inactive:first-of-type::before {
  left: 100%;
}
@media (min-width: 769px) {
  .tabCards__mainTab:last-of-type { display: block; }
  .tabCards__mainTab { padding-bottom: 24px; }
}

/* __mainTabButton */
.tabCards__mainTabButton {
  color: var(--c-white);
  display: inline-block;
}

/* __mainTabTitle */
.tabCards__mainTabTitle {
  white-space: pre-line;
  text-align: left;
  font-size: 1.6rem;
  line-height: 1.1667;
  font-weight: 500;
}
@media (min-width: 769px) {
  .tabCards__mainTabTitle { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .tabCards__mainTabTitle { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .tabCards__mainTabTitle { font-size: 2.4rem; }
}
.tabCards__mainTab--active .tabCards__mainTabTitle {
  font-weight: 800;
}

/* __tabs */
.tabCards__tabs {
  display: block;
  position: relative;
  margin-top: 4vw;
}

/* __tabsInner */
.tabCards__tabsInner {
  display: block;
  width: 100%;
  position: relative;
}
/* __tab */
.tabCards__tab {
  display: block;
  text-align: left;
  position: relative;
}
.tabCards__tab::before {
  content: '';
  display: block;
  position: absolute;
  left: -6vw;
  top: 0;
  height: 100%;
  width: 7px;
  background-color: currentColor;
  transform: translateX(-100%);
  transition: transform var(--tr);
}
.tabCards__tab--active::before,
.tabCards__tab:hover::before {
  transform: translateX(0);
}
.tabCards__tab + .tabCards__tab {
  margin-top: 3vw;
}

/* __tabBox */
.tabCards__tabBox {
  position: relative;
  transition: transform var(--tr);
}
.tabCards__tab:hover .tabCards__tabBox {
  transform: translateX(-1vw);
}

/* __tabTitle */
.tabCards__tabTitle {
  font-family: var(--f-title);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-white);
  backface-visibility: hidden;
  transition: color var(--tr);
}
.tabCards__tab--active .tabCards__tabTitle {
  color: currentColor;
}
@media (min-width: 601px) {
  .tabCards__tabTitle { font-size: 2.2rem; }
}
@media (min-width: 1025px) {
  .tabCards__tabTitle { font-size: 2.4rem; }
}
@media (min-width: 1367px) {
  .tabCards__tabTitle { font-size: 2.6rem; }
}
@media (min-width: 1601px) {
  .tabCards__tabTitle { font-size: 3rem; }
}

/* __tabText */
.tabCards__tabText {
  color: var(--c-white);
  font-size: 1.2rem;
  line-height: 2;
  white-space: pre-line;
  opacity: 0.5;
  margin-top: 1em;
}
@media (min-width: 601px) {
  .tabCards__tabText { font-size: 1.3rem; }
}
@media (min-width: 1025px) {
  .tabCards__tabText { font-size: 1.4rem; }
}
@media (min-width: 1367px) {
  .tabCards__tabText { font-size: 1.5rem; }
}
@media (min-width: 1601px) {
  .tabCards__tabText { font-size: 1.8rem; }
}

/* __content */
.tabCards__content {
  margin-top: 6vw;
  overflow: hidden;
}
@media (min-width: 769px) {
  .tabCards__content {
    margin-top: 0;
    flex-grow: 1;
    padding: 6vw 0 3vw 0;
  }
}

/* __text */
.tabCards__text {
  display: block;
  position: relative;
  padding-bottom: 3vw;
  font-size: 2.8rem;
  line-height: 1.333;
  margin-bottom: 1.6rem;
}
@media (min-width: 481px) {
  .tabCards__text {
    font-size: 3.2rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 769px) {
  .tabCards__text {
    margin-left: 9vw;
    margin-right: 0;
    font-size: 3.4rem;
  }
}
@media (min-width: 1025px) {
  .tabCards__text {
    margin-left: 4vw;
    margin-right: 0;
    font-size: 4.2rem;
  }
}
@media (min-width: 1367px) {
  .tabCards__text {
    font-size: 4.6rem;
  }
}
@media (min-width: 1601px) {
  .tabCards__text {
    font-size: 5.8rem;
  }
}

/* __title (heading inside __text) */
.tabCards__title,
.tabCards__textTitle {
  font-family: var(--f-title);
  font-weight: 500;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0.1em;
}
.tabCards__textSubtitle {
  font-family: var(--f-text);
  font-weight: 800;
  font-size: inherit;
  line-height: inherit;
}
.tabCards__textDesc {
  font-size: 1.4rem;
  line-height: 2;
  margin-top: 2.6rem;
  opacity: 0.8;
  white-space: pre-wrap;
}
@media (min-width: 769px) {
  .tabCards__textDesc { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .tabCards__textDesc { font-size: 2.2rem; }
}
@media (min-width: 1601px) {
  .tabCards__textDesc { font-size: 2.6rem; }
}

/* __grid */
.tabCards__grid {
  display: block;
  position: relative;
  margin-top: 6vw;
}

/* __gridInner */
.tabCards__gridInner {
  display: block;
  width: 100%;
  position: relative;
}
/* __items */
.tabCards__items {
  display: block;
  position: relative;
  padding: 0 0 3vw 0;
  margin: 0 -8px;
}
@media (min-width: 1025px) {
  .tabCards__items { display: flex; }
}

/* __item */
.tabCards__item {
  z-index: 0;
  position: relative;
  padding: 8px;
  width: 100%;
  will-change: transform;
  transition: transform var(--tr-m), opacity var(--tr-m);
}
@media (min-width: 1025px) {
  .tabCards__item { width: 50%; }
}
.tabCards__item--prev {
  z-index: 1;
}
.tabCards__item--curr {
  z-index: 2;
}
@media (min-width: 1281px) {
  .tabCards__item--curr { width: 80%; }
  .tabCards__item--shrinked { width: 20%; }
}

/* __more */
.tabCards__more {
  display: block;
  padding: 20px 16px 12vw 16px;
  text-align: right;
}
@media (min-width: 769px) {
  .tabCards__more { padding-bottom: 20px; }
}

/* --- Simplified card classes (current LP renderer) --- */
.tabCards__cardItem {
  z-index: 0;
  position: relative;
  padding: 8px;
  width: 100%;
  will-change: transform;
  transition: transform var(--tr-m), opacity var(--tr-m);
}
@media (min-width: 1025px) {
  .tabCards__cardItem { width: 50%; }
}

.tabCards__cardInner {
  position: relative;
  width: 100%; height: 100%;
  background-color: var(--c-dark-gray2);
  transition: background-color var(--tr-m);
}
.tabCards__cardItem:hover .tabCards__cardInner {
  background-color: var(--c-dark-gray4);
}

.tabCards__cardContent {
  position: relative;
  z-index: 20;
  padding: 36px;
  width: 100%; height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 769px) {
  .tabCards__cardContent { min-height: 260px; }
}
@media (min-width: 1367px) {
  .tabCards__cardContent { min-height: 300px; }
}

.tabCards__cardTitle {
  font-family: var(--f-title);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-white);
  margin-bottom: 0.6em;
}
@media (min-width: 601px) {
  .tabCards__cardTitle { font-size: 2.2rem; }
}
@media (min-width: 1025px) {
  .tabCards__cardTitle { font-size: 2.4rem; }
}
@media (min-width: 1367px) {
  .tabCards__cardTitle { font-size: 2.6rem; }
}
@media (min-width: 1601px) {
  .tabCards__cardTitle { font-size: 3rem; }
}

.tabCards__cardText {
  font-size: 1.2rem;
  line-height: 2;
  white-space: pre-line;
  color: var(--c-white);
  opacity: 0.5;
}
@media (min-width: 601px) {
  .tabCards__cardText { font-size: 1.3rem; }
}
@media (min-width: 1025px) {
  .tabCards__cardText { font-size: 1.4rem; }
}
@media (min-width: 1367px) {
  .tabCards__cardText { font-size: 1.5rem; }
}
@media (min-width: 1601px) {
  .tabCards__cardText { font-size: 1.8rem; }
}

/* -----------------------------------------------------------
   2. TabCardsItem (TabCardsItem.vue)
   ----------------------------------------------------------- */
.tabCardsItem {
  z-index: 0;
  position: relative;
}

/* --shrinked modifier on root */
.tabCardsItem--shrinked .tabCardsItem__inner {
  width: 100%;
}
@media (max-width: 1024px) {
  .tabCardsItem--shrinked .tabCardsItem__text {
    display: block;
  }
}
.tabCardsItem--shrinked .tags__tag {
  margin: 6px;
}

/* __outer */
.tabCardsItem__outer {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
}

/* najiz skew pseudo-elements on __outer */
.tabCardsItem--theme-najiz .tabCardsItem__outer::before,
.tabCardsItem--theme-najiz .tabCardsItem__outer::after {
  display: none;
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-najiz .tabCardsItem__outer::before,
  .tabCardsItem--theme-najiz .tabCardsItem__outer::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -5%;
    right: 22%;
    width: 40%;
    height: 0%;
    opacity: 0;
    transition: opacity var(--tr-m), height var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: 50% 100%;
    pointer-events: none;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-najiz .tabCardsItem__outer::before,
  .tabCardsItem--theme-najiz .tabCardsItem__outer::after {
    width: 30%;
    right: 30%;
  }
}
.tabCardsItem--theme-najiz .tabCardsItem__outer::before {
  z-index: -1;
  background-color: #0d7166;
  transform: skewX(27deg);
}
.tabCardsItem--theme-najiz .tabCardsItem__outer::after {
  z-index: 1;
  background-color: #187b70;
  transform: skewX(-27deg);
}
.tabCardsItem--theme-najiz:hover .tabCardsItem__outer::before,
.tabCardsItem--theme-najiz:hover .tabCardsItem__outer::after,
.tabCardsItem--theme-hrdf:hover .tabCardsItem__outer::before {
  opacity: 1;
}
.tabCardsItem--theme-najiz:hover .tabCardsItem__outer::before {
  height: 115%;
}
.tabCardsItem--theme-najiz:hover .tabCardsItem__outer::after {
  height: 105%;
}

/* hrdf white skew pseudo-element on __outer */
.tabCardsItem--theme-hrdf .tabCardsItem__outer::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 64%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--tr-m), height var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform-origin: 50% 100%;
  pointer-events: none;
  z-index: 1;
  background-color: var(--c-white);
  transform: skewX(45deg);
}
@media (max-width: 1600px) {
  .tabCardsItem--theme-hrdf .tabCardsItem__outer::before { width: 80%; }
}
@media (max-width: 1024px) {
  .tabCardsItem--theme-hrdf .tabCardsItem__outer::before { display: none; }
}

/* __bgBox */
.tabCardsItem__bgBox {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--c-dark-gray2);
  transition: width var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
}
@media (min-width: 1025px) {
  .tabCardsItem:hover .tabCardsItem__bgBox {
    width: 100%;
  }
}
.tabCardsItem--theme-hrdf:hover .tabCardsItem__bgBox {
  z-index: auto;
}
.tabCardsItem--even .tabCardsItem__bgBox {
  left: auto;
  right: 0;
}

/* __bg */
.tabCardsItem__bg {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity var(--tr-m);
  overflow: hidden;
}
.tabCardsItem:hover .tabCardsItem__bg {
  opacity: 1;
}
@media (max-width: 1280px) {
  .tabCardsItem:hover .tabCardsItem__bg .imageBox {
    display: none;
  }
}
@media (max-width: 540px) {
  .tabCardsItem__bg {
    opacity: 1;
  }
  .tabCardsItem__bg .imageBox {
    display: none;
  }
}
.tabCardsItem__bg > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tabCardsItem--theme-lot .tabCardsItem__bg > div {
  transform: translate(-50%, -50%) scale(0.8);
  left: 14%;
}
.tabCardsItem--theme-redsea .tabCardsItem__bg > div {
  transform: translate(-50%, -50%) scale(1.2);
}

/* __logo */
.tabCardsItem__logo {
  z-index: 1;
  display: block;
  position: absolute;
  top: 36px;
  left: 36px;
  transform-origin: 0 0;
}
@media (min-width: 601px) {
  .tabCardsItem__logo { transform: scale(0.75); }
}

/* Logos that transition opacity (themes with color/white swap) */
.tabCardsItem--theme-redsea .tabCardsItem__logo,
.tabCardsItem--theme-trefl .tabCardsItem__logo,
.tabCardsItem--theme-ofix .tabCardsItem__logo,
.tabCardsItem--theme-najiz .tabCardsItem__logo,
.tabCardsItem--theme-hrdf .tabCardsItem__logo {
  transition: opacity var(--tr-m);
}

/* __logo--white: visible by default, hidden on hover */
.tabCardsItem--theme-redsea .tabCardsItem__logo--white,
.tabCardsItem--theme-trefl .tabCardsItem__logo--white,
.tabCardsItem--theme-ofix .tabCardsItem__logo--white,
.tabCardsItem--theme-najiz .tabCardsItem__logo--white,
.tabCardsItem--theme-hrdf .tabCardsItem__logo--white {
  opacity: 1;
}
.tabCardsItem--theme-redsea:hover .tabCardsItem__logo--white,
.tabCardsItem--theme-trefl:hover .tabCardsItem__logo--white,
.tabCardsItem--theme-ofix:hover .tabCardsItem__logo--white,
.tabCardsItem--theme-najiz:hover .tabCardsItem__logo--white,
.tabCardsItem--theme-hrdf:hover .tabCardsItem__logo--white {
  opacity: 0;
}
@media (max-width: 1024px) {
  .tabCardsItem--theme-hrdf:hover .tabCardsItem__logo--white { opacity: 1; }
}

/* __logo--color: hidden by default, visible on hover */
.tabCardsItem--theme-redsea .tabCardsItem__logo--color,
.tabCardsItem--theme-trefl .tabCardsItem__logo--color,
.tabCardsItem--theme-ofix .tabCardsItem__logo--color,
.tabCardsItem--theme-najiz .tabCardsItem__logo--color,
.tabCardsItem--theme-hrdf .tabCardsItem__logo--color {
  opacity: 0;
}
.tabCardsItem--theme-redsea:hover .tabCardsItem__logo--color,
.tabCardsItem--theme-trefl:hover .tabCardsItem__logo--color,
.tabCardsItem--theme-ofix:hover .tabCardsItem__logo--color,
.tabCardsItem--theme-najiz:hover .tabCardsItem__logo--color,
.tabCardsItem--theme-hrdf:hover .tabCardsItem__logo--color {
  opacity: 1;
}
@media (max-width: 1024px) {
  .tabCardsItem--theme-hrdf:hover .tabCardsItem__logo--color { opacity: 0; }
}

/* najiz color logo white skew pseudo-element */
.tabCardsItem--theme-najiz .tabCardsItem__logo--color::before {
  pointer-events: none;
  z-index: -1;
  content: '';
  display: block;
  position: absolute;
  top: -60%;
  left: -15%;
  width: 130%;
  height: 0%;
  background-color: var(--c-white);
  transition: height var(--tr-m);
  transform: skewX(-27deg) translateX(18%);
  transform-origin: 50% 0;
}
.tabCardsItem--theme-najiz:hover .tabCardsItem__logo--color::before {
  height: 200%;
}

/* Per-theme logo max-widths */
.tabCardsItem--theme-lot .tabCardsItem__logo { max-width: 70px; }
@media (min-width: 601px) {
  .tabCardsItem--theme-lot .tabCardsItem__logo { max-width: unset; }
}
.tabCardsItem--theme-santander .tabCardsItem__logo { max-width: 110px; }
@media (min-width: 601px) {
  .tabCardsItem--theme-santander .tabCardsItem__logo { max-width: unset; }
}
.tabCardsItem--theme-stc .tabCardsItem__logo { max-width: 60px; }
@media (min-width: 601px) {
  .tabCardsItem--theme-stc .tabCardsItem__logo { max-width: unset; }
}
.tabCardsItem--theme-ssc .tabCardsItem__logo { max-width: 120px; }
@media (min-width: 601px) {
  .tabCardsItem--theme-ssc .tabCardsItem__logo { max-width: unset; }
}
.tabCardsItem--theme-redsea .tabCardsItem__logo { max-width: 80px; }
@media (min-width: 601px) {
  .tabCardsItem--theme-redsea .tabCardsItem__logo { max-width: 184px; }
}
.tabCardsItem--theme-zabka .tabCardsItem__logo { max-width: 90px; }
@media (min-width: 601px) {
  .tabCardsItem--theme-zabka .tabCardsItem__logo { max-width: unset; }
}

/* __inner */
.tabCardsItem__inner {
  z-index: 20;
  position: relative;
  padding: 36px;
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: width var(--tr) ease-in-out;
  overflow: hidden;
}
@media (min-width: 361px) {
  .tabCardsItem__inner {
    padding: 100% 0 0 0;
    height: 0;
    min-height: unset;
  }
}
@media screen and (min-width: 769px) {
  .tabCardsItem__inner {
    padding: 36px;
    height: 100%;
    min-height: 380px;
  }
}
@media (min-width: 1025px) {
  .tabCardsItem__inner {
    padding: 100% 0 0 0;
    height: 0;
    min-height: unset;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem__inner {
    padding: 36px;
    height: 100%;
    min-height: 290px;
  }
}
@media (min-width: 1367px) {
  .tabCardsItem__inner {
    padding: 36px;
    height: 100%;
    min-height: 380px;
  }
}
@media screen and (min-width: 1441px) {
  .tabCardsItem__inner { min-height: 340px; }
}
@media (min-width: 1601px) {
  .tabCardsItem__inner {
    padding: 36px;
    height: 100%;
    min-height: 380px;
  }
}

/* __inner hover: width shrink to show images */
@media (min-width: 1281px) {
  .tabCardsItem:hover .tabCardsItem__inner { width: 60%; }
}
@media (min-width: 1601px) {
  .tabCardsItem:hover .tabCardsItem__inner { width: 40%; }
}

/* __inner color transitions for ofix theme */
.tabCardsItem--theme-ofix .tabCardsItem__inner {
  transition: color var(--tr-m);
}
.tabCardsItem--theme-ofix:hover .tabCardsItem__inner {
  color: var(--c-dark);
}

/* __inner z-index overrides for uep */
.tabCardsItem--theme-uep .tabCardsItem__inner {
  z-index: 2;
}

/* __inner hover: margin-left auto to push content right */
.tabCardsItem--theme-lot:hover .tabCardsItem__inner,
.tabCardsItem--theme-uep:hover .tabCardsItem__inner,
.tabCardsItem--theme-redsea:hover .tabCardsItem__inner,
.tabCardsItem--theme-trefl:hover .tabCardsItem__inner {
  margin-left: auto;
  z-index: 10;
}

/* __inner hover: santander/ofix width overrides */
@media (min-width: 1281px) {
  .tabCardsItem--theme-santander:hover .tabCardsItem__inner,
  .tabCardsItem--theme-ofix:hover .tabCardsItem__inner {
    width: 50%;
    z-index: 10;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-santander:hover .tabCardsItem__inner,
  .tabCardsItem--theme-ofix:hover .tabCardsItem__inner {
    width: 43%;
  }
}

/* __inner hover: najiz width overrides */
@media (min-width: 1281px) {
  .tabCardsItem--theme-najiz:hover .tabCardsItem__inner {
    width: 50%;
    z-index: 10;
    padding-right: 15px;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-najiz:hover .tabCardsItem__inner {
    width: 43%;
    padding-right: 36px;
  }
}

/* __inner hover: ssc width overrides */
@media (min-width: 1281px) {
  .tabCardsItem--theme-ssc:hover .tabCardsItem__inner {
    width: 50%;
    z-index: 10;
    padding-right: 0;
  }
}
@media (min-width: 1367px) {
  .tabCardsItem--theme-ssc:hover .tabCardsItem__inner {
    padding-right: 36px;
  }
}

/* __inner hover: zabka/hrdf/uep/stc/redsea/trefl width overrides */
@media (min-width: 1281px) {
  .tabCardsItem--theme-zabka:hover .tabCardsItem__inner,
  .tabCardsItem--theme-hrdf:hover .tabCardsItem__inner,
  .tabCardsItem--theme-uep:hover .tabCardsItem__inner,
  .tabCardsItem--theme-stc:hover .tabCardsItem__inner,
  .tabCardsItem--theme-redsea:hover .tabCardsItem__inner,
  .tabCardsItem--theme-trefl:hover .tabCardsItem__inner {
    width: 50%;
    z-index: 10;
  }
}

/* hrdf hover color inversion */
.tabCardsItem--theme-hrdf:hover .tabCardsItem__inner {
  color: var(--c-dark);
}
@media (max-width: 1024px) {
  .tabCardsItem--theme-hrdf:hover .tabCardsItem__inner {
    color: var(--c-white);
  }
}

/* __content */
.tabCardsItem__content {
  position: relative;
  pointer-events: none;
  text-align: right;
  align-self: flex-end;
  z-index: 1;
}
@media (min-width: 361px) {
  .tabCardsItem__content { padding: 18px; }
}
@media screen and (min-width: 769px) {
  .tabCardsItem__content { padding: 0; }
}
@media (min-width: 1025px) {
  .tabCardsItem__content {
    padding: 36px;
  }
  .tabCardsItem:hover .tabCardsItem__content {
    padding: 36px;
    padding-bottom: 0;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem__content { padding: 0; }
  .tabCardsItem:hover .tabCardsItem__content {
    padding: 36px 0 0 36px;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem__content { padding: 0; }
  .tabCardsItem--shrinked .tabCardsItem__content { padding: 0; }
}

/* __content hover padding overrides for lot/rcgnz/ghc */
@media (min-width: 1025px) {
  .tabCardsItem--theme-lot:hover .tabCardsItem__content {
    padding: 36px;
    padding-bottom: 0;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-lot:hover .tabCardsItem__content { padding: 0; }
}

/* __text */
.tabCardsItem__text {
  position: relative;
  font-size: 1.2rem;
  line-height: 2;
  max-width: 500px;
  margin-top: 13px;
  transition: opacity var(--tr) var(--tr-m), transform var(--tr-m) var(--tr-l);
}
.tabCardsItem__text.shrink {
  position: absolute;
  font-size: 0;
  opacity: 0;
  transform: translateX(-1000px);
  visibility: hidden;
  transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
}
@media (min-width: 601px) {
  .tabCardsItem__text { font-size: 1.3rem; }
}
@media (min-width: 1025px) {
  .tabCardsItem__text { font-size: 1.4rem; }
}
@media (min-width: 1367px) {
  .tabCardsItem__text { font-size: 1.5rem; }
}
@media (min-width: 1601px) {
  .tabCardsItem__text { font-size: 1.8rem; }
}

/* __button */
.tabCardsItem__button {
  align-self: flex-end;
  transition: opacity var(--tr-m), margin var(--tr-m), height var(--tr-m);
  opacity: 0;
  margin-top: 0;
  height: 0;
}
@media (max-width: 540px) {
  .tabCardsItem__button {
    opacity: 1;
    height: 24px;
    margin: 0 18px 36px 18px;
  }
}
.tabCardsItem:hover .tabCardsItem__button {
  margin-top: 33px;
  height: 24px;
  opacity: 1;
}
@media (min-width: 361px) {
  .tabCardsItem:hover .tabCardsItem__button {
    margin: 0 18px 36px 18px;
  }
}
@media screen and (min-width: 769px) {
  .tabCardsItem:hover .tabCardsItem__button {
    margin: 18px 0 0 18px;
  }
}
@media (min-width: 1025px) {
  .tabCardsItem:hover .tabCardsItem__button {
    margin: 2rem 36px 36px 36px;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem:hover .tabCardsItem__button {
    margin: 2rem 0 0 0;
  }
}

/* __button hover theme-specific margin overrides */
@media (min-width: 1025px) {
  .tabCardsItem--theme-lot:hover .tabCardsItem__button,
  .tabCardsItem--theme-uep:hover .tabCardsItem__button {
    margin: 2rem 36px 36px 36px;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-lot:hover .tabCardsItem__button,
  .tabCardsItem--theme-uep:hover .tabCardsItem__button {
    margin: 2rem 0 0 0;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-ssc:hover .tabCardsItem__button,
  .tabCardsItem--theme-zabka:hover .tabCardsItem__button,
  .tabCardsItem--theme-najiz:hover .tabCardsItem__button,
  .tabCardsItem--theme-hrdf:hover .tabCardsItem__button,
  .tabCardsItem--theme-ofix:hover .tabCardsItem__button,
  .tabCardsItem--theme-trefl:hover .tabCardsItem__button {
    margin: 2rem 0 0 0;
  }
}

/* __button lineButton mobile override */
@media (max-width: 540px) {
  .tabCardsItem__button .lineButton:hover .lineButton__text {
    transform: none;
  }
}

/* __button color overrides for dark-bg themes */
.tabCardsItem--theme-ofix:hover .tabCardsItem__button > a {
  color: var(--c-dark);
}

/* -----------------------------------------------------------
   3. Image layers (.tabCardsItem__image)
   ----------------------------------------------------------- */
.tabCardsItem__image {
  display: block;
  position: absolute;
  pointer-events: none;
}
@media (min-width: 1281px) {
  .tabCardsItem__image {
    opacity: 0;
    visibility: hidden;
  }
}
.tabCardsItem:hover .tabCardsItem__image {
  opacity: 1;
  visibility: visible;
}

/* --- theme-default --- */
.tabCardsItem--theme-default .tabCardsItem__image {
  width: 80%;
  top: 0;
  left: 110%;
  transition: opacity var(--tr-m), visibility var(--tr-m), transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0);
}
.tabCardsItem--theme-default:hover .tabCardsItem__image {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr), transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(-10%);
}
.tabCardsItem--theme-default.tabCardsItem--even .tabCardsItem__image {
  left: -70%;
}

/* --- theme-santander --- */
.tabCardsItem--theme-santander .tabCardsItem__image--mid {
  overflow: hidden;
  top: 25%;
  left: 10px;
  width: 40%;
  transition: opacity var(--tr-m), visibility var(--tr-m), transform var(--tr-m) var(--tr);
  transform: translate(0, 0);
}
@media (min-width: 601px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--mid {
    top: 20%;
    right: 10px;
    bottom: unset;
    left: unset;
  }
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--mid {
    width: 35%;
    top: 25%;
    right: 10px;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--mid {
    width: 50%;
    top: unset;
    bottom: 10%;
    right: 36px;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--mid {
    width: 62%;
    bottom: 0;
    right: 16px;
  }
}
.tabCardsItem--theme-santander .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--mid > div {
    transform: translateY(20%);
  }
}
.tabCardsItem--theme-santander .tabCardsItem__image--high {
  width: 30%;
  top: 25%;
  left: 10%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
}
@media (min-width: 601px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--high {
    top: 10%;
    right: 0;
    bottom: unset;
    left: unset;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--high {
    width: 25%;
    right: 16px;
    bottom: 10%;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-santander .tabCardsItem__image--high {
    width: 30%;
    right: -16px;
    bottom: 0;
  }
}
.tabCardsItem--theme-santander .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(20%) scale(0.8);
}
/* santander hover */
.tabCardsItem--theme-santander:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-santander:hover .tabCardsItem__image--mid { top: 15%; }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-santander:hover .tabCardsItem__image--mid { top: unset; }
}
.tabCardsItem--theme-santander:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0%);
}
.tabCardsItem--theme-santander:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-santander:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0%) scale(1);
}

/* --- theme-stc --- */
.tabCardsItem--theme-stc .tabCardsItem__image--mid {
  width: 40%;
  left: 5%;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
}
@media (min-width: 601px) {
  .tabCardsItem--theme-stc .tabCardsItem__image--mid {
    width: 55%;
    right: 0;
    left: unset;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-stc .tabCardsItem__image--mid {
    right: 10%;
    bottom: 0;
    transform: translate(10%, 0);
  }
}
.tabCardsItem--theme-stc .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-stc .tabCardsItem__image--mid > div {
    transform: translateY(20%);
  }
}
.tabCardsItem--theme-stc .tabCardsItem__image--low {
  z-index: 2;
  width: 40%;
  right: 25%;
  top: 10%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(25%, 0);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-stc .tabCardsItem__image--low { top: -10%; }
}
.tabCardsItem--theme-stc .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(20%) scale(0.8);
}
.tabCardsItem--theme-stc .tabCardsItem__image--high {
  width: 65%;
  right: -5%;
  top: 50%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -50%);
}
.tabCardsItem--theme-stc .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(20%) scale(0.8);
}
.tabCardsItem--theme-stc .tabCardsItem__image--center {
  width: 10%;
  top: 30%;
  right: 50%;
  transform: translate(50%, -30%);
  transition: opacity var(--tr-m), visibility var(--tr-m);
}
.tabCardsItem--theme-stc .tabCardsItem__image--center > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(20%) scale(0.8);
}
/* stc hover */
.tabCardsItem--theme-stc:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-stc:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0%);
}
.tabCardsItem--theme-stc:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-stc:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0%);
}
.tabCardsItem--theme-stc:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-stc:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0%) scale(1);
}
.tabCardsItem--theme-stc:hover .tabCardsItem__image--center {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-stc:hover .tabCardsItem__image--center > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(0%) scale(1);
}

/* --- theme-lot --- */
.tabCardsItem--theme-lot .tabCardsItem__image--mid {
  z-index: 1;
  overflow: hidden;
  width: 55%;
  left: 5%;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0px, 0px);
}
@media (max-width: 1600px) {
  .tabCardsItem--theme-lot .tabCardsItem__image--mid { width: 50%; }
}
@media (max-width: 1280px) {
  .tabCardsItem--theme-lot .tabCardsItem__image--mid { display: none; }
}
.tabCardsItem--theme-lot .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(40%);
}
.tabCardsItem--theme-lot .tabCardsItem__image--low {
  z-index: 0;
  width: 80%;
  right: 0;
  top: 0%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -50%);
}
@media (max-width: 1600px) {
  .tabCardsItem--theme-lot .tabCardsItem__image--low {
    width: 90%;
    transform: translate(0px, -35%);
  }
}
@media (max-width: 1280px) {
  .tabCardsItem--theme-lot .tabCardsItem__image--low {
    width: 70%;
    top: 6vw;
    right: 3vw;
  }
}
@media (max-width: 540px) {
  .tabCardsItem--theme-lot .tabCardsItem__image--low {
    width: 65%;
    top: 12vw;
  }
}
.tabCardsItem--theme-lot .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(15%, -5%) scale(0.8);
}
.tabCardsItem--theme-lot .tabCardsItem__image--high {
  z-index: 2;
  width: 60%;
  right: 10%;
  top: 30%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -52%);
}
@media (max-width: 1280px) {
  .tabCardsItem--theme-lot .tabCardsItem__image--high {
    width: 65%;
    top: 40%;
    right: 20%;
    transition: opacity var(--tr-m), visibility var(--tr-m), transform var(--tr-m);
  }
}
@media (max-width: 540px) {
  .tabCardsItem--theme-lot .tabCardsItem__image--high {
    width: 55%;
    top: 35%;
  }
}
.tabCardsItem--theme-lot .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(40%, -10%) scale(0.7);
}
/* lot hover */
.tabCardsItem--theme-lot:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-m) var(--tr-m), visibility var(--tr-m) var(--tr-m);
}
.tabCardsItem--theme-lot:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(20%);
}
.tabCardsItem--theme-lot:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-lot:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) scale(1);
}
.tabCardsItem--theme-lot:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
@media (max-width: 1280px) {
  .tabCardsItem--theme-lot:hover .tabCardsItem__image--high {
    transform: translate(0, -35%);
    transition: opacity var(--tr-m), visibility var(--tr-m), transform var(--tr-m);
  }
}
.tabCardsItem--theme-lot:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) scale(1);
}

/* --- theme-ssc --- */
.tabCardsItem--theme-ssc .tabCardsItem__image--mid {
  z-index: 1;
  overflow: hidden;
  right: -10%;
  width: 80%;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0px, 0px);
}
.tabCardsItem--theme-ssc .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(-10%, 65%) rotate(-10deg) scale(1.2);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-ssc .tabCardsItem__image--mid {
    right: -10%;
    width: 65%;
    bottom: 0;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-ssc .tabCardsItem__image--mid { width: 80%; }
}
.tabCardsItem--theme-ssc .tabCardsItem__image--low {
  z-index: 0;
  right: -8%;
  width: 50%;
  top: 15%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -50%);
}
.tabCardsItem--theme-ssc .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(10%, -15%) scale(0.6);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-ssc .tabCardsItem__image--low {
    right: -4%;
    width: 40%;
    top: 50%;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-ssc .tabCardsItem__image--low {
    right: -8%;
    width: 50%;
    top: 15%;
  }
}
.tabCardsItem--theme-ssc .tabCardsItem__image--high {
  z-index: 2;
  width: 40%;
  right: -2%;
  top: 45%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -50%);
}
.tabCardsItem--theme-ssc .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(10%, 30%) rotate(10deg) scale(1.2);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-ssc .tabCardsItem__image--high {
    width: 35%;
    right: -2%;
    top: 60%;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-ssc .tabCardsItem__image--high {
    width: 40%;
    top: 45%;
  }
}
/* ssc hover */
.tabCardsItem--theme-ssc:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-ssc:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 45%) rotate(0deg) scale(1);
}
.tabCardsItem--theme-ssc:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-ssc:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) scale(1);
}
.tabCardsItem--theme-ssc:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-ssc:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) rotate(0deg) scale(1);
}

/* --- theme-zabka --- */
.tabCardsItem--theme-zabka .tabCardsItem__image--mid {
  z-index: 1;
  width: 60%;
  right: 0;
  top: -10%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-zabka .tabCardsItem__image--mid {
    width: 60%;
    right: 0;
    top: 0;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-zabka .tabCardsItem__image--mid {
    right: -13%;
    top: 55%;
    transform: translate(0, -50%);
  }
}
.tabCardsItem--theme-zabka .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(8%, 32%);
}
.tabCardsItem--theme-zabka .tabCardsItem__image--low {
  display: none;
  z-index: 0;
  overflow: hidden;
  width: 110%;
  right: 0;
  top: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0px, 0px);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-zabka .tabCardsItem__image--low { display: block; }
}
.tabCardsItem--theme-zabka .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, -40%) rotate(-30deg) scale(0.6);
}
.tabCardsItem--theme-zabka .tabCardsItem__image--high {
  z-index: 2;
  width: 50%;
  left: 5%;
  top: 50%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -50%);
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-zabka .tabCardsItem__image--high {
    left: 5%;
    top: 30%;
    width: 40%;
  }
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-zabka .tabCardsItem__image--high {
    width: 50%;
    right: 10%;
    top: 40%;
    left: unset;
  }
}
.tabCardsItem--theme-zabka .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(8%, 32%) scale(1.2);
}
/* zabka hover */
.tabCardsItem--theme-zabka:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-zabka:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}
.tabCardsItem--theme-zabka:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-zabka:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(10%, -30%) rotate(0deg) scale(1);
}
.tabCardsItem--theme-zabka:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-zabka:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) scale(1);
}

/* --- theme-redsea --- */
.tabCardsItem--theme-redsea .tabCardsItem__image--mid {
  z-index: 1;
  width: 70%;
  left: 50%;
  top: 35%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(-50%, -50%);
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-redsea .tabCardsItem__image--mid {
    width: 50%;
    left: 30%;
    top: 50%;
  }
}
.tabCardsItem--theme-redsea .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(2%, 20%);
}
.tabCardsItem--theme-redsea .tabCardsItem__image--low {
  z-index: 0;
  width: 70%;
  left: 50%;
  top: 35%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(-50%, -50%);
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-redsea .tabCardsItem__image--low {
    width: 50%;
    left: 30%;
    top: 50%;
  }
}
.tabCardsItem--theme-redsea .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(1%, 10%);
}
.tabCardsItem--theme-redsea .tabCardsItem__image--high {
  z-index: 2;
  width: 70%;
  left: 50%;
  top: 35%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(-50%, -50%);
}
@media (min-width: 1025px) {
  .tabCardsItem--theme-redsea .tabCardsItem__image--high {
    width: 50%;
    left: 30%;
    top: 50%;
  }
}
.tabCardsItem--theme-redsea .tabCardsItem__image--high > div {
  overflow: visible;
  position: relative;
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(3%, 30%) rotate(-6deg);
}
.tabCardsItem--theme-redsea .tabCardsItem__image--high > div::before {
  content: '';
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  width: 36%;
  padding-top: 67.32%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(2px);
}
/* redsea hover */
.tabCardsItem--theme-redsea:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-redsea:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}
.tabCardsItem--theme-redsea:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-redsea:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}
.tabCardsItem--theme-redsea:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-redsea:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) rotate(-6deg);
}

/* --- theme-najiz --- */
.tabCardsItem--theme-najiz .tabCardsItem__image--mid {
  z-index: 2;
  overflow: hidden;
  right: 0;
  width: 70%;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(5%, 0);
}
.tabCardsItem--theme-najiz .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 30%);
}
@media (min-width: 1281px) {
  .tabCardsItem--theme-najiz .tabCardsItem__image--mid {
    right: 0;
    width: 60%;
  }
}
@media (min-width: 1601px) {
  .tabCardsItem--theme-najiz .tabCardsItem__image--mid {
    right: 0;
    width: 70%;
  }
}
.tabCardsItem--theme-najiz .tabCardsItem__image--high {
  z-index: 3;
  width: 70%;
  bottom: 0;
  right: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, 5%);
}
.tabCardsItem--theme-najiz .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 10%) scale(0.8);
}
/* najiz hover */
.tabCardsItem--theme-najiz:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-najiz:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 10%);
}
.tabCardsItem--theme-najiz:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-najiz:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) scale(1);
}

/* --- theme-uep --- */
.tabCardsItem--theme-uep .tabCardsItem__image--mid {
  z-index: 1;
  overflow: hidden;
  width: 50%;
  left: 0;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translateX(4%);
}
.tabCardsItem--theme-uep .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 40%);
}
@media (min-width: 1367px) {
  .tabCardsItem--theme-uep .tabCardsItem__image--mid { width: 60%; }
}
.tabCardsItem--theme-uep .tabCardsItem__image--low {
  z-index: 0;
  width: 70%;
  top: 50%;
  left: 10%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(10%, -50%);
}
.tabCardsItem--theme-uep .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: rotate(-10deg) scale(0.8);
}
.tabCardsItem--theme-uep .tabCardsItem__image--high {
  z-index: 2;
  left: 0;
  width: 40%;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, 30%);
}
.tabCardsItem--theme-uep .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 20%);
}
/* uep hover */
.tabCardsItem--theme-uep:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-uep:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 20%);
}
.tabCardsItem--theme-uep:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-uep:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: rotate(0deg) scale(1);
}
.tabCardsItem--theme-uep:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-uep:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}

/* --- theme-ofix --- */
.tabCardsItem--theme-ofix .tabCardsItem__image--mid {
  z-index: 1;
  width: 60%;
  top: 50%;
  right: -5%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -50%);
}
.tabCardsItem--theme-ofix .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(-2%, -20%);
}
@media (min-width: 1367px) {
  .tabCardsItem--theme-ofix .tabCardsItem__image--mid { width: 70%; }
}
.tabCardsItem--theme-ofix .tabCardsItem__image--low {
  z-index: 0;
  overflow: hidden;
  width: 125%;
  right: 0;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translateX(10%);
}
.tabCardsItem--theme-ofix .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 75%);
}
.tabCardsItem--theme-ofix .tabCardsItem__image--high {
  z-index: 2;
  width: 40%;
  right: 0;
  top: 50%;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(0, -50%);
}
.tabCardsItem--theme-ofix .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: scale(0.5);
}
/* ofix hover */
.tabCardsItem--theme-ofix:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-ofix:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}
.tabCardsItem--theme-ofix:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-ofix:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 55%);
}
.tabCardsItem--theme-ofix:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-l) var(--tr-m), visibility var(--tr-l) var(--tr-m);
}
.tabCardsItem--theme-ofix:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-l) var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: scale(1);
}

/* --- theme-trefl --- */
.tabCardsItem--theme-trefl .tabCardsItem__image--mid {
  z-index: 1;
  width: 50%;
  top: 95%;
  left: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translate(20%, -110%);
}
.tabCardsItem--theme-trefl .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, -20%) rotate(15deg);
}
.tabCardsItem--theme-trefl .tabCardsItem__image--low {
  z-index: 0;
  overflow: hidden;
  width: 90%;
  bottom: 0;
  right: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
  transform: translateX(0%);
}
.tabCardsItem--theme-trefl .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 20%);
}
/* trefl hover */
.tabCardsItem--theme-trefl:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-trefl:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) rotate(0deg);
}
.tabCardsItem--theme-trefl:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-trefl:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}

/* --- theme-hrdf --- */
.tabCardsItem--theme-hrdf .tabCardsItem__image--mid {
  z-index: 3;
  width: 60%;
  right: -6vw;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
}
.tabCardsItem--theme-hrdf .tabCardsItem__image--mid > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, -20%) rotate(15deg);
}
@media (max-width: 1600px) {
  .tabCardsItem--theme-hrdf .tabCardsItem__image--mid { width: 65%; }
}
.tabCardsItem--theme-hrdf .tabCardsItem__image--low {
  z-index: 3;
  overflow: hidden;
  width: 38%;
  right: 10vw;
  bottom: 0;
  transition: opacity var(--tr-m), visibility var(--tr-m);
}
.tabCardsItem--theme-hrdf .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 20%);
}
@media (max-width: 1600px) {
  .tabCardsItem--theme-hrdf .tabCardsItem__image--low { width: 43%; }
}
.tabCardsItem--theme-hrdf .tabCardsItem__image--high {
  z-index: 0;
  overflow: hidden;
  width: 45%;
  right: 15vw;
  bottom: 5vw;
  transition: opacity var(--tr-m), visibility var(--tr-m);
}
.tabCardsItem--theme-hrdf .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 20%);
}
@media (max-width: 1600px) {
  .tabCardsItem--theme-hrdf .tabCardsItem__image--high {
    right: 5vw;
    bottom: 7vw;
    width: 50%;
  }
}
@media (max-width: 1280px) {
  .tabCardsItem--theme-hrdf .tabCardsItem__image--high {
    right: 0;
    bottom: 5vw;
    width: 60%;
  }
}
/* hrdf hover */
.tabCardsItem--theme-hrdf:hover .tabCardsItem__image--mid {
  transition: opacity var(--tr-l) var(--tr), visibility var(--tr-l) var(--tr);
}
.tabCardsItem--theme-hrdf:hover .tabCardsItem__image--mid > div {
  transition: transform var(--tr-l) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%) rotate(0deg);
}
.tabCardsItem--theme-hrdf:hover .tabCardsItem__image--low {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-hrdf:hover .tabCardsItem__image--low > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}
.tabCardsItem--theme-hrdf:hover .tabCardsItem__image--high {
  transition: opacity var(--tr-m) var(--tr), visibility var(--tr-m) var(--tr);
}
.tabCardsItem--theme-hrdf:hover .tabCardsItem__image--high > div {
  transition: transform var(--tr-m) var(--tr) cubic-bezier(0.33, 1, 0.68, 1);
  transform: translate(0%, 0%);
}

/* -----------------------------------------------------------
   4. Tags component (Tags.vue)
   ----------------------------------------------------------- */
.tags {
  position: relative;
  display: block;
  margin: -2px -6px;
  margin-bottom: 2rem;
}
@media (min-width: 1367px) {
  .tags {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
}

.tags__tag {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 4px;
  color: currentColor;
  font-size: 1.2rem;
  line-height: 1.1111;
}
@media (min-width: 601px) {
  .tags__tag {
    padding: 0.4em 0.8em;
    margin: 2px 6px;
  }
}
@media (min-width: 441px) {
  .tags__tag { font-size: 1.4rem; }
}
@media (min-width: 769px) {
  .tags__tag { font-size: 1.6rem; }
}
@media (min-width: 1601px) {
  .tags__tag { font-size: 1.8rem; }
}

.tags__tag::before {
  z-index: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 0);
  opacity: 0.05;
  transition: opacity var(--tr-m), background-color var(--tr-m);
}

.tags__tag > span {
  z-index: 1;
  position: relative;
  opacity: 0.33;
  transition: opacity var(--tr-m), color var(--tr-m);
  backface-visibility: hidden;
}

/* --active state */
.tags--active .tags__tag::before {
  opacity: 0.2;
}
.tags--active .tags__tag > span {
  opacity: 1;
}

/* Per-theme active colors (11 homepage themes) */
.tags--theme-lot.tags--active .tags__tag::before {
  opacity: 1;
  background-color: var(--c-white);
}
.tags--theme-lot.tags--active .tags__tag > span {
  color: #0f2c64;
}

.tags--theme-santander.tags--active .tags__tag::before {
  opacity: 0.2;
}
.tags--theme-santander.tags--active .tags__tag > span {
  opacity: 1;
}

.tags--theme-stc.tags--active .tags__tag::before {
  opacity: 1;
  background-color: #7535B2;
}
.tags--theme-stc.tags--active .tags__tag > span {
  opacity: 1;
  color: var(--c-white);
}

.tags--theme-ssc.tags--active .tags__tag::before {
  opacity: 0.2;
}
.tags--theme-ssc.tags--active .tags__tag > span {
  opacity: 1;
}

.tags--theme-zabka.tags--active .tags__tag::before {
  opacity: 1;
  background-color: #45ac34;
}
.tags--theme-zabka.tags--active .tags__tag > span {
  opacity: 1;
  color: var(--c-white);
}

.tags--theme-redsea.tags--active .tags__tag::before {
  background-color: transparent;
  border: 1px solid var(--c-white);
  opacity: 1;
}
.tags--theme-redsea.tags--active .tags__tag > span {
  color: var(--c-white);
}

.tags--theme-najiz.tags--active .tags__tag::before {
  opacity: 1;
  background-color: #04574e;
}
.tags--theme-najiz.tags--active .tags__tag > span {
  opacity: 1;
  color: #3A9F93;
}

.tags--theme-uep.tags--active .tags__tag::before {
  background-color: #E4F2EB;
  border: 1px solid #E4F2EB;
  opacity: 1;
}
.tags--theme-uep.tags--active .tags__tag > span {
  color: #02532A;
}

.tags--theme-hrdf.tags--active .tags__tag::before {
  opacity: 1;
  background-color: #55AF47;
}
.tags--theme-hrdf.tags--active .tags__tag > span {
  opacity: 1;
  color: var(--c-white);
}

.tags--theme-ofix.tags--active .tags__tag::before {
  opacity: 1;
  background-color: var(--c-white);
}
.tags--theme-ofix.tags--active .tags__tag > span {
  opacity: 1;
  color: #f86f21;
}

.tags--theme-trefl.tags--active .tags__tag::before {
  opacity: 0.2;
}
.tags--theme-trefl.tags--active .tags__tag > span {
  opacity: 1;
}

/* ============================================================
   SECTION: TextAccordionHero (Accordion)
   Source: components/TextAccordionHero.vue
   ============================================================ */
.textAccordionHero {
  z-index: 0;
  position: relative;
  padding-bottom: 5vw;
}
@media (min-width: 601px) {
  .textAccordionHero {
    padding-bottom: 4vw;
  }
}
@media (min-width: 1025px) {
  .textAccordionHero {
    padding-bottom: 3vw;
  }
}

.textAccordionHero::before {
  z-index: 0;
  content: '';
  display: block;
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background-color: var(--c-bg-section);
  transform: scale(0, 1);
  transform-origin: 0% 50%;
}

@keyframes textAccordionHeroShow {
  0% { transform: scale(0, 1); transform-origin: 0% 50%; }
  49% { transform: scale(1, 1); transform-origin: 0% 50%; }
  100% { transform: scale(0.36, 1); transform-origin: 0% 50%; }
}
@keyframes textAccordionHeroShowTablet {
  0% { transform: scale(0, 1); transform-origin: 0% 50%; }
  49% { transform: scale(1, 1); transform-origin: 0% 50%; }
  100% { transform: scale(0.68, 1); transform-origin: 0% 50%; }
}
@keyframes textAccordionHeroShowLaptop {
  0% { transform: scale(0, 1); transform-origin: 0% 50%; }
  49% { transform: scale(1, 1); transform-origin: 0% 50%; }
  100% { transform: scale(0.64, 1); transform-origin: 0% 50%; }
}

.textAccordionHero--showBg::before {
  transform: scale(0.36, 1);
  transform-origin: 0% 50%;
  animation: textAccordionHeroShow var(--tr-slow) var(--ease-in-out-cubic);
}
@media (min-width: 769px) {
  .textAccordionHero--showBg::before {
    transform: scale(0.68, 1);
    transform-origin: 0% 50%;
    animation: textAccordionHeroShowTablet var(--tr-slow) var(--ease-in-out-cubic);
  }
}
@media (min-width: 1281px) {
  .textAccordionHero--showBg::before {
    transform: scale(0.64, 1);
    transform-origin: 0% 50%;
    animation: textAccordionHeroShowLaptop var(--tr-slow) var(--ease-in-out-cubic);
  }
}

.textAccordionHero__content {
  z-index: 1;
  position: relative;
  padding-top: 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 601px) {
  .textAccordionHero__content { justify-content: unset; }
}
@media (min-width: 769px) {
  .textAccordionHero__content {
    padding-right: 3rem;
    flex-direction: row;
  }
}
@media (min-width: 961px) {
  .textAccordionHero__content { min-height: 100vh; min-height: 100dvh; }
}

.textAccordionHero__outer {
  position: relative;
  display: flex;
  align-items: flex-end;
  order: 2;
  transition: transform 0.8s;
}
@media (min-width: 481px) {
  .textAccordionHero__outer { order: unset; }
}
@media (min-width: 601px) {
  .textAccordionHero__outer { flex-grow: 1; }
}
@media (min-width: 769px) {
  .textAccordionHero__outer {
    flex-shrink: 0;
    display: block;
    padding: 0;
    width: 64%;
  }
}
@media (min-width: 1025px) {
  .textAccordionHero__outer { padding-top: 3vw; }
}
@media (min-width: 1281px) {
  .textAccordionHero__outer { width: 73%; }
}

.textAccordionHero--translate .textAccordionHero__outer {
  transform: translateX(-34%);
  transition: transform 0.8s;
  flex-shrink: 0;
}
@media (min-width: 1281px) {
  .textAccordionHero--translate .textAccordionHero__outer {
    transform: translateX(-60%);
  }
}

.textAccordionHero__secondaryImage {
  transition: opacity 0.8s, visibility 0.8s, transform 0.8s;
}

.textAccordionHero__container {
  box-sizing: border-box;
  padding: 0 6vw 1vw;
}
@media (min-width: 1281px) {
  .textAccordionHero__container {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}

.textAccordionHero__title {
  padding-top: 15vh;
  position: relative;
}
@media (min-width: 769px) {
  .textAccordionHero__title { padding-top: 0; }
}

.textAccordionHero__description {
  font-size: 1.6rem;
  line-height: 2;
  font-weight: 500;
  white-space: pre-line;
  max-width: 995px;
  margin-top: 24px;
}
@media (min-width: 769px) {
  .textAccordionHero__description { font-size: 1.8rem; }
}
@media (min-width: 1025px) {
  .textAccordionHero__description { margin-top: 3vw; font-size: 2.2rem; }
}
@media (min-width: 1601px) {
  .textAccordionHero__description { margin-top: 3.75vw; font-size: 2.6rem; }
}

.textAccordionHero__craftonik {
  display: block;
  width: 120px;
  height: 177px;
  margin-top: 0;
  margin-left: auto;
  margin-right: 15%;
  image-rendering: auto;
}
@media (min-width: 769px) {
  .textAccordionHero__craftonik {
    width: 145px;
    height: 214px;
  }
}
@media (min-width: 1281px) {
  .textAccordionHero__craftonik {
    width: 170px;
    height: 251px;
    margin-right: 10%;
  }
}

/* Old hero overlay styles removed - now part of heroAccordion */

/* Secondary image (illustration below text) */
.textAccordionHero__secondaryImage {
  display: none;
  margin-left: 6vw;
  max-width: 200px;
  position: relative;
  z-index: 1;
}
@media (min-width: 769px) {
  .textAccordionHero__secondaryImage {
    margin-top: -5vw;
    margin-bottom: -3vw;
    margin-left: 20vw;
  }
}
@media (min-width: 1281px) {
  .textAccordionHero__secondaryImage { max-width: 220px; }
}
@media (min-width: 1601px) {
  .textAccordionHero__secondaryImage { max-width: 300px; margin-left: 25vw; }
}
.textAccordionHero__secondaryImage img {
  width: 100%;
  height: auto;
  display: block;
}

/* Highlighted title (bold subtitle line) */
.textAccordionHero__highlightedTitle {
  font-family: var(--f-text);
  font-weight: 800;
  font-size: inherit;
  line-height: inherit;
}

/* ============================================================
   HeroAccordion - Expandable panel
   ============================================================ */

.heroAccordion {
  display: block;
  width: 27vw;
  min-height: 100%;
  position: relative;
  left: 0;
  transition: width 1.6s, flex-shrink 0.2s 0.6s, left 0.8s;
}
@media (max-width: 1280px) {
  .heroAccordion { flex-shrink: 1; width: 36%; }
}
@media (max-width: 960px) {
  .heroAccordion { display: none; }
}

.heroAccordion--opened {
  width: 70%;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  left: -34%;
}
@media (min-width: 1281px) {
  .heroAccordion--opened { left: -43%; }
}

.heroAccordion__entry {
  width: 100%;
  height: 100%;
  position: relative;
  transition: opacity 0.2s, width 0.4s;
}
.heroAccordion--opened .heroAccordion__entry {
  width: 0;
  opacity: 0;
  transition: width 0.8s, opacity 0.8s;
}

.heroAccordion__box {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: absolute;
  color: var(--c-white);
  padding: 4vw 6vw;
  left: 0; right: 0; top: 0; bottom: 0;
}
@media (min-width: 769px) {
  .heroAccordion__box { padding: 4vw 3vw; transition: right 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }
}

.heroAccordion__bg {
  z-index: 0;
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
}
.heroAccordion__bg img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.heroAccordion__bg::before,
.heroAccordion__bg::after {
  display: block; content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #171A21;
  z-index: 1; pointer-events: none;
}
.heroAccordion__bg::before {
  mix-blend-mode: color; opacity: 1;
}
.heroAccordion__bg::after {
  mix-blend-mode: multiply; opacity: 0.2;
}

.heroAccordion__text {
  z-index: 1;
  position: relative;
  font-size: 1.8rem;
  line-height: 1.6;
  margin-right: -3vw;
  transition: opacity 0.2s;
}
@media (min-width: 481px) { .heroAccordion__text { font-size: 2rem; } }
@media (min-width: 601px) { .heroAccordion__text { font-size: 2.4rem; } }
@media (min-width: 769px) { .heroAccordion__text { font-size: 2rem; margin-right: -2vw; } }
@media (min-width: 961px) { .heroAccordion__text { font-size: 2.2rem; } }
@media (min-width: 1281px) { .heroAccordion__text { font-size: 2.4rem; } }
@media (min-width: 1601px) { .heroAccordion__text { font-size: 3rem; } }

.heroAccordion__question {
  font-family: var(--f-title);
  font-size: 1.8rem;
  line-height: 1.6;
  margin-right: -3vw;
  margin-bottom: 0.2em;
  white-space: pre-line;
}
@media (min-width: 481px) { .heroAccordion__question { font-size: 2rem; } }
@media (min-width: 601px) { .heroAccordion__question { font-size: 2.4rem; } }
@media (min-width: 769px) { .heroAccordion__question { font-size: 2rem; margin-right: -2vw; } }
@media (min-width: 961px) { .heroAccordion__question { font-size: 2.4rem; } }
@media (min-width: 1281px) { .heroAccordion__question { font-size: 2.6rem; } }
@media (min-width: 1601px) { .heroAccordion__question { font-size: 3rem; } }

.heroAccordion__answer {
  font-family: var(--f-text);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.5;
  white-space: pre-line;
}
@media (min-width: 481px) { .heroAccordion__answer { font-size: 1.8rem; } }
@media (min-width: 769px) { .heroAccordion__answer { font-size: 2rem; } }
@media (min-width: 1601px) { .heroAccordion__answer { font-size: 2.4rem; } }

.heroAccordion__more { margin-top: 2vw; }

.heroAccordion__button {
  display: inline-flex;
  align-items: center;
  color: var(--c-dark);
  background-color: var(--c-white);
  padding: 4vw;
  border: none;
  cursor: pointer;
  font-family: var(--f-text);
  position: relative;
  overflow: hidden;
}
@media (min-width: 601px) {
  .heroAccordion__button { padding: 4px 2vw; min-height: 50px; }
}
@media (min-width: 769px) {
  .heroAccordion__button { min-height: 70px; }
}

.heroAccordion__buttonText {
  position: relative; display: block;
  font-weight: 800;
  font-family: var(--f-text);
  font-size: 1.6rem;
  line-height: 1.25;
  z-index: 1;
}
@media (min-width: 769px) {
  .heroAccordion__buttonText { font-size: 1.8rem; }
}

.heroAccordion__buttonBox {
  z-index: 1; position: relative; display: block;
}

/* Toggle (close) button */
.heroAccordion__toggle {
  position: absolute;
  width: 100px; height: 100px;
  left: -100px;
  z-index: -1;
  bottom: 0;
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.4s, transform 0.4s, z-index 0.4s;
}
.heroAccordion--opened .heroAccordion__toggle {
  opacity: 1;
  z-index: 99;
  transform: translateX(0);
  transition: opacity 0.2s 0.8s, transform 0.4s 0.8s, z-index 0.8s 0.8s;
}
@media (min-width: 1601px) {
  .heroAccordion__toggle { width: 120px; height: 120px; left: -120px; transform: translateX(120px); }
}

.heroAccordion__toggleClose {
  z-index: 1;
  visibility: visible;
  display: block;
  position: absolute;
  width: 100%; height: 100%;
  top: 0; right: 0;
  color: var(--c-white);
  background: none;
  border: none;
  cursor: pointer;
}
.heroAccordion__toggleClose::after {
  font-family: 'icomoon' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e904' !important;
  font-size: 1.8rem;
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  transition: font-size 0.2s;
}
@media (min-width: 1601px) {
  .heroAccordion__toggleClose::after { font-size: 3rem; }
}
.heroAccordion__toggleClose:hover::after { font-size: 1.6rem; }
@media (min-width: 1601px) {
  .heroAccordion__toggleClose:hover::after { font-size: 2.4rem; }
}

.heroAccordion__toggleText {
  color: white;
  font-size: 1.6rem;
  font-family: var(--f-text);
  margin-top: 4rem;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.heroAccordion__toggleBg {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.heroAccordion__toggleBg img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.heroAccordion__toggleBg::before,
.heroAccordion__toggleBg::after {
  display: block; content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #171A21;
  z-index: 1; pointer-events: none;
}
.heroAccordion__toggleBg::before { mix-blend-mode: color; opacity: 1; }
.heroAccordion__toggleBg::after { mix-blend-mode: multiply; opacity: 0.2; }

/* ============================================================
   AccordionContent - The 5 themed sections
   ============================================================ */

.accordionContent {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  opacity: 0; visibility: hidden;
  overflow: hidden;
  transition: opacity 0.8s 0.8s, visibility 0.8s 0.8s, width 1.2s 0.3s;
}
.accordionContent--opened {
  width: 100%;
  opacity: 1; visibility: visible;
  transition: opacity 0.8s, visibility 0.8s, width 0.8s, height 0.2s;
}

/* Ribbon (vertical tab label) */
.accordionContent__ribbon {
  position: absolute;
  z-index: 10;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-180deg);
  opacity: 0; visibility: hidden;
  transition: width 0.2s, transform 0.2s, opacity 0.2s, visibility 0.2s;
}
.accordionContent--opened .accordionContent__ribbon {
  opacity: 1; visibility: visible;
}
.accordionContent__ribbon--active { width: 4vw; }

.accordionContent__ribbonText {
  color: var(--c-white);
  font-family: var(--f-text);
  font-size: 2.2rem;
  font-weight: 500;
  writing-mode: vertical-lr;
  transition: transform 0.3s;
}
@media (min-width: 1601px) {
  .accordionContent__ribbonText { font-size: 2.8rem; }
}
.accordionContent__ribbon:not(.accordionContent__ribbon--active):hover .accordionContent__ribbonText {
  transform: scale(1.1);
}

/* Items container */
.accordionContent__items {
  width: 100%; height: 100%;
  display: flex;
  justify-content: flex-end;
}

.accordionContent__itemsSingle {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 76px; height: 100%;
  transition: width 0.4s 0.2s;
  cursor: pointer;
}
.accordionContent__itemsSingle--active {
  flex-grow: 1;
  overflow: hidden;
  width: 100%;
  cursor: default;
}

/* 5 background colors */
.accordionContent__itemsSingle--0 { background-color: #171a21; }
.accordionContent__itemsSingle--1 { background-color: #222631; }
.accordionContent__itemsSingle--2 { background-color: #2D3241; }
.accordionContent__itemsSingle--3 { background-color: #373C4D; }
.accordionContent__itemsSingle--4 { background-color: #42475A; }

/* Inner content (visible only when active+opened) */
.accordionContent__itemsSingleInner {
  position: relative;
  z-index: 10;
  width: 100%;
  opacity: 0; visibility: hidden;
  color: var(--c-white);
  flex-grow: 1;
  transition: opacity 0.2s, visibility 0.2s;
  overflow-y: auto;
}
.accordionContent__itemsSingleInner::-webkit-scrollbar {
  width: 0; height: 0;
  background-color: transparent;
}
.accordionContent--opened .accordionContent__itemsSingle--active .accordionContent__itemsSingleInner {
  opacity: 1; visibility: visible;
}

/* Heading area */
.accordionContent__itemsSingleHeading {
  padding: 5vw 3vw 0 6vw;
}
@media (max-width: 1440px) {
  .accordionContent__itemsSingleHeading { padding: calc(4vw + 10px) 3vw 0 6vw; }
}
@media (max-width: 1280px) {
  .accordionContent__itemsSingleHeading { padding: calc(4vw + 10px) 3vw 0 8vw; }
}

/* Feature list area */
.accordionContent__itemsSingleList {
  display: flex;
  padding: 0 3vw 0 6vw;
}
@media (max-width: 1280px) {
  .accordionContent__itemsSingleList { padding: 0 3vw 0 8vw; }
}

.accordionContent__itemsSingleListItem:first-of-type {
  padding: 0 3vw 0 0;
}

.accordionContent__itemsSingleListTitle {
  font-size: 1.2rem;
  padding: 3rem 0 0 0;
  color: var(--c-white);
}
@media (min-width: 601px) {
  .accordionContent__itemsSingleListTitle { font-size: 1.3rem; }
}
@media (min-width: 961px) {
  .accordionContent__itemsSingleListTitle { font-size: 1.5rem; }
}
@media (min-width: 1441px) {
  .accordionContent__itemsSingleListTitle { font-size: 1.6rem; padding: 4rem 0 0 0; }
}
@media (min-width: 1601px) {
  .accordionContent__itemsSingleListTitle { font-size: 2.25rem; padding: 6rem 0 0 0; }
}

/* Background image (slides in from top) */
.accordionContent__itemsSingleBg {
  position: absolute;
  top: 0;
  right: 360px;
  width: calc(100% - 360px);
  max-height: calc(100% - 180px);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.accordionContent__itemsSingle--active .accordionContent__itemsSingleBg {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
@media (max-width: 1600px) {
  .accordionContent__itemsSingleBg { width: calc(100% - 150px); right: 300px; max-height: calc(100% - 150px); }
}
@media (max-width: 1440px) {
  .accordionContent__itemsSingleBg { width: calc(100% - 100px); right: 100px; max-height: calc(100% - 100px); }
}
@media (max-width: 1280px) {
  .accordionContent__itemsSingleBg { width: calc(100% - 200px); right: 200px; }
}
.accordionContent:not(.accordionContent--opened) .accordionContent__itemsSingle--active .accordionContent__itemsSingleBg {
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.accordionContent__itemsSingleBg img {
  width: 100%; height: auto; display: block;
}

/* Logos */
.accordionContent__itemsSingleLogos {
  display: flex;
  justify-content: flex-end;
  opacity: 0; visibility: hidden;
  transform: translateX(100%);
  transition: opacity 0.2s, visibility 0.2s, transform 0.3s 0.4s;
}
.accordionContent--opened .accordionContent__itemsSingle--active .accordionContent__itemsSingleLogos {
  opacity: 1; visibility: visible;
  transform: translateX(0);
}
.accordionContent__itemsSingleLogos > div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px; height: 180px;
}
@media (max-width: 1600px) {
  .accordionContent__itemsSingleLogos > div { width: 150px; height: 150px; }
}
@media (max-width: 1440px) {
  .accordionContent__itemsSingleLogos > div { width: 100px; height: 100px; }
}

.accordionContent__itemsSingleLogos > div img {
  max-width: 80px;
  max-height: 50%;
  height: auto;
  filter: brightness(0) invert(1);
}
@media (min-width: 1601px) {
  .accordionContent__itemsSingleLogos > div img { max-width: 100px; }
}

/* nth-of-type(2) ::after pseudo-element (background above logo) */
.accordionContent__itemsSingleLogos > div:nth-of-type(2)::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 100%;
  left: 0;
}

/* Theme colors for logo containers */
.accordionContent__itemsSingle--theme-lead .accordionContent__itemsSingleLogos > div:first-of-type { background: #24272F; }
.accordionContent__itemsSingle--theme-lead .accordionContent__itemsSingleLogos > div:nth-of-type(2)::after { background: #24272F; }
.accordionContent__itemsSingle--theme-lead .accordionContent__itemsSingleLogos > div:last-of-type { background: #24272F; }

.accordionContent__itemsSingle--theme-sales .accordionContent__itemsSingleLogos > div:first-of-type { background: #2E323E; }
.accordionContent__itemsSingle--theme-sales .accordionContent__itemsSingleLogos > div:nth-of-type(2)::after { background: #262A36; }
.accordionContent__itemsSingle--theme-sales .accordionContent__itemsSingleLogos > div:last-of-type { background: #1B1F29; }

.accordionContent__itemsSingle--theme-customer .accordionContent__itemsSingleLogos > div:first-of-type { background: #383C4B; }
.accordionContent__itemsSingle--theme-customer .accordionContent__itemsSingleLogos > div:nth-of-type(2)::after { background: #272B39; }
.accordionContent__itemsSingle--theme-customer .accordionContent__itemsSingleLogos > div:last-of-type { background: #383C4B; }

.accordionContent__itemsSingle--theme-performance .accordionContent__itemsSingleLogos > div:first-of-type { background: #2C3141; }
.accordionContent__itemsSingle--theme-performance .accordionContent__itemsSingleLogos > div:nth-of-type(2)::after { background: #3D4253; }
.accordionContent__itemsSingle--theme-performance .accordionContent__itemsSingleLogos > div:last-of-type { background: #505669; }

.accordionContent__itemsSingle--theme-perspectives .accordionContent__itemsSingleLogos > div:first-of-type { background: #4C5062; }
.accordionContent__itemsSingle--theme-perspectives .accordionContent__itemsSingleLogos > div:nth-of-type(2)::after { background: #3D4255; }
.accordionContent__itemsSingle--theme-perspectives .accordionContent__itemsSingleLogos > div:last-of-type { background: #4C5062; }

/* Logos header */
.accordionContent__itemsSingleLogosHead {
  position: relative;
  z-index: 100;
  color: white;
  padding: 0 6vw;
  margin: 2rem 0;
  font-family: var(--f-text);
  font-size: 2.25rem;
  font-weight: 500;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
@media (max-width: 1600px) {
  .accordionContent__itemsSingleLogosHead { font-size: 1.5rem; }
}
@media (max-width: 1280px) {
  .accordionContent__itemsSingleLogosHead { padding: 0 6vw 0 8vw; }
}
.accordionContent--opened .accordionContent__itemsSingle--active .accordionContent__itemsSingleLogosHead {
  opacity: 1; visibility: visible;
}

/* ============================================================
   AccordionNav - Timeline dots
   ============================================================ */

.accordionNav {
  position: absolute;
  z-index: 100;
  width: 100%;
  top: 0; left: 0;
  padding: 2vw 0 0 2vw;
}
.accordionNav--entered { padding: 2vw 0 0 0; }

.accordionNav__wrapper { display: flex; }

.accordionNav__item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 76px; max-width: 76px;
}
.accordionNav__item--active {
  justify-content: space-between;
  width: calc(100% - 304px);
  max-width: calc(100% - 304px);
}
.accordionNav__item--active::after {
  content: '';
  position: absolute; z-index: -1;
  top: 50%; left: 3px;
  width: 100%; height: 1px;
  background: #737783;
  transition: width 0.3s;
}
.accordionNav__item--padded { padding: 0 4vw; }
.accordionNav__item--padded::after {
  left: 4vw; width: calc(100% - 4vw);
}
.accordionNav__item--padded::before {
  content: '';
  position: absolute; z-index: -1;
  top: 50%; left: 0;
  width: 4vw; height: 1px;
  background: var(--c-white);
}

.accordionNav__itemDot {
  position: relative;
  display: inline-block;
  width: 6px; height: 6px;
  color: var(--c-white);
  cursor: pointer;
  border: 1px solid #737783;
  background: none;
  padding: 0;
}
.accordionNav__itemDot--progress { display: none; }
.accordionNav__item--active .accordionNav__itemDot--progress { display: inline-block; }
.accordionNav__item--visited .accordionNav__itemDot { border-color: var(--c-white); }
.accordionNav__item--active .accordionNav__itemDot {
  border: none;
  transform: translateY(0px) rotate(45deg);
  background: var(--c-white);
}

.accordionNav__itemDot::after,
.accordionNav__itemDot::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 36px; height: 1px;
  background: #737783;
  transition: width 0.3s;
}
.accordionNav__item--active .accordionNav__itemDot::after,
.accordionNav__item--active .accordionNav__itemDot::before {
  width: 0; height: 0;
  transform: rotate(-45deg);
}
.accordionNav__item--visited .accordionNav__itemDot::after,
.accordionNav__item--visited .accordionNav__itemDot::before {
  background: var(--c-white);
}
.accordionNav__itemDot::after { left: -36px; }
.accordionNav__itemDot::before { right: -36px; }
.accordionNav__item--visited:first-of-type .accordionNav__itemDot::after { background: none; }

.accordionNav__itemDotNumber {
  position: absolute;
  opacity: 0; visibility: hidden;
  font-family: var(--f-text);
  font-size: 1.2rem;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.accordionNav__item--active .accordionNav__itemDotNumber {
  top: -14px; right: 8px;
  opacity: 1; visibility: visible;
  transform: rotate(-45deg);
}

.accordionNav__itemDotLabel {
  position: absolute;
  opacity: 0; visibility: hidden;
  font-family: var(--f-text);
  font-size: 1.2rem;
  white-space: nowrap;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.accordionNav__item--active .accordionNav__itemDotLabel {
  top: 0px;
  transform: translateX(3px);
}
.accordionNav__itemDot:hover .accordionNav__itemDotLabel {
  opacity: 1; visibility: visible;
}

.accordionNav__progress {
  position: absolute;
  z-index: -1;
  top: 3px;
  left: calc(4vw + 3px);
  width: 0; height: 20px;
  background: url('../img/accordion/progressBar.svg'), rgba(255, 255, 255, .1);
  transition: opacity 0.2s, visibility 0.2s, width 0.8s 0.2s;
}
.accordionNav__progress--active {
  opacity: 1; visibility: visible;
  right: calc(4vw + 3px);
  left: unset;
  width: calc(100% - 8vw - 6px);
}
.accordionNav__progress--fullWidth.accordionNav__progress--active {
  right: 0; left: unset;
  width: calc(100% - 3px);
}
.accordionNav__progress--fullWidthRight.accordionNav__progress--active {
  right: 0; left: unset;
  width: calc(100% - 4vw - 3px);
}

.noPaddingRight { padding-right: 0; }

/* ============================================================
   AccordionText - Title + description
   ============================================================ */

.accordionText { display: block; }

.accordionText__title {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--c-white);
}
@media (min-width: 601px) { .accordionText__title { font-size: 2.2rem; } }
@media (min-width: 961px) { .accordionText__title { font-size: 2.6rem; } }
@media (min-width: 1281px) { .accordionText__title { font-size: 2.8rem; } }
@media (min-width: 1601px) { .accordionText__title { font-size: 3.75rem; } }

.accordionText__text {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5;
  white-space: pre-line;
  margin-top: 1rem;
  color: var(--c-white);
}
@media (min-width: 961px) { .accordionText__text { font-size: 1.5rem; } }
@media (min-width: 1281px) { .accordionText__text { font-size: 1.6rem; line-height: 2; margin-top: 1.5rem; } }
@media (min-width: 1601px) { .accordionText__text { font-size: 2.25rem; } }

/* ============================================================
   AccordionList - Feature checkmark list
   ============================================================ */

.accordionList + .accordionList { margin-top: -60px; }
@media (min-width: 961px) {
  .accordionList + .accordionList { margin-top: -120px; }
}

.accordionList__list { list-style: none; padding: 0; }

.accordionList__list li.listItem {
  max-width: 90vw;
  margin-top: 2rem;
}
@media (min-width: 1441px) {
  .accordionList__list li.listItem {
    margin-top: 1.5rem;
  }
}
.accordionList__list li.listItem + .listItem {
  margin-top: 2rem;
}
@media (min-width: 769px) {
  .accordionList__list li.listItem {
    max-width: 50vw;
  }
}

/* ListItem - accordion theme checkbox */
.listItem {
  font-size: 2rem;
  font-weight: 500;
  font-family: var(--f-title);
  display: flex;
  max-width: 50vw;
}

.listItem__theme--accordion {
  font-size: 1.2rem;
}
@media (min-width: 601px) {
  .listItem__theme--accordion { font-size: 1.3rem; }
}
@media (min-width: 961px) {
  .listItem__theme--accordion { align-items: center; font-size: 1.5rem; }
}
@media (min-width: 1441px) {
  .listItem__theme--accordion { font-size: 1.6rem; }
}
@media (min-width: 1601px) {
  .listItem__theme--accordion { font-size: 2.25rem; }
}

.listItem--fullWidth {
  padding: 0;
}

.listItem__text {
  font-family: var(--f-text);
  font-size: inherit;
  line-height: 1.4em;
  font-weight: 500;
}
.listItem__theme--accordion .listItem__text {
  line-height: normal;
}

.listItem__checkbox {
  border: 1px solid var(--c-dark);
  height: 22px;
  width: 22px;
  margin-top: 2px;
  margin-right: 12px;
  display: block;
  flex-shrink: 0;
  position: relative;
}
@media (min-width: 769px) {
  .listItem__checkbox {
    margin-right: 36.5px;
    margin-top: 0;
    height: 37px;
    width: 37px;
  }
}

.listItem__theme--accordion .listItem__checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #ffffff;
}
@media (min-width: 769px) {
  .listItem__theme--accordion .listItem__checkbox {
    margin-right: 18px;
  }
}
@media (min-width: 1601px) {
  .listItem__theme--accordion .listItem__checkbox {
    width: 32px;
    height: 32px;
  }
}

.listItem__checkbox::before {
  font-family: 'icomoon' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e913' !important;
  font-size: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 1601px) {
  .listItem__checkbox::before {
    font-size: 12px;
  }
}

.listItem--show .listItem__checkbox {
  opacity: 1;
  transform: none;
}
.listItem--show .listItem__text {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SECTION: Reviews
   Source: components/Reviews/Reviews.vue + ReviewsItem.vue
   Split layout: text 46% left, slider 54% right (large-tablet+)
   ============================================================ */
.reviews {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 24vw;
  padding-bottom: 8vw;
}
@media (min-width: 601px) {
  .reviews {
    padding-top: 6vw;
    padding-bottom: 6vw;
  }
}
@media (min-width: 1025px) {
  .reviews {
    padding-bottom: 4vw;
  }
}

.reviews__title {
  font-size: 2.8rem;
  line-height: 1.333;
}
.reviews__title h2 {
  font-family: var(--f-title);
  font-weight: 400;
  margin-bottom: 0.1em;
}
.reviews__title h2 strong {
  font-family: var(--f-text);
  font-weight: 800;
}
@media (min-width: 481px) {
  .reviews__title { font-size: 3.2rem; }
}
@media (min-width: 769px) {
  .reviews__title { font-size: 3.4rem; }
}
@media (min-width: 1025px) {
  .reviews__title { font-size: 4.2rem; }
}
@media (min-width: 1441px) {
  .reviews__title { font-size: 4.6rem; }
}
@media (min-width: 1601px) {
  .reviews__title { font-size: 5.8rem; }
}

.reviews__content {
  display: block;
  margin-top: 2.6rem;
  font-size: 1.6rem;
  position: relative;
  z-index: 10;
}
@media (min-width: 441px) {
  .reviews__content { font-size: 1.8rem; }
}
@media (min-width: 601px) {
  .reviews__content { margin-top: 2.6em; }
}
@media (min-width: 769px) {
  .reviews__content { font-size: 2rem; }
}
@media (min-width: 1025px) {
  .reviews__content { display: flex; }
}
@media (min-width: 1281px) {
  .reviews__content { font-size: 2.4rem; }
}

.reviews__text,
.reviews__reviews {
  display: block;
}

.reviews__text {
  margin-bottom: 6vw;
  font-family: var(--f-text);
  font-size: 1.4rem;
  line-height: 2;
}
@media (min-width: 769px) {
  .reviews__text {
    font-size: 1.8rem;
  }
}
@media (min-width: 1025px) {
  .reviews__text {
    width: 46%;
    padding-right: 6vw;
  }
}
@media (min-width: 1441px) {
  .reviews__text {
    font-size: 2.2rem;
  }
}
@media (min-width: 1601px) {
  .reviews__text {
    font-size: 2.6rem;
  }
}

.reviews__text p + p {
  margin-top: 1em;
}

.reviews__reviews {
  margin-top: 6vw;
  margin-bottom: -24%;
  z-index: 10;
}
@media (min-width: 1025px) {
  .reviews__reviews {
    width: 54%;
    margin-bottom: -12%;
    margin-top: auto;
    align-self: flex-end;
  }
}

.reviews__sliderWrapper {
  position: relative;
  overflow: visible;
}
@media (min-width: 601px) {
  .reviews__sliderWrapper { padding: 0 0 8% 0; }
}
@media (min-width: 769px) {
  .reviews__sliderWrapper { padding: 0 0 12% 0; }
}

.reviews__slider {
  position: relative;
  display: block;
}

.reviews__slide {
  z-index: 0;
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: transform var(--tr-l), opacity var(--tr-l);
  transform: translateY(0);
}
.reviews__slide--curr {
  opacity: 1;
}
.reviews__slide--prev { opacity: 0; transform: translateY(-72%); }
.reviews__slide--next { opacity: 0; transform: translateY(72%); }
.reviews__slide--delta0 {
  z-index: 3;
  position: relative;
}
.reviews__slide--delta1 { z-index: 2; }
.reviews__slide--delta2 { z-index: 1; }

/* ReviewsNavigation (vertical dots) */
.reviewsNavigation {
  position: absolute;
  z-index: 4;
  right: -15px;
  transform: translateY(50%);
  bottom: 50%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 601px) {
  .reviewsNavigation {
    right: -2vw;
    transform: translateY(25%);
    bottom: 25%;
  }
}
@media (min-width: 769px) {
  .reviewsNavigation {
    bottom: 34%;
    transform: translateY(-16%);
  }
}
@media (min-width: 1601px) {
  .reviewsNavigation {
    transform: translateY(-34%);
  }
}
.reviewsNavigation.active {
  z-index: 4;
}
.reviewsNavigation__buttonWrapper {
  padding: 5px 0;
}
@media (min-width: 769px) {
  .reviewsNavigation__buttonWrapper {
    padding: 15px 0;
  }
}
.reviewsNavigation__button {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border: 1px solid #171a21;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
}
@media (min-width: 769px) {
  .reviewsNavigation__button {
    width: 16px;
    height: 16px;
  }
}
.reviewsNavigation__button:hover {
  background: #171a21;
}
.reviewsNavigation__button.active {
  border: none;
  background: #171a21;
}
.reviewsNavigation__button.active:hover {
  border: 1px solid #171a21;
  background: #ffffff;
}

/* ReviewsItem */
.reviewsItem {
  display: block;
  position: relative;
  visibility: hidden;
}

.reviewsItem__button {
  z-index: 0;
  width: 50%;
  margin-left: 0; margin-right: auto;
  display: block;
  position: relative;
  visibility: hidden;
}
.reviewsItem__button::before {
  content: '';
  display: block;
  width: 100%; height: 0;
  padding-top: 130%;
}

.reviewsItem__mask {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  transition: transform var(--tr-l);
}
.reviewsItem__mask--l {
  transform: translate3d(-10%, -50%, 0);
}
.reviewsItem--delta2 .reviewsItem__mask--l { transform: translate3d(-10%, -48%, 0); }
.reviewsItem--delta1 .reviewsItem__mask--l { transform: translate3d(-10%, -45%, 0); }
.reviewsItem--delta0 .reviewsItem__mask--l { transform: translate3d(-10%, 0, 0); }

.reviewsItem__mask--r {
  transform: translate3d(20%, 100%, 0);
}
.reviewsItem--delta2 .reviewsItem__mask--r { transform: translate3d(20%, 96%, 0); }
.reviewsItem--delta1 .reviewsItem__mask--r { transform: translate3d(20%, 90%, 0); }
.reviewsItem--delta0 .reviewsItem__mask--r { transform: translate3d(20%, 0, 0); }

.reviewsItem--delta0.reviewsItem--active .reviewsItem__button:hover .reviewsItem__mask--l,
.reviewsItem--delta0.reviewsItem--active .reviewsItem__button:hover .reviewsItem__mask--r {
  transform: translate3d(0, 0, 0);
}

.reviewsItem__image {
  visibility: visible;
  background-color: var(--c-black);
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  transition: transform var(--tr-l);
  transform: translate3d(-10%, -50%, 0);
}
.reviewsItem--delta2 .reviewsItem__image { transform: translate3d(-10%, -48%, 0); }
.reviewsItem--delta1 .reviewsItem__image { transform: translate3d(-10%, -45%, 0); }
.reviewsItem--delta0 .reviewsItem__image { transform: translate3d(-10%, 0, 0); }

.reviewsItem--delta0.reviewsItem--active .reviewsItem__button:hover .reviewsItem__image {
  transform: translate3d(0, 0, 0);
}

.reviewsItem__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.reviewsItem__box {
  display: block;
  height: 0%; width: 80%;
  position: absolute;
  top: 50%; left: 50%;
  box-shadow: 60px 60px 99px rgba(0, 0, 0, 0.16);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity var(--tr), width var(--tr-l), height var(--tr-l);
  visibility: visible;
  will-change: height;
}
.reviewsItem--delta2 .reviewsItem__box { height: 4%; }
.reviewsItem--delta1 .reviewsItem__box { height: 10%; }
.reviewsItem--delta0 .reviewsItem__box { height: 100%; opacity: 1; }
.reviewsItem--delta0.reviewsItem--active .reviewsItem__button:hover .reviewsItem__box {
  width: 100%;
}

.reviewsItem__content {
  width: 50%;
  display: block;
  position: absolute;
  right: 0; top: 50%;
  padding: 0 2vw;
  padding-right: 15px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tr), visibility var(--tr);
  font-size: 1.2rem;
  line-height: 2;
  transform: translateY(-50%);
}
@media (min-width: 441px) {
  .reviewsItem__content { font-size: 1.4rem; }
}
@media (min-width: 601px) {
  .reviewsItem__content {
    top: 10%;
    transform: none;
    padding-right: 15px;
    font-size: 1.6rem;
  }
}
@media (min-width: 769px) {
  .reviewsItem__content { font-size: 2rem; }
}
@media (min-width: 1025px) {
  .reviewsItem__content { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .reviewsItem__content { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .reviewsItem__content { font-size: 2.4rem; }
}

.reviewsItem--delta0 .reviewsItem__content {
  opacity: 1;
  visibility: visible;
}

.reviewsItem__tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
.reviewsItem__tag {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 4px;
  font-size: 1.2rem;
  color: var(--c-dark);
}
@media (min-width: 481px) {
  .reviewsItem__tag { font-size: 1.4rem; }
}
@media (min-width: 601px) {
  .reviewsItem__tag {
    padding: 0.4em 0.8em;
    margin: 2px 6px;
  }
}
@media (min-width: 769px) {
  .reviewsItem__tag { font-size: 1.6rem; }
}
@media (min-width: 1601px) {
  .reviewsItem__tag { font-size: 1.8rem; }
}
.reviewsItem__tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  background-color: currentColor;
  opacity: 0.05;
}
.reviewsItem__tag > span {
  position: relative;
  opacity: 0.33;
}

.reviewsItem__quote {
  margin: 1em 0;
  line-height: 1.8;
}
.reviewsItem__author {
  font-weight: 800;
}
.reviewsItem__position {
  line-height: 1;
}

/* ReviewsItem play button */
.reviewsItem__play {
  z-index: 2;
  color: #171a21;
  background-color: #ffffff;
  display: block;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background-color 0.2s;
  cursor: pointer;
}
.reviewsItem__play:hover {
  background-color: #171a21;
}
.reviewsItem--delta0.reviewsItem--active .reviewsItem__play {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
@media (min-width: 601px) {
  .reviewsItem__play {
    height: 60px;
    width: 60px;
    margin-top: -30px;
    margin-left: -30px;
  }
}
.reviewsItem__play::before {
  font-family: 'icomoon';
  content: '\e90c';
  color: #171a21;
  display: block;
  font-size: 14px;
  line-height: 1;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
}
.reviewsItem__play:hover::before {
  color: #ffffff;
}

/* ReviewsItem Video Overlay */
.reviewsItem__video {
  z-index: 4;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: #000000;
  color: #ffffff;
  visibility: visible;
}
.reviewsItem__videoClose {
  z-index: 1;
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  color: currentColor;
  background: none;
  border: none;
  cursor: pointer;
}
.reviewsItem__videoClose::before,
.reviewsItem__videoClose::after {
  content: '';
  display: block;
  font-size: 2.4rem;
  height: 2px;
  width: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -0.5em;
  background-color: currentColor;
}
.reviewsItem__videoClose::before {
  transform: rotate(-45deg);
}
.reviewsItem__videoClose::after {
  transform: rotate(45deg);
}
.reviewsItem__videoWrapper {
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.reviewsItem__videoWrapper::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
.reviewsItem__videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Reviews Awards Section */
.reviews__awards {
  height: 200px;
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 1;
  margin-right: -6vw;
  margin-left: -6vw;
  padding: 3vw 0;
}
@media (min-width: 601px) {
  .reviews__awards { height: 250px; }
}
@media (min-width: 769px) {
  .reviews__awards {
    background-color: #171a21;
    height: 400px;
  }
}
@media (min-width: 1281px) {
  .reviews__awards { height: 450px; }
}
@media (min-width: 1601px) {
  .reviews__awards { height: 550px; }
}

/* Awards Badge */
.reviews__awardsBadge {
  display: none;
  position: absolute;
  top: 0;
  width: 36%;
  height: calc(50% + 9vw);
  margin-left: auto;
  margin-right: calc(4% + 6vw);
  margin-top: -9vw;
  transition: opacity 0.1s ease-in-out;
}
@media (min-width: 769px) {
  .reviews__awardsBadge {
    display: block;
    right: 0;
    width: 25%;
  }
}
@media (min-width: 1025px) {
  .reviews__awardsBadge {
    width: 18%;
    left: 0;
    margin-left: 16%;
    margin-right: auto;
  }
}
@media (min-width: 1281px) {
  .reviews__awardsBadge { width: 15%; }
}
.reviews__awardsBadge--horizontal img {
  /* default: no transform */
}
@media (min-width: 769px) {
  .reviews__awardsBadge--horizontal img { transform: translateY(15%); }
}
@media (min-width: 1281px) {
  .reviews__awardsBadge--horizontal img { transform: translateY(20%); }
}
@media (min-width: 1025px) {
  .reviews__awardsBadge--bigger { width: 20%; }
}
@media (min-width: 1281px) {
  .reviews__awardsBadge--bigger { width: 17%; }
}

.reviews__awardsBadgeImg {
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: contain;
}
/* Awards Rows (marquee) */
.reviews__awardsRows {
  position: relative;
  display: none;
  overflow: hidden;
  margin-top: calc(30px + 12vw);
}
@media (min-width: 769px) {
  .reviews__awardsRows {
    display: block;
    margin-top: 60px;
  }
}

.reviews__awardsRow {
  display: flex;
  width: 100%;
  z-index: 0;
  position: relative;
  left: 50%;
  top: 0;
  font-size: 0;
}
.reviews__awardsRow--active {
  z-index: 1;
}

.reviews__awardsSets {
  display: block;
  position: relative;
  font-family: var(--f-text);
  font-weight: 900;
  font-size: 5.2rem;
  line-height: 0.769;
  text-transform: uppercase;
  white-space: nowrap;
  animation: reviewsRightToLeft 120s linear infinite;
  animation-play-state: paused;
}
.reviews__awards--play .reviews__awardsSets {
  animation-play-state: running;
}
.reviews__awardsRow:nth-child(2n) .reviews__awardsSets {
  animation-name: reviewsLeftToRight;
}
.reviews__awardsRow:nth-child(2) .reviews__awardsSets {
  animation-delay: -60s;
}
.reviews__awardsRow:nth-child(3) .reviews__awardsSets {
  animation-delay: -30s;
}
.reviews__awardsRow:nth-child(4) .reviews__awardsSets {
  animation-delay: -90s;
}
@media (min-width: 769px) {
  .reviews__awardsSets { font-size: 6rem; }
}
@media (min-width: 1441px) {
  .reviews__awardsSets { font-size: 6.3rem; }
}
@media (min-width: 1601px) {
  .reviews__awardsSets { font-size: 7.8rem; }
}

.reviews__awardsSet {
  display: block;
  top: 0;
  white-space: nowrap;
}
.reviews__awardsSet--2 { position: relative; left: 0; }
.reviews__awardsSet--1 { position: absolute; left: -100%; }
.reviews__awardsSet--3 { position: absolute; left: 100%; }

.reviews__awardsItems { display: block; }
.reviews__awardsItem { display: inline-block; padding: 0.2em 0.5em; }

.reviews__awardsLabel {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px #171a21;
  opacity: 0.12;
  transition: color 0.2s, opacity 0.2s, -webkit-text-stroke-color 0.2s;
  cursor: pointer;
}
@media (min-width: 769px) {
  .reviews__awardsLabel {
    -webkit-text-stroke: 1px #ffffff;
  }
}
.reviews__awardsLabel:hover,
.reviews__awardsLabel.active {
  opacity: 1;
  color: #171a21;
  -webkit-text-stroke-color: transparent;
}
@media (min-width: 769px) {
  .reviews__awardsLabel:hover,
  .reviews__awardsLabel.active {
    color: #ffffff;
    -webkit-text-stroke-color: transparent;
  }
}

/* ============================================================
   SECTION: Footer
   Source: components/Footer/Footer.vue + FooterBanner.vue
   ============================================================ */
.footer {
  display: block;
  position: relative;
  z-index: 102;
}

.footer__banner {
  z-index: 1;
  position: relative;
  width: 100%;
  background-color: var(--c-white);
}

.footer__buttons {
  z-index: 0;
  width: 100%;
  position: sticky;
  bottom: 0;
  left: 0;
}

.footerBanner {
  display: block;
  position: relative;
  padding-top: 6vw;
}
@media (min-width: 601px) {
  .footerBanner { padding-top: 60px; }
}

.footerBanner::before {
  z-index: -1;
  content: '';
  height: 24%;
  position: absolute;
  bottom: 0; right: 0; left: 0;
  background-color: var(--c-bg-section);
  transform: scale(0, 1);
  transform-origin: 0% 50%;
}
@media (min-width: 601px) {
  .footerBanner::before { height: 54%; }
}

@keyframes footerBannerShow {
  0% { transform: scale(0, 1); transform-origin: 0% 50%; }
  49% { transform: scale(1, 1); transform-origin: 0% 50%; }
  50% { transform: scale(1, 1); transform-origin: 100% 50%; }
  100% { transform: scale(0.7, 1); transform-origin: 100% 50%; }
}

.footerBanner--showBg::before {
  z-index: unset;
  transform: scale(0.7, 1);
  transform-origin: 100% 50%;
  animation: footerBannerShow 0.8s var(--ease-in-out-cubic);
}

.footerBanner__inner {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (min-width: 601px) {
  .footerBanner__inner {
    display: flex;
    align-items: center;
  }
}

@media (min-width: 601px) {
  .footerBanner__infoCol {
    width: 50%;
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 1025px) {
  .footerBanner__infoCol {
    width: 60%;
    padding-bottom: 60px;
  }
}

.footerBanner__info {
  padding: 6vw 0;
}

.footerBanner__titleBox {
  display: block;
  line-height: 1.279;
  font-size: 2.8rem;
}
@media (min-width: 441px) { .footerBanner__titleBox { font-size: 3rem; } }
@media (min-width: 601px) { .footerBanner__titleBox { font-size: 4rem; } }
@media (min-width: 769px) { .footerBanner__titleBox { font-size: 4.8rem; } }
@media (min-width: 1025px) { .footerBanner__titleBox { font-size: 6rem; } }
@media (min-width: 1281px) { .footerBanner__titleBox { font-size: 6.8rem; } }
@media (min-width: 1367px) { .footerBanner__titleBox { font-size: 7.6rem; } }
@media (min-width: 1601px) { .footerBanner__titleBox { font-size: 8.6rem; } }

.footerBanner__title,
.footerBanner__subtitle {
  display: block;
  overflow: hidden;
}
.footerBanner__title {
  font-family: var(--f-title);
  margin-bottom: 0.1em;
}
.footerBanner__subtitle {
  font-weight: 800;
  font-family: var(--f-text);
}

.footerBanner__text {
  font-family: var(--f-text);
  line-height: 2;
  font-size: 1.6rem;
  white-space: pre-line;
  margin-top: 2.6rem;
}
@media (min-width: 601px) { .footerBanner__text { margin-top: 2.2em; } }
@media (min-width: 769px) { .footerBanner__text { font-size: 1.8rem; } }
@media (min-width: 1367px) { .footerBanner__text { font-size: 2rem; } }
@media (min-width: 1601px) { .footerBanner__text { font-size: 2.4rem; } }

.footerBanner__cta {
  margin-top: 1.8em;
}
/* PageButton dark override for footer (base is white, defined in tabCards section) */
.footerBanner .pageButton {
  color: var(--c-dark);
  border-bottom-color: var(--c-dark);
}
.footerBanner .pageButton__line {
  background-color: var(--c-dark);
}

/* FooterBanner text reveal animation */
.footerBanner__textInner {
  display: block;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.footerBanner__subtitle .footerBanner__textInner {
  transition: transform 0.4s 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.footerBanner--showBg .footerBanner__textInner {
  transform: translateY(0);
}

/* FooterBanner image column */
.footerBanner__imageCol {
  z-index: 0;
  position: relative;
  padding-right: 100px;
}
@media (min-width: 601px) {
  .footerBanner__imageCol {
    align-self: flex-end;
    width: 50%;
    padding-right: 80px;
  }
}
@media (min-width: 1025px) {
  .footerBanner__imageCol {
    width: 40%;
    padding-right: 6vw;
  }
}

/* Director label */
.footerBanner__director {
  z-index: 1;
  display: block;
  position: absolute;
  right: 0;
  bottom: 6vw;
  text-align: right;
}
.footerBanner__directorName {
  display: block;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
}
@media (min-width: 769px) {
  .footerBanner__directorName { font-size: 1.8rem; }
}
@media (min-width: 1441px) {
  .footerBanner__directorName { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .footerBanner__directorName { font-size: 2.4rem; }
}
.footerBanner__directorPos {
  display: block;
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 0.4em;
}
@media (min-width: 601px) {
  .footerBanner__directorPos { font-size: 1.3rem; }
}
@media (min-width: 1025px) {
  .footerBanner__directorPos { font-size: 1.4rem; }
}
@media (min-width: 1441px) {
  .footerBanner__directorPos { font-size: 1.5rem; }
}
@media (min-width: 1601px) {
  .footerBanner__directorPos { font-size: 1.8rem; }
}

/* Face image box */
.footerBanner__imageBox {
  z-index: 0;
  position: relative;
  width: 100%;
  padding-top: 100%;
  filter: grayscale(100%);
}
.footerBanner__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.footerBanner__centerPoint {
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 28.5%;
  left: 43.5%;
  visibility: hidden;
}

/* Footer navigation bottom */
.footerButtons {
  display: block;
}
.footerButtons__items {
  display: block;
}
@media (min-width: 601px) {
  .footerButtons__items {
    display: flex;
    justify-content: stretch;
  }
}

.footerButtons__item {
  display: block;
}
.footerButtons__item:not(:last-of-type) {
  border-bottom: 1px solid #23252B;
}
@media (min-width: 601px) {
  .footerButtons__item {
    flex-grow: 1;
    flex-shrink: 0;
    width: 33.33%;
  }
  .footerButtons__item:not(:last-of-type) {
    border-bottom: unset;
  }
}

.footerButtons__link {
  padding: 6vw;
  padding-right: 10vw;
  color: #ffffff;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #171a21;
  overflow: hidden;
  transition: background-color 0.3s;
}
.footerButtons__link:hover {
  background-color: #23252B;
}
.footerButtons__link::before {
  font-family: 'icomoon';
  content: '\e904';
  font-size: 3.3vw;
  line-height: 1;
  text-align: center;
  display: block;
  position: absolute;
  right: 6vw;
  top: 50%;
  margin-top: -1.5vw;
  opacity: 0.1;
  transform: translate(0, 0);
  transition: opacity 0.3s, transform 0.3s;
}
.footerButtons__link:hover::before {
  opacity: 1;
  transform: translate(120%, 120%);
}

.footerButtons__box {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  font-size: 1.2rem;
  line-height: 1.333;
}
@media (min-width: 601px) {
  .footerButtons__box { font-size: 1.1rem; }
}
@media (min-width: 769px) {
  .footerButtons__box { font-size: 1.4rem; }
}
@media (min-width: 1025px) {
  .footerButtons__box { font-size: 1.6rem; }
}
@media (min-width: 1281px) {
  .footerButtons__box { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .footerButtons__box { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .footerButtons__box { font-size: 2.3rem; }
}
.footerButtons__link:hover .footerButtons__box {
  transform: translateY(calc(-8em / 3));
}

.footerButtons__subtitle {
  font-weight: 500;
  white-space: pre-line;
  margin-bottom: 0.4em;
  margin-right: -1vw;
  opacity: 1;
  transition: opacity 0.3s;
  font-size: 1.2rem;
  line-height: 1.333;
}
@media (min-width: 601px) {
  .footerButtons__subtitle { font-size: 1.6rem; }
}
@media (min-width: 1025px) {
  .footerButtons__subtitle { font-size: 1.8rem; }
}
@media (min-width: 1367px) {
  .footerButtons__subtitle { font-size: 2rem; }
}
@media (min-width: 1601px) {
  .footerButtons__subtitle { font-size: 2.4rem; }
}
.footerButtons__link:hover .footerButtons__subtitle {
  opacity: 0;
}

.footerButtons__title {
  font-size: 1.6rem;
  line-height: 1.333;
  font-weight: 800;
  white-space: pre-line;
}
@media (min-width: 601px) {
  .footerButtons__title { font-size: 2rem; }
}
@media (min-width: 769px) {
  .footerButtons__title { font-size: 3.2rem; }
}
@media (min-width: 1025px) {
  .footerButtons__title { font-size: 3.8rem; }
}
@media (min-width: 1281px) {
  .footerButtons__title { font-size: 4.2rem; }
}
@media (min-width: 1367px) {
  .footerButtons__title { font-size: 4.4rem; }
}
@media (min-width: 1601px) {
  .footerButtons__title { font-size: 5.4rem; }
}

.footerButtons__text {
  font-weight: 500;
  white-space: pre-line;
  margin-top: 0.4em;
  margin-right: -4vw;
  height: calc(8em / 3);
  margin-bottom: calc(-1 * (8em / 3 + 0.4em));
  opacity: 0;
  transition: opacity 0.3s;
}
.footerButtons__link:hover .footerButtons__text {
  opacity: 1;
}

/* ============================================================
   Loading state
   ============================================================ */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--c-dark);
}
.loading__spinner {
  width: 4rem;
  height: 4rem;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--c-red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   MARQUEE SECTION
   ============================================================ */

/* --- MarqueeSection --- */

.marqueeSection {
  z-index: 2;
  margin-top: 18vw;
  overflow: hidden;
}
.marqueeSection.marqueeSection--noHeader {
  margin: 0;
  overflow: visible;
}
.marqueeSection--mobileMargin {
  margin: 6vw 0;
}
@media (min-width: 601px) {
  .marqueeSection--mobileMargin {
    margin: 0;
  }
}
@media (min-width: 601px) {
  .marqueeSection {
    margin-top: 13.94vw;
  }
}
@media (min-width: 1025px) {
  .marqueeSection {
    margin-top: 4.94vw;
  }
}

.marqueeSection__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.marqueeSection--noHeader .marqueeSection__header {
  display: none;
}
@media (min-width: 769px) {
  .marqueeSection__header {
    padding: 0 6vw;
  }
}

.marqueeSection__image {
  flex: 0 0 60%;
  max-width: 60%;
  order: 2;
  display: none;
}
@media (min-width: 601px) {
  .marqueeSection__image {
    display: block;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 769px) {
  .marqueeSection__image {
    order: 1;
    flex: 0 0 35%;
    max-width: 35%;
  }
}

.marqueeSection__text {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 6vw 0;
  order: 1;
}
@media (min-width: 769px) {
  .marqueeSection__text {
    order: 2;
    flex: 0 0 40%;
    max-width: 40%;
    margin: 0 0 0 8vw;
  }
}

.marqueeSection__content {
  position: relative;
  margin-top: 12vw;
}
@media (min-width: 601px) {
  .marqueeSection__content {
    margin-top: 5.36vw;
  }
}
.marqueeSection--noHeader .marqueeSection__content {
  margin-top: 0;
}

.marqueeSection__filter {
  position: absolute;
  left: 0;
  top: 0;
  background: #171a21;
  z-index: 1;
  color: #ffffff;
  width: 50vw;
  padding: 4.11vw 0 4.89vw;
}
@media (min-width: 1025px) {
  .marqueeSection__filter {
    min-width: 390px;
    width: 20.33vw;
    height: 100%;
  }
}
.marqueeSection__filter > * {
  padding-left: 7.12vw;
  padding-right: 3.12vw;
}
@media (min-width: 1025px) {
  .marqueeSection__filter > * {
    padding-left: 5.12vw;
  }
}

.marqueeSection__filterTitle {
  font-size: 2rem;
  line-height: 1.133;
  font-weight: 500;
  font-family: var(--f-title);
  margin-bottom: 3.07vw;
  white-space: pre-line;
}
@media (min-width: 769px) {
  .marqueeSection__filterTitle {
    font-size: 3rem;
  }
}

.marqueeSection__filterSelect {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 3.56vw;
  padding-bottom: 3.56vw;
}
@media (min-width: 769px) {
  .marqueeSection__filterSelect {
    padding-top: 1.56vw;
    padding-bottom: 1.56vw;
  }
}
.marqueeSection__filterSelect:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.marqueeSection__filterClear {
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: underline;
  color: #ffffff;
  margin-top: 3.56vw;
}
@media (min-width: 769px) {
  .marqueeSection__filterClear {
    font-size: 1.8rem;
    margin-top: 2.86vw;
  }
}
.marqueeSection__filterClear:hover {
  text-decoration: none;
}

.marqueeSection__marqueeWrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* --- Marquee --- */

.marquee {
  position: relative;
  margin-right: -6vw;
  margin-left: 1px;
  padding: 1.56vw 0;
}

.marquee__rows {
  position: relative;
  display: block;
  overflow: hidden;
}

.marquee__row {
  display: flex;
  width: 100%;
  z-index: 0;
  position: relative;
  left: 50%;
  top: 0;
  font-size: 0;
}
.marquee__row--active {
  z-index: 1;
}
.marquee__row:nth-last-of-type(-n + 2) {
  display: none;
}
@media (max-width: 1024px) {
  .marquee__row:nth-last-of-type(-n + 2) {
    display: flex;
  }
}

.marquee__sets {
  display: block;
  position: relative;
  font-family: var(--f-text);
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 1.026;
  text-transform: uppercase;
  white-space: nowrap;
  animation: reviewsRightToLeft 120s linear infinite;
  animation-play-state: paused;
}
.marquee--play .marquee__sets {
  animation-play-state: running;
}
.marquee__row:nth-child(2n) .marquee__sets {
  animation-name: reviewsLeftToRight;
}
.marquee__row:nth-child(2) .marquee__sets {
  animation-delay: -60s;
}
.marquee__row:nth-child(3) .marquee__sets {
  animation-delay: -30s;
}
.marquee__row:nth-child(4) .marquee__sets {
  animation-delay: -90s;
}
@media (min-width: 601px) {
  .marquee__sets {
    font-size: 4.2rem;
  }
}
@media (min-width: 769px) {
  .marquee__sets {
    font-size: 6.8rem;
  }
}
@media (min-width: 1025px) {
  .marquee__sets {
    font-size: 7.8rem;
  }
}

.marquee__set {
  display: block;
  top: 0;
  white-space: nowrap;
}
.marquee__set--2 {
  position: relative;
  left: 0;
}
.marquee__set--1 {
  position: absolute;
  left: -100%;
}
.marquee__set--3 {
  position: absolute;
  left: 100%;
}

.marquee__items {
  display: block;
}

.marquee__item {
  display: inline-block;
  padding: 0.2em 0.5em;
}

.marquee__label {
  display: inline-block;
  text-shadow: -1px 0 #171a21, 0 1px #171a21, 1px 0 #171a21, 0 -1px #171a21;
  opacity: 0.16;
  transition: color 0.2s, opacity 0.2s, text-shadow 0.2s;
  cursor: pointer;
}
.marquee__label:not(:hover) {
  color: #ffffff !important;
}
.marquee__label:hover {
  opacity: 1;
  color: #171a21;
  text-shadow: 0 0 transparent;
}

@keyframes reviewsRightToLeft {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}
@keyframes reviewsLeftToRight {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* --- MarqueeDropdown --- */

.marqueeDropdown {
  cursor: pointer;
  position: relative;
}

.marqueeDropdown--open .marqueeDropdown__items {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.2s 0.05s;
}
.marqueeDropdown--open .marqueeDropdown__option {
  animation: fadeInOptions 0.1s forwards;
}
@media (min-width: 769px) {
  .marqueeDropdown--open .marqueeDropdown__option {
    animation: fadeInOptionsTablet 0.1s forwards;
  }
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(1n) {
  animation-delay: 0.05s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(2n) {
  animation-delay: 0.1s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(3n) {
  animation-delay: 0.15s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(4n) {
  animation-delay: 0.2s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(5n) {
  animation-delay: 0.25s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(6n) {
  animation-delay: 0.3s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(7n) {
  animation-delay: 0.35s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(8n) {
  animation-delay: 0.4s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(9n) {
  animation-delay: 0.45s;
}
.marqueeDropdown--open .marqueeDropdown__option:nth-child(10n) {
  animation-delay: 0.5s;
}
.marqueeDropdown--open .marqueeDropdown__selected::after {
  transform: translateY(-50%) rotate(180deg);
}

.marqueeDropdown__selected {
  position: relative;
  padding-right: 32px;
  pointer-events: none;
}
.marqueeDropdown__selected::after {
  font-family: 'icomoon' !important;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e90c' !important;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
}
.marqueeDropdown__selected--active .marqueeDropdown__placeholder {
  font-size: 1.8rem;
}

.marqueeDropdown__placeholder {
  font-size: 1.6rem;
  font-weight: 800;
  display: block;
  transition: font-size 0.3s;
}
@media (min-width: 769px) {
  .marqueeDropdown__placeholder {
    font-size: 2.4rem;
  }
}

.marqueeDropdown__selectedText {
  display: block;
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 500;
}
@media (min-width: 769px) {
  .marqueeDropdown__selectedText {
    margin-top: 6px;
  }
}

.marqueeDropdown__items {
  position: absolute;
  bottom: 0;
  left: 100%;
  background: #ffffff;
  border: 1px solid #171a21;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  max-height: 200px;
}
.marqueeDropdown__items::-webkit-scrollbar {
  width: 10px;
}
.marqueeDropdown__items::-webkit-scrollbar-thumb {
  background: #171a21;
}
.marqueeDropdown__items::-moz-scrollbar-button,
.marqueeDropdown__items::-webkit-scrollbar-button {
  width: 0;
}
@media (min-width: 769px) {
  .marqueeDropdown__items {
    max-height: 250px;
  }
}
@media (min-width: 1281px) {
  .marqueeDropdown__items {
    max-height: 300px;
  }
}

.marqueeDropdown__option {
  font-size: 1.4rem;
  font-weight: 500;
  color: #171a21;
  background-color: #ffffff;
  border-top: 1px solid #171a21;
  transition: background-color 0.2s, color 0.2s;
  opacity: 0;
  max-height: 0;
  padding: 0;
}
@media (min-width: 1025px) {
  .marqueeDropdown__option {
    font-size: 2.4rem;
  }
}
.marqueeDropdown__option:first-of-type {
  border: none;
}
.marqueeDropdown__option--selected,
.marqueeDropdown__option:hover {
  background: #171a21;
  color: #ffffff;
}

@keyframes fadeInOptions {
  0% {
    opacity: 0;
    transform: translateX(-2.04vw);
    max-height: 0;
    padding: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    padding: 4.56vw 4.12vw;
    max-height: 200px;
  }
}

@keyframes fadeInOptionsTablet {
  0% {
    opacity: 0;
    transform: translateX(-1.04vw);
    max-height: 0;
    padding: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    padding: 1.56vw 3.12vw;
    max-height: 200px;
  }
}