@import './variables.css';
@import './font.css';
@import './typography.css';

/* Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: aktiv-grotesk, 'Anuphan', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-primary-blue);
}

@media (max-width: 767px) {

  html,
  body {
    overflow-x: clip;
  }
}

.font-anuphan {
  font-family: 'Anuphan', sans-serif;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

img {
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
}

/* Button */
.btn-gradient-blue {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-secondary-blue-gradient);
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 16px 30px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

.btn-gradient-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #093341 35.39%,
      #637799 97.71%,
      #B4CADB 131.69%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-gradient-blue:hover::before {
  opacity: 1;
}

/* Header */

.header--home {
  position: fixed;
  top: 14px;
  left: 10px;
  right: 10px;
  z-index: 50;
  transition: all 0.3s ease;
  /* เพิ่มความนุ่มนวลตอนสลับสถานะ */
}

.header--default {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  z-index: 50;
  margin: 14px 10px 0;
  transition: all 0.3s ease;
}

/* Homepage: header--default is only reached by scrolling past the hero,
   where it must stay fixed/overlapping like header--home. */
body.is-home .header--default {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  margin: 0;
}

.header--default .navbar,
.header--quotation-open .navbar,
.header--cta-hover .navbar {
  background: var(--color-primary-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header--default .navbar__link,
.header--quotation-open .navbar__link,
.header--cta-hover .navbar__link {
  color: var(--color-primary-blue);
}

.header--default .navbar__cta,
.header--quotation-open .navbar__cta,
.header--cta-hover .navbar__cta {
  /* background: var(--color-primary-blue); */
  background: var(--color-secondary-blue-gradient);
  /* test */
  color: var(--color-primary-white);
}

.header--default .hamburger-menu img,
.header--quotation-open .hamburger-menu img,
.header--cta-hover .hamburger-menu img {
  -webkit-filter: brightness(0);
  filter: brightness(0);
}

.header--nav-open .hamburger-menu img {
  -webkit-filter: none;
  filter: none;
}

.header--quotation-open.header--nav-open {
  z-index: 100;
}

/* Navbar */
.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 7px 6px 7px 10px;
  border-radius: 10px;
  transition: background 0.3s ease;
}

@media (min-width: 768px) {
  .navbar {
    padding: 10px 32px;
  }
}

.navbar__logo {
  width: 130px;
  aspect-ratio: 173 / 22;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .navbar__logo {
    width: 130px;
  }
}

.navbar__logo-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.navbar__logo-wrap {
  display: flex;
  gap: 14px;
}

@media (min-width: 768px) {
  .navbar__logo-wrap {
    gap: 0;
  }
}

@media (min-width: 768px) {
  .hamburger-menu {
    display: none;
  }
}

.hamburger-menu img {
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.navbar__items {
  display: none;
}

@media (min-width: 768px) {
  .navbar__items {
    display: flex;
    align-items: center;
    gap: 32px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.navbar__link {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .navbar__link {
    text-transform: none;
  }
}

/* Navbar: Products Submenu */
.navbar__submenu {
  display: none;
}

@media (min-width: 768px) {
  .navbar__item--has-submenu {
    display: flex;
    align-items: center;
    align-self: stretch;
    position: relative;
  }

  .navbar__submenu {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 20px;
    background: var(--color-primary-white);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(9, 51, 65, 0.12);
    position: absolute;
    top: 100%;
    left: -20px;
    transform: translateY(calc(10px + 4px + 8px));
    white-space: nowrap;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0s linear 0.25s;
  }

  .navbar__submenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * (10px + 4px));
    height: calc(10px + 4px);
  }

  .navbar__item--has-submenu:hover .navbar__submenu,
  .navbar__item--has-submenu:focus-within .navbar__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(4px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0s linear;
  }

  .navbar__submenu-link {
    color: var(--color-primary-blue);
    text-decoration: none;
    white-space: nowrap;
    transition:
      color 0.2s ease,
      opacity 0.2s ease;
  }

  .navbar__submenu-link:hover {
    opacity: 0.6;
  }
}

.navbar__cta {
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  background: white;
  color: var(--color-primary-blue);
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.navbar__cta:hover {
  background: linear-gradient(90deg,
      #093341 35.39%,
      #637799 97.71%,
      #b4cadb 131.69%);
  color: var(--color-primary-white);
}

@media (min-width: 768px) {
  .navbar__cta {
    padding: 16px 30px;
  }
}

.navbar__cta-label-desktop {
  display: none;
}

@media (min-width: 768px) {
  .navbar__cta-label-desktop {
    display: block;
  }
}

@media (min-width: 768px) {
  .navbar__cta-label-mobile {
    display: none;
  }
}

/* Navbar: Mobile Nav Menu (Open State) */
@media (max-width: 767px) {
  .header::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--color-secondary-blue-gradient);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0s linear 0.3s;
  }

  .header--nav-open::before {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.3s ease,
      visibility 0s linear;
  }

  .header::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--navbar-offset, 70px) + 70px);
    z-index: 0;
    width: 100%;
    aspect-ratio: 390 / 656;
    background-image: url('../images/decorative-line.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0s linear 0.3s;
  }

  .header--nav-open::after {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.3s ease,
      visibility 0s linear;
  }

  .header--nav-open .navbar {
    position: relative;
    z-index: 1;
    background: var(--color-primary-white);
  }

  .header--nav-open .navbar__cta {
    background: var(--color-secondary-blue-gradient);
    color: var(--color-primary-white);
  }

  .navbar__items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    position: fixed;
    inset: 0;
    top: var(--navbar-offset, 70px);
    z-index: 0;
    padding: 130px 24px 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0s linear 0.3s;
  }

  .navbar__link {
    font-size: var(--font-size-h3);
    font-weight: 600;
  }

  .header--nav-open .navbar__items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0s linear;
  }

  .header--nav-open .navbar__link {
    color: var(--color-primary-white);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .navbar {
    padding: 10px 20px;
  }

  .navbar__items {
    position: static;
    left: auto;
    transform: none;
    gap: 24px;
  }

  .navbar__cta {
    padding: 14px 22px;
  }

  .navbar__cta-label-desktop {
    display: none;
  }

  .navbar__cta-label-mobile {
    display: block;
  }
}

/* Hero */
.hero {
  position: relative;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/cover-bg.png');
  background-size: cover;
  background-position: center;
}

.hero__inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: 55% 45%;
    min-height: 100vh;
  }
}

.hero__robot-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  order: 2;
}

@media (min-width: 768px) {
  .hero__robot-wrapper {
    grid-row: 1;
    grid-column: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    order: initial;
  }
}

.hero__robot {
  position: relative;
  align-self: end;
  z-index: 10;
  pointer-events: none;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero__robot {
    width: 100%;
    height: 100%;
  }
}

.hero__robot-wrapper .tag-solution-text-box {
  position: absolute;
  z-index: 11;
  padding: 10px 12px 10px 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: white;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__robot-wrapper .tag-solution-text-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__robot-wrapper .tag-solution-text-box:nth-of-type(1) {
  transition-delay: 0s;
}

.hero__robot-wrapper .tag-solution-text-box:nth-of-type(2) {
  transition-delay: 0.35s;
}

.hero__robot-wrapper .tag-solution-text-box:nth-of-type(3) {
  transition-delay: 0.7s;
}

.hero__robot-wrapper .tag-solution-text-box:nth-of-type(4) {
  transition-delay: 1.05s;
}

@media (min-width: 768px) {
  .hero__robot-wrapper .tag-solution-text-box {
    padding: 10px 16px 10px 14px;
  }
}

#smart-lab {
  top: 31%;
  left: 2%;
}

@media (min-width: 768px) {
  #smart-lab {
    top: 29%;
    left: 18%;
  }
}

#smart-diagnosis {
  top: 39%;
  right: 3%;
}

@media (min-width: 768px) {
  #smart-diagnosis {
    left: auto;
    top: 37%;
    right: 14%;
  }
}

#smart-pharmacy {
  bottom: 29%;
  left: 7%;
}

@media (min-width: 768px) {
  #smart-pharmacy {
    bottom: 52%;
    left: 7%;
  }
}

#inno-solution {
  bottom: 7%;
  left: 36%;
}

@media (min-width: 768px) {
  #inno-solution {
    left: auto;
    bottom: 45%;
    right: 14%;
  }
}

.hero__robot-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: bottom;
  object-position: bottom;
  pointer-events: none;
}

.hero__content {
  order: 1;
  align-self: start;
  margin-top: 130px;
  color: white;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 13px;
}

@media (min-width: 768px) {
  .hero__content {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    gap: 20px;
    margin-top: 0;
    padding: 0;
    order: initial;
  }
}

.hero__description {
  max-width: 580px;
}

.hero__cta {
  position: relative;
  display: inline-block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 16px 30px;
  background: var(--color-primary-white);
  margin-top: 7px;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}

.hero__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #F3F3EF 0%,
      #BCBEC0 67.44%,
      #58595B 134.88%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.hero__cta:hover::before {
  opacity: 1;
}

@media (min-width: 768px) {
  .hero__cta {
    margin-top: 20px;
  }
}

/* Hero: entrance animations */
.hero__heading-reveal__char {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__heading-reveal__char.is-visible {
  opacity: 1;
}

.hero__description,
.hero__cta {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__description.is-visible,
.hero__cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__cta-label {
  color: var(--color-primary-blue);
  font-size: 15px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero__heading {
    font-size: 2.75rem;
  }
}

/* Stats */
.stats {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stats__card {
  display: block;
  width: 100%;
  color: white;
  border-radius: 10px;
  background: linear-gradient(90deg,
      #093341 8%,
      #08303d 35%,
      #072934 56%,
      #041c23 75%,
      #010a0c 92%,
      #000 100%);
  display: flex;
  flex-direction: column;
  gap: 100px;
  justify-content: center;
  align-items: center;
  padding: 120px 0 100px;
}

@media (min-width: 768px) {
  .stats__card {
    height: 100%;
    gap: 135px;
    padding: 120px 0 148px;
  }
}

.stats__overline {
  padding-bottom: 12px;
}

@media (min-width: 768px) {
  .stats__overline {
    padding-bottom: 20px;
  }
}

.stats__heading {
  padding: 0 24px;
}

@media (min-width: 768px) {
  .stats__heading {
    padding: 0;
  }
}

.stats__heading {
  max-width: 780px;
  margin: 0 auto;
}

.text-opacity {
  opacity: 1;
}

.text-opacity__char {
  opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
  .text-opacity__char {
    opacity: clamp(0.5, calc(0.5 + var(--char-progress, 0) * 0.5), 1);
  }
}

.stats__numbers {
  display: grid;
  grid-template-columns: auto auto;
  gap: 40px 0;
  padding: 0 2cap;
}

@media (min-width: 768px) {
  .stats__numbers {
    grid-template-columns: auto auto auto auto;
  }
}

.stats__item {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid white;
  padding-left: 12px;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .stats__item {
    width: 270px;
    padding-left: 40px;
  }
}

.stats__numbers.is-visible .stats__item {
  opacity: 1;
  transform: translateY(0);
}

.stats__numbers .stats__item:nth-child(1) {
  transition-delay: 0s;
}

.stats__numbers .stats__item:nth-child(2) {
  transition-delay: 0.15s;
}

.stats__numbers .stats__item:nth-child(3) {
  transition-delay: 0.3s;
}

.stats__numbers .stats__item:nth-child(4) {
  transition-delay: 0.45s;
}

.stats__item-value {
  background: linear-gradient(90deg, #f3f3ef 0%, #bcbec0 50%, #58595b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 768px) {
  .stats__item-label {
    width: 165px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stats__numbers {
    grid-template-columns: auto auto;
    justify-content: center;
  }
}

/* Solutions */
.solutions {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .solutions {
    padding-top: 140px;
  }
}

.solutions__title {
  margin-bottom: 20px;
}

.solutions__description {
  margin-bottom: 20px;
  max-width: 800px;
  padding: 0 10px;
  text-wrap: pretty;
}

.solutions__cards {
  padding: 10px;
}

@media (min-width: 768px) {
  .solutions__cards {
    padding: 12px;
  }
}

.solutions__card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .solutions__card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .solutions__card-list {
    grid-template-columns: repeat(15, 1fr);
  }

  .solutions__card-list:has(.solution-card:nth-child(1)):not( :has(.solution-card:nth-child(2))) .solution-card:nth-child(1) {
    grid-column: 1 / 16;
  }

  .solutions__card-list:has(.solution-card:nth-child(2)):not( :has(.solution-card:nth-child(3))) .solution-card:nth-child(1) {
    grid-column: 1 / 8;
  }

  .solutions__card-list:has(.solution-card:nth-child(2)):not( :has(.solution-card:nth-child(3))) .solution-card:nth-child(2) {
    grid-column: 8 / 16;
  }

  .solutions__card-list:has(.solution-card:nth-child(3)):not( :has(.solution-card:nth-child(4))) .solution-card:nth-child(1) {
    grid-column: 1 / 6;
  }

  .solutions__card-list:has(.solution-card:nth-child(3)):not( :has(.solution-card:nth-child(4))) .solution-card:nth-child(2) {
    grid-column: 6 / 11;
  }

  .solutions__card-list:has(.solution-card:nth-child(3)):not( :has(.solution-card:nth-child(4))) .solution-card:nth-child(3) {
    grid-column: 11 / 16;
  }

  .solutions__card-list:has(.solution-card:nth-child(4)):not( :has(.solution-card:nth-child(5))) .solution-card:nth-child(1) {
    grid-column: 1 / 10;
  }

  .solutions__card-list:has(.solution-card:nth-child(4)):not( :has(.solution-card:nth-child(5))) .solution-card:nth-child(2) {
    grid-column: 10 / 16;
  }

  .solutions__card-list:has(.solution-card:nth-child(4)):not( :has(.solution-card:nth-child(5))) .solution-card:nth-child(3) {
    grid-column: 1 / 7;
  }

  .solutions__card-list:has(.solution-card:nth-child(4)):not( :has(.solution-card:nth-child(5))) .solution-card:nth-child(4) {
    grid-column: 7 / 16;
  }

  .solutions__card-list:has(.solution-card:nth-child(5)):not( :has(.solution-card:nth-child(6))) .solution-card:nth-child(1) {
    grid-column: 1 / 10;
  }

  .solutions__card-list:has(.solution-card:nth-child(5)):not( :has(.solution-card:nth-child(6))) .solution-card:nth-child(2) {
    grid-column: 10 / 16;
  }

  .solutions__card-list:has(.solution-card:nth-child(5)):not( :has(.solution-card:nth-child(6))) .solution-card:nth-child(3) {
    grid-column: 1 / 6;
  }

  .solutions__card-list:has(.solution-card:nth-child(5)):not( :has(.solution-card:nth-child(6))) .solution-card:nth-child(4) {
    grid-column: 6 / 11;
  }

  .solutions__card-list:has(.solution-card:nth-child(5)):not( :has(.solution-card:nth-child(6))) .solution-card:nth-child(5) {
    grid-column: 11 / 16;
  }

  .solutions__card-list:has(.solution-card:nth-child(6)) .solution-card:nth-child(3n + 1) {
    grid-column: 1 / 6;
  }

  .solutions__card-list:has(.solution-card:nth-child(6)) .solution-card:nth-child(3n + 2) {
    grid-column: 6 / 11;
  }

  .solutions__card-list:has(.solution-card:nth-child(6)) .solution-card:nth-child(3n + 3) {
    grid-column: 11 / 16;
  }
}

/* Solution Card */
.solution-card {
  display: block;
  position: relative;
  overflow: hidden;
  max-height: 570px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 767px) {
  .solution-card:nth-child(1) {
    aspect-ratio: 1 / 1;
  }
}

.solution-card__media {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.solution-card__media:hover {
  transform: scale(1.1);
}

.solution-card__media img,
.solution-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.solution-card__title {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

/* Highlighted Products */
.highlight-products {
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .highlight-products {
    padding: 130px 0 148px;
    gap: 0;
  }
}

.highlight-products__top {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .highlight-products__top {
    padding: 0 80px;
    flex-direction: row;
  }
}

.highlight-products__title {
  margin-bottom: 20px;
}

.highlight-products__description {
  max-width: 740px;
  margin-bottom: 28px;
}

@media (min-width: 1024px) {
  .highlight-products__description {
    margin-bottom: 60px;
  }
}

.highlight-products__swiper {
  cursor: -webkit-grab;
  cursor: grab;
  padding: 0 10px;
}

@media (min-width: 768px) {
  .highlight-products__swiper {
    padding: 0 80px;
  }
}

.highlight-products__swiper:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* Product Card */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.product-card__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (min-width: 768px) {
  .product-card {
    gap: 24px;
  }
}

.product-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 30px;
  left: 18px;
  right: 18px;
  transform: translateY(-10px);
  z-index: 10;
  padding-left: 10px;
}

@media (min-width: 768px) {
  .product-card__header {
    transform: translateY(-4px);
  }
}

.product-card__circle {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: linear-gradient(90deg,
      #b4cadb 7.86%,
      #637799 51.05%,
      #093341 98.24%);
}

.product-card__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 334px;
  height: 396px;
  padding: 0 20px 0 26px;
  background: var(--color-system-grey);
  -webkit-clip-path: polygon(97.882% 0.05%, 10.15% 0.05%, 10.15% 0.05%, 9.82% 0.063%, 9.494% 0.101%, 9.173% 0.162%, 8.859% 0.248%, 8.553% 0.357%, 8.258% 0.489%, 7.973% 0.643%, 7.7% 0.819%, 7.442% 1.016%, 7.199% 1.234%, 7.199% 1.234%, 6.825% 1.596%, 6.306% 2.098%, 5.679% 2.704%, 4.981% 3.379%, 4.246% 4.089%, 3.511% 4.799%, 2.812% 5.474%, 2.185% 6.079%, 1.666% 6.581%, 1.291% 6.943%, 1.291% 6.943%, 1.065% 7.177%, 0.861% 7.427%, 0.679% 7.691%, 0.519% 7.967%, 0.382% 8.254%, 0.269% 8.55%, 0.179% 8.855%, 0.115% 9.166%, 0.076% 9.483%, 0.063% 9.804%, 0.063% 9.854%, 0.06% 9.854%, 0.081% 97.975%, 0.081% 97.975%, 0.108% 98.297%, 0.186% 98.601%, 0.31% 98.885%, 0.476% 99.144%, 0.68% 99.374%, 0.918% 99.57%, 1.185% 99.73%, 1.477% 99.85%, 1.789% 99.924%, 2.118% 99.95%, 89.853% 99.95%, 89.853% 99.95%, 90.183% 99.937%, 90.509% 99.899%, 90.83% 99.838%, 91.144% 99.752%, 91.45% 99.643%, 91.746% 99.511%, 92.03% 99.357%, 92.303% 99.181%, 92.561% 98.984%, 92.804% 98.766%, 92.804% 98.766%, 92.971% 98.605%, 93.178% 98.404%, 93.422% 98.168%, 93.697% 97.902%, 93.999% 97.61%, 94.324% 97.296%, 94.666% 96.965%, 95.022% 96.621%, 95.387% 96.268%, 95.757% 95.911%, 98.712% 93.057%, 98.712% 93.057%, 98.911% 92.852%, 99.093% 92.635%, 99.258% 92.408%, 99.407% 92.17%, 99.539% 91.924%, 99.652% 91.67%, 99.747% 91.408%, 99.824% 91.141%, 99.881% 90.868%, 99.919% 90.591%, 99.924% 90.545%, 99.94% 90.545%, 99.919% 2.025%, 99.919% 2.025%, 99.894% 1.713%, 99.821% 1.417%, 99.704% 1.14%, 99.547% 0.887%, 99.354% 0.66%, 99.129% 0.464%, 98.876% 0.301%, 98.598% 0.176%, 98.3% 0.092%, 97.986% 0.053%) !important;
  clip-path: polygon(97.882% 0.05%, 10.15% 0.05%, 10.15% 0.05%, 9.82% 0.063%, 9.494% 0.101%, 9.173% 0.162%, 8.859% 0.248%, 8.553% 0.357%, 8.258% 0.489%, 7.973% 0.643%, 7.7% 0.819%, 7.442% 1.016%, 7.199% 1.234%, 7.199% 1.234%, 6.825% 1.596%, 6.306% 2.098%, 5.679% 2.704%, 4.981% 3.379%, 4.246% 4.089%, 3.511% 4.799%, 2.812% 5.474%, 2.185% 6.079%, 1.666% 6.581%, 1.291% 6.943%, 1.291% 6.943%, 1.065% 7.177%, 0.861% 7.427%, 0.679% 7.691%, 0.519% 7.967%, 0.382% 8.254%, 0.269% 8.55%, 0.179% 8.855%, 0.115% 9.166%, 0.076% 9.483%, 0.063% 9.804%, 0.063% 9.854%, 0.06% 9.854%, 0.081% 97.975%, 0.081% 97.975%, 0.108% 98.297%, 0.186% 98.601%, 0.31% 98.885%, 0.476% 99.144%, 0.68% 99.374%, 0.918% 99.57%, 1.185% 99.73%, 1.477% 99.85%, 1.789% 99.924%, 2.118% 99.95%, 89.853% 99.95%, 89.853% 99.95%, 90.183% 99.937%, 90.509% 99.899%, 90.83% 99.838%, 91.144% 99.752%, 91.45% 99.643%, 91.746% 99.511%, 92.03% 99.357%, 92.303% 99.181%, 92.561% 98.984%, 92.804% 98.766%, 92.804% 98.766%, 92.971% 98.605%, 93.178% 98.404%, 93.422% 98.168%, 93.697% 97.902%, 93.999% 97.61%, 94.324% 97.296%, 94.666% 96.965%, 95.022% 96.621%, 95.387% 96.268%, 95.757% 95.911%, 98.712% 93.057%, 98.712% 93.057%, 98.911% 92.852%, 99.093% 92.635%, 99.258% 92.408%, 99.407% 92.17%, 99.539% 91.924%, 99.652% 91.67%, 99.747% 91.408%, 99.824% 91.141%, 99.881% 90.868%, 99.919% 90.591%, 99.924% 90.545%, 99.94% 90.545%, 99.919% 2.025%, 99.919% 2.025%, 99.894% 1.713%, 99.821% 1.417%, 99.704% 1.14%, 99.547% 0.887%, 99.354% 0.66%, 99.129% 0.464%, 98.876% 0.301%, 98.598% 0.176%, 98.3% 0.092%, 97.986% 0.053%) !important;
}

@media (min-width: 768px) {
  .product-card__image {
    width: 419px;
    height: 497px;
    padding: 30px 18px 0 32px;
  }
}

.product-card__image::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--color-primary-white);
  -webkit-clip-path: polygon(97.882% 0.05%, 10.15% 0.05%, 10.15% 0.05%, 9.82% 0.063%, 9.494% 0.101%, 9.173% 0.162%, 8.859% 0.248%, 8.553% 0.357%, 8.258% 0.489%, 7.973% 0.643%, 7.7% 0.819%, 7.442% 1.016%, 7.199% 1.234%, 7.199% 1.234%, 6.825% 1.596%, 6.306% 2.098%, 5.679% 2.704%, 4.981% 3.379%, 4.246% 4.089%, 3.511% 4.799%, 2.812% 5.474%, 2.185% 6.079%, 1.666% 6.581%, 1.291% 6.943%, 1.291% 6.943%, 1.065% 7.177%, 0.861% 7.427%, 0.679% 7.691%, 0.519% 7.967%, 0.382% 8.254%, 0.269% 8.55%, 0.179% 8.855%, 0.115% 9.166%, 0.076% 9.483%, 0.063% 9.804%, 0.063% 9.854%, 0.06% 9.854%, 0.081% 97.975%, 0.081% 97.975%, 0.108% 98.297%, 0.186% 98.601%, 0.31% 98.885%, 0.476% 99.144%, 0.68% 99.374%, 0.918% 99.57%, 1.185% 99.73%, 1.477% 99.85%, 1.789% 99.924%, 2.118% 99.95%, 89.853% 99.95%, 89.853% 99.95%, 90.183% 99.937%, 90.509% 99.899%, 90.83% 99.838%, 91.144% 99.752%, 91.45% 99.643%, 91.746% 99.511%, 92.03% 99.357%, 92.303% 99.181%, 92.561% 98.984%, 92.804% 98.766%, 92.804% 98.766%, 92.971% 98.605%, 93.178% 98.404%, 93.422% 98.168%, 93.697% 97.902%, 93.999% 97.61%, 94.324% 97.296%, 94.666% 96.965%, 95.022% 96.621%, 95.387% 96.268%, 95.757% 95.911%, 98.712% 93.057%, 98.712% 93.057%, 98.911% 92.852%, 99.093% 92.635%, 99.258% 92.408%, 99.407% 92.17%, 99.539% 91.924%, 99.652% 91.67%, 99.747% 91.408%, 99.824% 91.141%, 99.881% 90.868%, 99.919% 90.591%, 99.924% 90.545%, 99.94% 90.545%, 99.919% 2.025%, 99.919% 2.025%, 99.894% 1.713%, 99.821% 1.417%, 99.704% 1.14%, 99.547% 0.887%, 99.354% 0.66%, 99.129% 0.464%, 98.876% 0.301%, 98.598% 0.176%, 98.3% 0.092%, 97.986% 0.053%);
  clip-path: polygon(97.882% 0.05%, 10.15% 0.05%, 10.15% 0.05%, 9.82% 0.063%, 9.494% 0.101%, 9.173% 0.162%, 8.859% 0.248%, 8.553% 0.357%, 8.258% 0.489%, 7.973% 0.643%, 7.7% 0.819%, 7.442% 1.016%, 7.199% 1.234%, 7.199% 1.234%, 6.825% 1.596%, 6.306% 2.098%, 5.679% 2.704%, 4.981% 3.379%, 4.246% 4.089%, 3.511% 4.799%, 2.812% 5.474%, 2.185% 6.079%, 1.666% 6.581%, 1.291% 6.943%, 1.291% 6.943%, 1.065% 7.177%, 0.861% 7.427%, 0.679% 7.691%, 0.519% 7.967%, 0.382% 8.254%, 0.269% 8.55%, 0.179% 8.855%, 0.115% 9.166%, 0.076% 9.483%, 0.063% 9.804%, 0.063% 9.854%, 0.06% 9.854%, 0.081% 97.975%, 0.081% 97.975%, 0.108% 98.297%, 0.186% 98.601%, 0.31% 98.885%, 0.476% 99.144%, 0.68% 99.374%, 0.918% 99.57%, 1.185% 99.73%, 1.477% 99.85%, 1.789% 99.924%, 2.118% 99.95%, 89.853% 99.95%, 89.853% 99.95%, 90.183% 99.937%, 90.509% 99.899%, 90.83% 99.838%, 91.144% 99.752%, 91.45% 99.643%, 91.746% 99.511%, 92.03% 99.357%, 92.303% 99.181%, 92.561% 98.984%, 92.804% 98.766%, 92.804% 98.766%, 92.971% 98.605%, 93.178% 98.404%, 93.422% 98.168%, 93.697% 97.902%, 93.999% 97.61%, 94.324% 97.296%, 94.666% 96.965%, 95.022% 96.621%, 95.387% 96.268%, 95.757% 95.911%, 98.712% 93.057%, 98.712% 93.057%, 98.911% 92.852%, 99.093% 92.635%, 99.258% 92.408%, 99.407% 92.17%, 99.539% 91.924%, 99.652% 91.67%, 99.747% 91.408%, 99.824% 91.141%, 99.881% 90.868%, 99.919% 90.591%, 99.924% 90.545%, 99.94% 90.545%, 99.919% 2.025%, 99.919% 2.025%, 99.894% 1.713%, 99.821% 1.417%, 99.704% 1.14%, 99.547% 0.887%, 99.354% 0.66%, 99.129% 0.464%, 98.876% 0.301%, 98.598% 0.176%, 98.3% 0.092%, 97.986% 0.053%);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

.product-card__img {
  width: 75%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover img {
    transform: scale(1.05);
  }
}

.product-card__content {
  max-width: 334px;
}

@media (min-width: 768px) {
  .product-card__content {
    max-width: 419px;
  }
}

.product-card__title {
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .product-card__title {
    margin-bottom: 10px;
  }
}

/* Swiper */
.swiper {
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.swiper-slide {
  width: 334px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .swiper-slide {
    width: 419px;
  }
}

/* Break Media */
.break-media {
  width: 100%;
  height: 550px;
  padding: 0 8px;
}

@media (min-width: 1024px) {
  .break-media {
    height: auto;
  }
}

.break-media__img {
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-system-grey);
  background: var(--color-primary-white);
  transform: scale(0.35);
  transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.break-media__img.is-visible {
  transform: scale(1);
}

/* Key Positioning */
.key-positioning {
  position: relative;
  padding: 10px;
}

@media (min-width: 768px) {
  .key-positioning {
    padding: 8px;
  }
}

.key-positioning__content {
  display: flex;
  flex-direction: column;
  background: var(--color-primary-white);
  border-radius: 10px;
  padding: 60px 10px;
  gap: 115px;
}

@media (min-width: 1024px) {
  .key-positioning__content {
    flex-direction: row;
    justify-content: space-around;
    padding: 100px 72px 140px;
    gap: 0;
  }
}

.key-positioning__description {
  max-width: 530px;
}

.key-positioning__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.key-positioning__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 635px;
}

@media (min-width: 768px) {
  .key-positioning__grid {
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .key-positioning__grid {
    position: unset;
    margin: 0;
  }
}

.key-positioning__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow:
    0 14px 4px 0 rgba(0, 0, 0, 0),
    0 9px 4px 0 rgba(0, 0, 0, 0.01),
    0 5px 3px 0 rgba(0, 0, 0, 0.03),
    0 2px 2px 0 rgba(0, 0, 0, 0.04),
    0 1px 1px 0 rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  .key-positioning__card {
    flex-direction: row;
    gap: 30px;
    padding: 40px;
  }
}

.key-positioning__card-icon-img {
  height: 24px;
}

.key-positioning__card-title {
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .key-positioning__card-title {
    margin-bottom: 20px;
  }
}

.key-positioning__image {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  z-index: 10;
  height: 286px;
  aspect-ratio: 331 / 473;
}

@media (min-width: 1024px) {
  .key-positioning__image {
    top: unset;
    right: unset;
    bottom: 8px;
    left: 10%;
    transform: translateY(0);
    height: 58%;
    aspect-ratio: 331 / 473;
  }
}

.key-positioning-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .key-positioning__content {
    padding: 72px 40px;
  }
}

/* Customers */
.customers {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px 0;
}

@media (min-width: 768px) {
  .customers {
    padding: 130px 0;
  }
}

.customers__title {
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .customers__title {
    margin-bottom: 20px;
  }
}

.customers__description {
  max-width: 900px;
  margin-bottom: 60px;
  text-wrap: pretty;
  padding: 0 10px;
}

/* Customers Swiper */
.customers__swiper {
  width: 100%;
  padding: 0 10px;
}

/* Keep the slider hidden (layout preserved) until the loop is anchored on the
   first real card, so the leading clone never flashes on initial render. */
.customers__swiper.is-init-hidden {
  visibility: hidden;
}

.customers__swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

@media (min-width: 768px) {
  .customers__swiper {
    padding: 0 80px;
  }
}

.customers__slide {
  width: 370px;
  height: 370px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .customers__slide {
    width: 525px;
    height: 416px;
  }
}

/* Extra breathing room after the last card in the loop. Swiper deep-clones slide
   classes, so the leading clone (a copy of this last card) carries the same gap —
   keeping the cloned last card visually separated from the first card on initial
   load and on every loop wrap, without touching loop/autoplay/drag config. */
.customers__slide--loop-end {
  margin-right: 60px !important;
}

@media (min-width: 768px) {
  .customers__slide--loop-end {
    margin-right: 120px !important;
  }
}

/* Image slide: width fixed, height comes from the image ratio (not stretched by the wrapper) */
.customers__slide--image {
  width: 280px;
  height: auto;
  align-self: flex-start;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .customers__slide--image {
    width: 312px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {

  .highlight-products__top,
  .highlight-products__swiper,
  .customers__swiper {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Customer Card base */
.customer-card {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .customer-card {
    width: 525px;
    padding: 40px 36px;
  }
}

.customer-card__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.customer-card--image {
  padding: 0;
  border-radius: 10px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.customer-card__image {
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 312 / 416;
  overflow: hidden;
}

.customer-card__cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.customer-card--blue {
  background: var(--color-secondary-blue-gradient);
  color: white;
}

.customer-card--blue .customer-card__text,
.customer-card--blue .customer-card__position {
  color: rgba(255, 255, 255, 1);
}

/* White variant */
.customer-card--white {
  background: var(--color-primary-white);
  color: var(--color-primary-blue);
}

.customer-card--white .customer-card__position {
  color: rgba(9, 51, 65, 1);
}

.customer-card__logo {
  height: 57px;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
}

.customer-card--white .customer-card__logo {
  -webkit-filter: brightness(0);
  filter: brightness(0);
}

.customer-card__text {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: left;
}

.customer-card__author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

@media (min-width: 768px) {
  .customer-card__author {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.customer-card__line {
  width: 15px;
  height: 1px;
  border: 0;
  margin: 0 0 4px;
}

.customer-card__line--white {
  background-color: var(--color-primary-white);
}

.customer-card__line--blue {
  background-color: var(--color-primary-blue);
}

.customer-card__name {
  font-size: var(--font-size-body);
}

.customer-card__name-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
}

.customer-card__position {
  font-size: var(--font-size-description);
  opacity: 0.6;
}

/* News */
.news {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 10px;
}

@media (min-width: 1024px) {
  .news {
    flex-direction: row;
  }
}

.news-and-insights,
.highlight {
  position: relative;
  flex: 1;
  min-width: 0;
}

.highlight__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

@media (min-width: 768px) {
  .highlight__header {
    padding: 0 27px;
  }
}

.news-and-insights__image {
  width: 100%;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .news-and-insights__image {
    height: 100%;
  }
}

.news-and-insights-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.news-and-insights__content {
  position: absolute;
  top: 40px;
  left: 10px;
  z-index: 20;
  color: var(--color-primary-white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .news-and-insights__content {
    top: 44px;
    left: 44px;
    gap: 16px;
  }
}

.news-and-insights__description {
  max-width: 320px;
  margin-bottom: 20px;
}

.news-and-insights__btn {
  position: relative;
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 17px 30px;
  background: var(--color-primary-white);
  border-radius: 10px;
  color: var(--color-primary-blue);
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}

.news-and-insights__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #F3F3EF 0%,
      #BCBEC0 67.44%,
      #58595B 134.88%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.news-and-insights__btn:hover::before {
  opacity: 1;
}

.highlight__swiper {
  padding: 0 10px;
}

@media (min-width: 768px) {
  .highlight__swiper {
    padding: 0 27px;
  }
}

.highlight {
  background: var(--color-primary-white);
  border-radius: 10px;
  border: 1px solid var(--color-system-grey);
  color: var(--color-primary-blue);
  padding: 44px 0;
  overflow: hidden;
}

.highlight__cards {
  padding: 34px 0 40px;
  display: flex;
}

@media (min-width: 768px) {
  .highlight__cards {
    padding: 97px 0 60px;
  }
}

.highlight__card {
  display: block;
  padding: 34px 0 40px;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .highlight__card {
    padding: 97px 0 60px;
  }
}

.highlight__card-category {
  padding: 8px 12px;
  background: var(--color-primary-white);
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
}

@media (min-width: 768px) {
  .highlight__card-category {
    padding: 8px 12px;
  }
}

.highlight__card-img {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .highlight__card-img {
    margin-bottom: 21px;
  }
}

.highlight__card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.highlight__card-img:hover img {
  transform: scale(1.1);
}

.highlight__card-title {
  margin-bottom: 10px;
}

.highlight__nav {
  display: flex;
  gap: 12px;
  padding: 0 10px;
}

@media (min-width: 768px) {
  .highlight__nav {
    padding: 0 27px;
  }
}

.highlight__nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--Primary-Blue, #093341);
}

/* Consult */
.consult {
  position: relative;
  padding: 10px;
}

.consult__image {
  border-radius: 10px;
  overflow: hidden;
}

.consult__image img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  display: block;
}

@media (min-width: 768px) {
  .consult__image img {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 400px;
  }
}

.consult__content {
  position: absolute;
  inset: 0;
  margin: auto;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 10;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .consult__content {
    gap: 16px;
    max-width: 720px;
  }
}

.consult__btn {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-white);
  padding: 17px 30px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 10px;
  color: var(--color-primary-blue);
  margin-top: 32px;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.consult__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #F3F3EF 0%,
      #BCBEC0 67.44%,
      #58595B 134.88%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.consult__btn:hover::before {
  opacity: 1;
}



/* All Solutions */
.all-solutions__card-list {
  padding: 10px;
}

.all-solution-card {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .all-solution-card {
    flex-direction: row;
    align-items: stretch;
  }

  .all-solution-card:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.all-solution-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
}

.all-solution-card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 768px) {
  .all-solution-card-img {
    width: 50%;
    flex: 0 0 50%;
  }
}

.all-solution-card__content {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 30px 0;
  flex: 1;
}

@media (min-width: 768px) {
  .all-solution-card__content {
    padding: 40px 28px;
    width: 50%;
    flex: 0 0 50%;
  }
}

.all-solution-card__title {
  font-weight: 600;
}

@media (min-width: 768px) {
  .all-solution-card__title {
    font-weight: 500;
  }
}

.all-solution-card__description {
  padding: 16px 0 30px;
}

@media (min-width: 768px) {
  .all-solution-card__description {
    padding: 20px 0 40px;
  }
}

/* Cover */
.cover-template {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 128px 0 142px;
  background-image: var(--cover-bg-desktop);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 10px;
  border-radius: 10px;
  min-height: 400px;
}

@media (max-width: 767px) {
  .cover-template {
    background-image: var(--cover-bg-mobile, var(--cover-bg-desktop));
  }
}

@media (min-width: 768px) {
  .cover-template {
    /* background-position: 65% bottom; */
    padding: 134px 0 138px;
    min-height: 624px;
  }

  .cover-template--small {
    min-height: 400px;
  }
}

@media (min-width: 1500px) {
  .cover-template {
    min-height: 724px;
  }

  .cover-template--small {
    min-height: 480px;
  }
}

.cover__container {
  width: 100%;
  padding: 0 8px;
  color: var(--color-primary-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .cover__container {
    max-width: 800px;
  }
}

/* Overview */
.product-single__overview .overview__content {
  padding: 0 0 40px;
}

.product-single__overview .overview {
  /* margin-bottom: 0; */
  margin: 0 !important;
  padding: 10px 10px 40px 10px !important;
}

.product-single__overview .overview__image img {
  object-fit: contain;
  object-position: center;
}

@media (min-width: 768px) {
  .product-single__overview .overview-outer .overview__content {
    padding: 30px;
  }
}

@media (min-width: 1024px) {
  .product-single__overview .overview-outer {
    margin: 20px 0;
  }

  .product-single__overview .overview {
    padding: 10px !important;
    margin: 0 !important;
  }
}

.solution__overview .overview {
  margin: 10px;
  padding: 0 10px 30px 10px;
}

@media (min-width: 1024px) {
  .solution__overview .overview {
    margin: 10px;
    padding: 20px;
  }

  .solution__overview .overview__content {
    padding: 30px 90px 30px 30px;
  }
}

.overview {
  position: relative;
  padding: 10px 10px 60px 10px;
  display: flex;
  flex-direction: column;
  margin: 0 10px 60px;
}

@media (min-width: 1024px) {
  .overview {
    display: grid;
    padding: 10px;
    grid-template-columns: 53% 47%;
    margin: 0 10px 10px;
  }
}

.overview--image-right {
  flex-direction: column-reverse;
}

@media (min-width: 768px) {
  .overview--image-right {
    grid-template-columns: 47% 53%;
  }

  .overview--image-right .overview__image {
    grid-column: 2;
  }

  .overview--image-right .overview__content {
    grid-column: 1;
  }
}

.overview__title {
  padding: 11px 0 20px;
}

@media (min-width: 768px) {
  .overview__title {
    padding: 11px 0 30px;
  }
}

.overview__content {
  display: flex;
  flex-direction: column;
  padding: 40px 0;
}

@media (min-width: 768px) {
  .overview__content {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    padding: 57px 71px;
  }
}

.overview__image {
  overflow: hidden;
  margin: 0 auto;
  --frame-padding: 0;
}

@media (max-width: 767px) {
  .overview__image {
    --frame-width: 100%;
    --frame-height: auto;
  }
}

@media (min-width: 768px) {
  .overview__image {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0;
    width: 50vw;
    height: auto;
  }
}

.overview__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

@media (max-width: 767px) {
  .overview__cards[data-aos] {
    transform: translate3d(0, 40px, 0);
  }

  .overview__cards[data-aos].aos-animate {
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 768px) {
  .overview__cards {
    flex-direction: row;
    justify-self: end;
    align-self: start;
    position: absolute;
    bottom: 40px;
    padding-right: 48px;
  }
}

.overview__card {
  border-radius: 10px;
  padding: 30px 16px;
  background: white;
}

@media (min-width: 768px) {
  .overview__card {
    padding: 30px;
    max-width: 300px;
  }
}

.overview__card-icon {
  width: 34px;
  flex: none;
}

.overview__card-title {
  padding: 30px 0 12px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .overview__content {
    padding: 40px 32px;
  }

  .overview__cards {
    position: static;
    grid-column: 1 / -1;
    padding-right: 0;
    margin-top: 20px;
  }

  .overview__card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 24px 16px;
  }

  .overview__card-title {
    padding: 20px 0 10px;
  }
}

/* Image Frame */
.image-frame {
  position: relative;
  overflow: hidden;
  width: var(--frame-width, 100%);
  height: var(--frame-height, auto);
  background-color: var(--frame-bg-color, transparent);
  background-image: var(--frame-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--frame-padding, 44px);

  --notch: 19px;
  --corner-radius: 8px;
  --fillet: 12px;
  --fillet-trim: calc(var(--fillet) / tan(67.5deg));

  -webkit-clip-path: shape(from calc(var(--fillet-trim) * sin(45deg)) calc(var(--notch) - var(--fillet-trim) * sin(45deg)),
      line to calc(var(--notch) - var(--fillet-trim) * sin(45deg)) calc(var(--fillet-trim) * sin(45deg)),
      arc to calc(var(--notch) + var(--fillet-trim)) 0 of var(--fillet) cw,
      line to calc(100% - var(--corner-radius)) 0,
      arc to 100% var(--corner-radius) of var(--corner-radius) cw,
      line to 100% calc(100% - var(--notch) - var(--fillet-trim)),
      arc to calc(100% - var(--fillet-trim) * sin(45deg)) calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      line to calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)) calc(100% - var(--fillet-trim) * sin(45deg)),
      arc to calc(100% - var(--notch) - var(--fillet-trim)) 100% of var(--fillet) cw,
      line to var(--corner-radius) 100%,
      arc to 0 calc(100% - var(--corner-radius)) of var(--corner-radius) cw,
      line to 0 calc(var(--notch) + var(--fillet-trim)),
      arc to calc(var(--fillet-trim) * sin(45deg)) calc(var(--notch) - var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      close);

  clip-path: shape(from calc(var(--fillet-trim) * sin(45deg)) calc(var(--notch) - var(--fillet-trim) * sin(45deg)),
      line to calc(var(--notch) - var(--fillet-trim) * sin(45deg)) calc(var(--fillet-trim) * sin(45deg)),
      arc to calc(var(--notch) + var(--fillet-trim)) 0 of var(--fillet) cw,
      line to calc(100% - var(--corner-radius)) 0,
      arc to 100% var(--corner-radius) of var(--corner-radius) cw,
      line to 100% calc(100% - var(--notch) - var(--fillet-trim)),
      arc to calc(100% - var(--fillet-trim) * sin(45deg)) calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      line to calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)) calc(100% - var(--fillet-trim) * sin(45deg)),
      arc to calc(100% - var(--notch) - var(--fillet-trim)) 100% of var(--fillet) cw,
      line to var(--corner-radius) 100%,
      arc to 0 calc(100% - var(--corner-radius)) of var(--corner-radius) cw,
      line to 0 calc(var(--notch) + var(--fillet-trim)),
      arc to calc(var(--fillet-trim) * sin(45deg)) calc(var(--notch) - var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      close);
}

@media (min-width: 768px) {
  .image-frame {
    --notch: 36px;
    --corner-radius: 12px;
    --fillet: 16px;
  }
}

.image-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.overview__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/* Image Frame: size variants */
.image-frame--sm {
  --frame-width: 180px;
  --frame-height: 214px;
}

@media (min-width: 768px) {
  .image-frame--sm {
    --frame-width: 302px;
    --frame-height: 359px;
    --frame-padding: 80px;
  }
}

/* Image Frame: background variants */
.image-frame--white {
  --frame-bg-color: var(--color-primary-white);
}

.image-frame--blue {
  --frame-bg-color: var(--color-primary-blue);
}

.image-frame--blue-gradient {
  background: var(--color-secondary-blue-gradient);
}

.image-frame--rounded {
  -webkit-clip-path: none;
  clip-path: none;
  border-radius: 10px;
}

/* Image Frame: fit variants */
.image-frame--cover {
  --frame-padding: 0;
}

.image-frame--cover img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/* Image Frame: sold out badge */
.image-frame__badge--sold-out {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--color-system-grey);
  color: var(--color-primary-blue);
}

/* Product Groups */
.product-groups {
  padding: 10px 0;
  margin-top: 60px;
}

@media (min-width: 1024px) {
  .product-groups {
    padding: 10px;
  }
}

.product-groups__cards {
  padding: 0 10px;
  cursor: -webkit-grab;
  cursor: grab;
}

.product-groups__cards:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.product-groups__card {
  flex: none;
  width: 300px;
  height: 135px;
  max-width: 100%;
  background-color: var(--color-primary-blue);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  padding: 15px;
}

.product-groups__title {
  margin-bottom: 24px;
  padding: 0 10px;
}

.product-groups__card-title {
  color: var(--color-primary-white);
}

@media (min-width: 768px) {
  .product-groups {
    margin-top: 130px;
  }

  .product-groups__card {
    width: 100%;
    max-width: 346px;
    height: auto;
    aspect-ratio: 346 / 188;
    gap: 12px;
    padding: 20px;
  }

  @media (min-width: 1024px) {
    .product-groups__cards {
      overflow: visible;
      margin: 0;
      cursor: default;
    }

    .product-groups__cards:active {
      cursor: default;
    }

    .product-groups__cards .swiper-wrapper {
      width: 100%;
      gap: 12px;
    }

    .product-groups__card {
      flex: 1 !important;
      width: auto !important;
      max-width: none !important;
      height: auto;
      aspect-ratio: 346 / 188;
      margin-right: 0 !important;
    }
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .product-groups {
    margin-top: 72px;
  }
}

/* Product List */
.product-list {
  padding: 0 10px 60px;
}

@media (min-width: 768px) {
  .product-list {
    padding: 0 80px 80px;
  }
}

.product-list__header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--color-primary-blue-rgb), 0.5);
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .product-list__header {
    padding-top: 122px;
  }
}

.product-list__header-filter {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.product-cards-wrapper {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .product-cards-wrapper {
    flex-direction: row;
  }
}

.filter-box {
  padding: 18px 8px;
  border: 1px solid rgba(var(--color-primary-blue-rgb), 0.3);
  border-radius: 10px;
}

.product-cards-wrapper {
  .filter-box {
    padding: 30px 20px;
  }
}

.product-cards {
  display: flex;
  gap: 10px;
}

@media (min-width: 768px) {
  .product-cards {
    gap: 24px;
  }
}

.product-card {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.product__name-name {
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .product__name-name {
    margin-bottom: 10px;
  }
}

/* Product List: Layout */
.product-list__layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 20px;
}

.product-list__sidebar {
  width: 100%;
  order: -1;
}

@media (min-width: 768px) {
  .product-list__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding-top: 24px;
  }

  .product-list__main {
    flex: 1;
    min-width: 0;
  }

  .product-list__sidebar {
    order: 0;
    width: 300px;
    flex: none;
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    align-self: flex-start;
  }
}

/* Product Grid */
.product-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
}

@media (min-width: 768px) {
  .product-list__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/*
@media (min-width: 1500px) {
  .product-list__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .product-list__layout.is-filter-hidden .product-list__grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
} */

.product-list__grid .product-card {
  width: 100%;
}

.product-list__grid .image-frame--sm {
  --frame-width: 100%;
  --frame-height: auto;
  --frame-padding: 40px;
  aspect-ratio: 180 / 214;
}

.product-list__grid .image-frame--sm img {
  -o-object-fit: contain;
  object-fit: contain;
}

@media (min-width: 768px) {
  .product-list__grid .image-frame--sm {
    --frame-padding: 80px;
    aspect-ratio: 302 / 359;
  }
}

.product-list__empty,
.news-insights__empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  opacity: 0.5;
}

/* Pagination */
.product-list__pagination,
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 40px;
  flex-wrap: wrap;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-primary-blue);
  font-family: inherit;
  font-size: var(--font-size-button);
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.pagination__btn:hover:not(:disabled):not(.pagination__btn--arrow) {
  border-bottom-color: rgba(180, 202, 219, 0.5);
}

.pagination__btn--active {
  border-bottom: none;
  position: relative;
  color: var(--color-primary-blue);
}

.pagination__btn--active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary-linear);
}

.pagination__btn--arrow {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border: 1px solid var(--color-primary-blue);
  border-radius: 50%;
  background: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.pagination__btn--arrow:hover:not(:disabled) {
  border-color: var(--color-primary-blue);
  background: rgba(var(--color-primary-blue-rgb), 0.06);
}

.pagination__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination__btn img {
  display: block;
  width: 10px;
  height: 10px;
}

@media (min-width: 768px) {

  .product-list__pagination,
  .pagination {
    gap: 18px;
  }

  .pagination__btn--arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .pagination__btn img {
    width: 14px;
    height: 14px;
  }
}

/* Filter Sidebar */
.product-list__sidebar .filter-box {
  padding: 20px 16px;
}

.filter-box__title {
  margin-bottom: 14px;
}

.filter-box__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-box__item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.filter-box__checkbox {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--color-primary-blue);
  cursor: pointer;
  border-radius: 3px;
}

.filter-box__label {
  font-size: var(--font-size-button);
  line-height: 1.4;
  color: var(--color-primary-blue);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Filter Toggle */
.product-list__layout {
  transition: gap 0.35s ease;
}

.product-list__layout.is-filter-hidden {
  gap: 0;
}

.product-list__sidebar {
  max-height: 2000px;
  overflow: hidden;
  opacity: 1;
  transition:
    max-height 0.35s ease,
    opacity 0.3s ease;
}

.product-list__layout.is-filter-hidden .product-list__sidebar {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .product-list__sidebar {
    max-height: none;
    transition:
      width 0.35s ease,
      opacity 0.3s ease;
  }

  .product-list__layout.is-filter-hidden .product-list__sidebar {
    width: 0;
    min-width: 0;
    max-height: none;
  }

  .product-list__layout.is-filter-hidden .product-list__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .product-list {
    padding: 0 40px 60px;
  }

  .product-list__header {
    padding-top: 72px;
  }

  .product-list__sidebar {
    width: 240px;
  }

  .product-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-list__layout.is-filter-hidden .product-list__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Product Single */
.product-single {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .product-single {
    flex-direction: row;
    align-items: stretch;
    gap: 44px;
  }
}

/* Gallery column */
.product-single__gallery {
  width: 100%;
}

@media (min-width: 1024px) {
  .product-single__gallery {
    width: 50%;
    flex: 0 0 50%;
  }
}

/* Gallery frame */
.product-single__gallery-frame {
  --frame-padding: 0;
  aspect-ratio: 698 / 627;
  width: 100%;
  height: auto;
}

/* Slider */
.product-single__slider {
  position: absolute;
  inset: 0;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.product-single__slider--dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.product-single__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.product-single__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .product-single__slide {
    padding-top: 80px;
  }
}

.product-single__slide--active {
  opacity: 1;
  pointer-events: auto;
}

.product-single__slide img {
  width: 75%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
}

/* Arrow navigation */
.product-single__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
}

.product-single__arrow:hover,
.product-single__arrow:focus,
.product-single__arrow:active {
  outline: none;
  background: rgba(255, 255, 255, 0.88);
}

.product-single__arrow--prev {
  left: 16px;
}

.product-single__arrow--next {
  right: 16px;
}

.product-single__arrow img {
  width: 12px;
  height: 12px;
  display: block;
}

/* Pagination dots */
.product-single__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

.product-single__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-system-grey);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.product-single__dot--active {
  background: var(--color-primary-linear);
}

.product-single__dot:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 3px;
}

/* Zoom button */
.product-single__zoom {
  position: absolute;
  bottom: 14px;
  right: 16px;
  z-index: 10;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-primary-blue);
  padding: 0;
}

.product-single__zoom:hover,
.product-single__zoom:focus,
.product-single__zoom:focus-visible {
  outline: none;
  background: none;
  border: none;
}

.product-single__zoom img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Content column */
.product-single__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 0 10px;
}

@media (min-width: 768px) {
  .product-single__content {
    padding: 0 40px 40px 40px;
  }
}

@media (min-width: 1024px) {
  .product-single__content {
    gap: 60px;
    padding: 41px 44px 20px 0;
    justify-content: space-between;
  }
}

/* Top section */
.product-single__brand {
  opacity: 0.6;
}

.product-single__name {
  padding: 10px 0 16px;
}

@media (min-width: 768px) {
  .product-single__name {
    padding: 12px 0 20px;
  }
}

.product-single__description {
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .product-single__description {
    margin-bottom: 32px;
  }
}

.product-single__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.product-single__cta-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-single__cta-btn--secondary {
  padding: 16px 30px;
  border-radius: 10px;
  border: 1px solid var(--color-primary-blue);
  color: var(--color-primary-blue);
  font-size: var(--font-size-body);
  line-height: 1.2;
  transition: background 0.2s ease;
}

.product-single__cta-btn--secondary:hover {
  background: rgba(var(--color-primary-blue-rgb), 0.06);
}

/* Bottom section: specifications */
.product-single__specs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .product-single__specs {
    gap: 2.5px;
  }
}

.product-single__spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .product-single__spec-row {
    justify-content: flex-start;
    gap: 37px;
  }
}

.product-single__spec-label {
  width: 160px;
  flex: 0 0 160px;
  color: var(--color-primary-blue);
}

@media (min-width: 768px) {
  .product-single__spec-label {
    width: 165px;
  }
}

.product-single__spec-value {
  margin: 0;
  color: var(--color-primary-blue);
}

/* Gallery preview modal */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-modal[hidden] {
  display: none;
}

.gallery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.gallery-modal__frame-wrapper {
  position: relative;
  z-index: 1;
  width: min(85vw, 760px);
}

.gallery-modal__frame {
  --frame-padding: 0;
  aspect-ratio: 698 / 627;
  width: 100%;
  height: auto;
}

.gallery-modal__slider {
  position: absolute;
  inset: 0;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gallery-modal__slider--dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.gallery-modal__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-modal__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery-modal__slide--active {
  opacity: 1;
  pointer-events: auto;
}

.gallery-modal__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
}

.gallery-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
}

.gallery-modal__arrow:hover,
.gallery-modal__arrow:focus,
.gallery-modal__arrow:active {
  outline: none;
  background: rgba(255, 255, 255, 0.88);
}

.gallery-modal__arrow--prev {
  left: 16px;
}

.gallery-modal__arrow--next {
  right: 16px;
}

.gallery-modal__arrow img {
  width: 12px;
  height: 12px;
  display: block;
}

.gallery-modal__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

.gallery-modal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-system-grey);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.gallery-modal__dot--active {
  background: var(--color-primary-linear);
}

.gallery-modal__dot:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 3px;
}

.gallery-modal__close {
  z-index: 10;
}

/* Product Single Navbar */
.product-single__navbar {
  background: var(--color-primary-white);
  padding: 20px 0 10px;
}

@media (min-width: 768px) {
  .product-single__navbar {
    padding: 0 44px;
  }
}

.product-single__navbar-links {
  display: none;
}

@media (min-width: 768px) {
  .product-single__navbar-links {
    display: flex;
    justify-content: center;
    gap: 44px;
  }
}

.product-single__navbar-link {
  text-decoration: none;
  color: var(--color-primary-blue);
  padding: 18px 0;
  display: block;
}

.product-single__navbar-select {
  position: relative;
  display: block;
  width: 100%;
}

/* ── Choices.js enhanced select (mobile) ── */
.product-single__navbar .choices {
  margin: 0;
  overflow: visible;
  font-size: var(--font-size-body);
}

/* Toggle button */
/* [data-type] selector raises specificity to beat Choices' own
   `.choices[data-type*=select-one] .choices__inner { padding-bottom: 7.5px }` */
.product-single__navbar .choices[data-type*='select-one'] .choices__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary-white);
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary-blue);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* Hide Choices' default caret + injected search input */
.product-single__navbar .choices[data-type*='select-one']::after {
  display: none;
}

.product-single__navbar .choices__input {
  display: none;
}

/* Selected label + our own chevron, centred together */
.product-single__navbar .choices__list--single {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  width: auto;
}

.product-single__navbar .choices__list--single .choices__item {
  padding: 0;
}

.product-single__navbar .choices__list--single::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23093341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / contain no-repeat;
  transition: transform 0.25s ease;
}

/* Open state — gradient toggle + rotated white chevron */
.product-single__navbar .choices.is-open .choices__inner {
  background: var(--color-secondary-blue-gradient);
  color: var(--color-primary-white);
}

.product-single__navbar .choices.is-open .choices__list--single::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f3f3ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  transform: rotate(180deg);
}

/* Dropdown menu — shared look across all Choices.js instances
   (product nav select, quotation modal select, .field--select) */
.product-single__navbar .choices__list--dropdown,
.quotation-modal__body .choices__list--dropdown,
.field--select .choices__list--dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  border: none;
  background: var(--color-primary-white);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(var(--color-primary-blue-rgb), 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}

.product-single__navbar .choices__list--dropdown.is-active,
.quotation-modal__body .choices__list--dropdown.is-active,
.field--select .choices__list--dropdown.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear;
}

.product-single__navbar .choices__list--dropdown .choices__list,
.quotation-modal__body .choices__list--dropdown .choices__list,
.field--select .choices__list--dropdown .choices__list {
  max-height: 200px;
}

.product-single__navbar .choices__list--dropdown .choices__item,
.quotation-modal__body .choices__list--dropdown .choices__item,
.field--select .choices__list--dropdown .choices__item {
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-primary-blue);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.product-single__navbar .choices__list--dropdown .choices__item--choice.is-highlighted,
.product-single__navbar .choices__list--dropdown .choices__item--choice:hover,
.quotation-modal__body .choices__list--dropdown .choices__item--choice.is-highlighted,
.quotation-modal__body .choices__list--dropdown .choices__item--choice:hover,
.field--select .choices__list--dropdown .choices__item--choice.is-highlighted,
.field--select .choices__list--dropdown .choices__item--choice:hover {
  background: rgba(var(--color-primary-blue-rgb), 0.06) !important;

}

/* Selected item shares the same look as every other item — no highlight bg */
.product-single__navbar .choices__list--dropdown .choices__item[aria-selected='true'],
.quotation-modal__body .choices__list--dropdown .choices__item[aria-selected='true'],
.field--select .choices__list--dropdown .choices__item[aria-selected='true'] {
  background: transparent;
  color: var(--color-primary-blue);
}

@media (min-width: 768px) {
  .product-single__navbar-select {
    display: none;
  }
}

@media (max-width: 767px) {
  .product-single__navbar {
    margin: 10px;
    padding: 0;
    border-radius: 10px;
  }
}

/* Key Features */
.key-features {
  color: var(--color-primary-white);
  background: var(--color-secondary-blue-gradient);
  padding: 60px 10px;
  margin: 10px;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .key-features {
    padding: 80px 30px;
  }
}

.key-features__description {
  padding: 16px 0 40px;
}

@media (min-width: 768px) {
  .key-features__description {
    padding: 20px 0 40px;
    max-width: 740px;
  }
}

.key-features__list {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

@media (min-width: 1024px) {
  .key-features__list {
    flex-direction: row;
    gap: 24px;
  }
}

.key-features__item {
  display: flex;
  flex-direction: column;
}

.key-features__item-frame {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .key-features__item-frame {
    margin-bottom: 24px;
  }
}

.key-features__item-name {
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .key-features__item-name {
    margin-bottom: 13px;
  }
}

/* Specification & Dimension */
.specification-and-dimension {
  padding: 40px 10px;
}

@media (min-width: 768px) {
  .specification-and-dimension {
    padding: 46px 57px;
  }
}

.specification-and-dimension__tabs {
  display: flex;
  gap: 4px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-99%);
}

.specification-and-dimension__tab {
  display: flex;
  align-items: center;
  min-width: 164px;
  padding: 15px 30px 15px 15px;
  background: var(--color-primary-white);
  border: none;
  font-family: inherit;
  color: var(--color-primary-blue);
  background: linear-gradient(0deg, rgba(169, 169, 169, 0.2) 0%, rgba(169, 169, 169, 0.2) 100%), #f3f3ef;
  cursor: pointer;
  transition: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .specification-and-dimension__tab {
    min-width: 208px;
  }
}

.specification-and-dimension__tab--active {
  background: var(--color-primary-white);
  color: var(--color-primary-blue);
  opacity: 1;
}

.specification-and-dimension__tab:hover:not(.specification-and-dimension__tab--active) {
  opacity: 0.8;
}

.specification-and-dimension__tab:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 2px;
}

.specification-and-dimension__panel[hidden] {
  display: none;
}

.specification-and-dimension__content {
  position: relative;
  background: var(--color-primary-white);
  margin-top: 55px;
  box-shadow:
    0 31px 9px 0 rgba(0, 0, 0, 0),
    0 20px 8px 0 rgba(0, 0, 0, 0.01),
    0 11px 7px 0 rgba(0, 0, 0, 0.03),
    0 5px 5px 0 rgba(0, 0, 0, 0.04),
    0 1px 3px 0 rgba(0, 0, 0, 0.05);
  border-radius: 0 0 10px 10px;
}

.specification-and-dimension__items {
  padding: 30px 15px 44px;
  background: var(--color-primary-white);
}

@media (min-width: 1024px) {
  .specification-and-dimension__items {
    padding: 64px 40px;
  }
}

.specification-and-dimension__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-system-grey-dark);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 4px;
}

@media (min-width: 1024px) {
  .specification-and-dimension__item {
    flex-direction: row;
    gap: 60px;
  }
}

@media (min-width: 768px) {
  .specification-and-dimension__item-description {
    max-width: 775px;
  }
}

@media (min-width: 768px) {
  .specification-and-dimension__item-title {
    width: 270px;
  }
}

.specification-and-dimension__tables {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 30px 15px;
}

@media (min-width: 768px) {
  .specification-and-dimension__tables {
    padding: 34px 40px 40px;
  }
}

.specification-and-dimension__table-title {
  margin-bottom: 14px;
}

.specification-and-dimension__table {
  width: 100%;
  border-collapse: collapse;
}

.specification-and-dimension__table th,
.specification-and-dimension__table td {
  padding: 16px 10px;
  text-align: center;
  border: 1px solid var(--color-system-grey-dark);
}

@media (min-width: 768px) {

  .specification-and-dimension__table th,
  .specification-and-dimension__table td {
    text-align: left;
  }
}

.specification-and-dimension__table thead th {
  font-weight: 600;
  background: var(--color-system-grey);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .specification-and-dimension {
    padding: 46px 40px;
  }

  .specification-and-dimension__item-title {
    width: 200px;
  }
}

/* Who We Are */
.who-we-are {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(280.58% 134.4% at 50% 125.14%,
      #093341 0%,
      #637799 27.43%,
      #fff 60.63%);
}

@media (min-width: 768px) {
  .who-we-are {
    background: radial-gradient(120.66% 134.4% at 50% 125.14%,
        #093341 0%,
        #637799 27.43%,
        #fff 60.63%);
  }
}

.who-we-are__centent,
.news-insights__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
}

@media (min-width: 768px) {

  .who-we-are__centent,
  .news-insights__intro {
    max-width: 840px;
    margin: 0 auto;
  }
}

.who-we-are__centent {
  padding-top: 90px;
}

@media (min-width: 768px) {
  .who-we-are__centent {
    padding-top: 130px;
  }
}

.news-insights__intro {
  padding: 110px 10px 56px;
}

@media (min-width: 768px) {
  .news-insights__intro {
    padding: 28px 10px 67px;
  }
}

.section-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .section-intro {
    gap: 24px;
  }
}

.section-intro__title {
  width: 100%;
  max-width: 350px;
}

@media (min-width: 768px) {
  .section-intro__title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: unset;
  }
}

.section-intro__description {
  padding: 0 10px;
  margin-bottom: 56px;
}

@media (min-width: 768px) {
  .section-intro__description {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {

  .section-intro__title,
  .section-intro__description,
  .section-intro__subtitle {
    max-width: 720px;
  }
}

@media (min-width: 1024px) {

  .section-intro__title,
  .intro__description,
  .section-intro__subtitle {
    max-width: 850px;
  }
}

.section-intro--center {
  align-items: center;
  text-align: center;
}

.section-intro--left {
  align-items: flex-start;
  text-align: left;
}

.section-intro__subtitle {
  font-size: var(--font-size-h6);
}

.section-intro__button {
  background: var(--color-primary-white);
  color: var(--color-primary-blue);
  padding: 16px 30px;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.section-intro__button:hover {
  opacity: 0.85;
}

/* Corner Cut */
.corner-cut {
  overflow: hidden;
  border-radius: 10px;
  --corner-cut-size: 24px;
}

@media (min-width: 768px) {
  .corner-cut {
    --corner-cut-size: 32px;
  }
}

.corner-cut--top-right {
  -webkit-clip-path: polygon(0 0,
      calc(100% - var(--corner-cut-size)) 0,
      100% var(--corner-cut-size),
      100% 100%,
      0 100%);
  clip-path: polygon(0 0,
      calc(100% - var(--corner-cut-size)) 0,
      100% var(--corner-cut-size),
      100% 100%,
      0 100%);
}

.corner-cut--top-left-bottom-right {
  -webkit-clip-path: polygon(var(--corner-cut-size) 0,
      100% 0,
      100% calc(100% - var(--corner-cut-size)),
      calc(100% - var(--corner-cut-size)) 100%,
      0 100%,
      0 var(--corner-cut-size));
  clip-path: polygon(var(--corner-cut-size) 0,
      100% 0,
      100% calc(100% - var(--corner-cut-size)),
      calc(100% - var(--corner-cut-size)) 100%,
      0 100%,
      0 var(--corner-cut-size));
}

.corner-cut--top-right-bottom-left {
  -webkit-clip-path: polygon(0 0,
      calc(100% - var(--corner-cut-size)) 0,
      100% var(--corner-cut-size),
      100% 100%,
      var(--corner-cut-size) 100%,
      0 calc(100% - var(--corner-cut-size)));
  clip-path: polygon(0 0,
      calc(100% - var(--corner-cut-size)) 0,
      100% var(--corner-cut-size),
      100% 100%,
      var(--corner-cut-size) 100%,
      0 calc(100% - var(--corner-cut-size)));
}

/* Cut Card */
.cut-card-group {
  position: relative;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 127px;
  padding: 10px;
  overflow: clip;
  transform: translate3d(0, clamp(-24px, calc(var(--parallax-y, 0px) * 0.05), 24px), 0);
  will-change: transform;
}

@media (min-width: 768px) {
  .cut-card-group {
    position: absolute;
    flex-direction: row;
    justify-content: center;
    overflow: unset;
  }

  .cut-card:nth-child(1) {
    transform: translate(-45px, 85px);
  }

  .cut-card:nth-child(2) {
    transform: translate(220px, 20px);
    z-index: 20;
  }

  .cut-card:nth-child(3) {
    transform: translate(140px, 300px);
  }
}

.cut-card {
  position: relative;
  width: 272px;
}

.cut-card--align-center {
  align-self: center;
}

.cut-card--align-end {
  align-self: flex-end;
}

@media (min-width: 768px) {
  .cut-card {
    width: 290px;
    z-index: 10;
  }
}

.cut-card__inner {
  background: var(--color-primary-white);
  padding: 22px 19px;
}

.cut-card--media .cut-card__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cut-card__circle {
  width: 10px;
  height: 10px;
  margin-bottom: 16px;
  border-radius: 100%;
  background: var(--color-primary-linear);
}

.cut-card__title {
  padding: 6px 0;
}

.cut-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.cut-card__deco {
  position: absolute;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .cut-card__deco {
    width: 260px;
  }
}

.cut-card__deco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.cut-card__deco--1 {
  bottom: 10px;
  right: calc(403px - 100vw);
  transform: translate(68%, 90%) translate3d(0, clamp(-16px, calc(var(--parallax-y, 0px) * 0.035), 16px), 0);
  will-change: transform;
}

.cut-card__deco--2 {
  top: 10px;
  left: calc(350px - 100vw);
  transform: translate(-35%, -87%) translate3d(0, clamp(-16px, calc(var(--parallax-y, 0px) * 0.035), 16px), 0);
  will-change: transform;
}

@media (min-width: 768px) {
  .cut-card__deco--1 {
    bottom: 0;
    right: 0;
  }

  .cut-card__deco--2 {
    top: 0;
    left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cut-card-group {
    position: relative;
    flex-direction: column;
    justify-content: normal;
    overflow: clip;
    padding: 40px 50px 0;
  }

  .cut-card:nth-child(1),
  .cut-card:nth-child(2),
  .cut-card:nth-child(3) {
    transform: none;
    z-index: auto;
  }
}

/* Robot Arm */
.robot-arm__image {
  width: 100%;
  z-index: 10;
  overflow: clip;
}

@media (min-width: 768px) {
  .robot-arm__image {
    width: 900px;
    padding-top: 60px;
  }
}

.robot-arm__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: translate3d(0, clamp(-12px, calc(var(--parallax-y, 0px) * 0.025), 12px), 0);
  will-change: transform;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .robot-arm__image {
    width: 100%;
  }
}

/* News & Insights: Toolbar (filters + search) */
.news-insights__toolbar {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  align-items: stretch;
  padding: 0 10px 40px;
}

@media (min-width: 768px) {
  .news-insights__toolbar {
    padding: 60px 40px;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .news-insights__toolbar {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    padding: 60px 10px;
  }
}

/* Filter Chips */
.news-insights__filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .news-insights__filters {
    justify-content: flex-start;
  }
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--color-primary-white);
  color: var(--color-primary-blue);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.filter-chip:hover {
  border-color: rgba(var(--color-primary-blue-rgb), 0.3);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 2px;
}

.filter-chip--active,
.filter-chip--active:hover {
  background-color: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: var(--color-primary-white);
}

.filter-chip__label {
  white-space: nowrap;
}

.filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 20px;
  margin-left: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition:
    width 0.25s ease,
    margin-left 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.filter-chip--active .filter-chip__remove {
  width: 16px;
  margin-left: 8px;
  opacity: 0.7;
  transform: scale(1);
  pointer-events: auto;
}

.filter-chip--active .filter-chip__remove:hover,
.filter-chip--active .filter-chip__remove:focus-visible {
  opacity: 1;
}

.filter-chip__remove img {
  width: 100%;
  height: 100%;
}

/* Search Field */
.news-insights__search {
  width: 100%;
}

@media (min-width: 768px) {
  .news-insights__search {
    width: 410px;
    flex: none;
  }
}

.search-wrap {
  position: relative;
  width: 100%;
}

.search-wrap__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 18px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="548" height="20" viewBox="0 0 548 20" fill="none"><path d="M521.887 19.9934C523.611 20.0828 527.983 19.3021 532.006 15.5449C535.978 11.8362 544.771 3.609 548 0.340427L547.64 8.96347e-07C544.421 3.25943 535.637 11.4773 531.661 15.1901C527.738 18.8539 523.501 19.5861 521.913 19.5038L521.9 19.5028H0V19.9934H521.887Z" fill="%23093341"/></svg>');
  background-size: 548px 20px;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.search-wrap__inner img {
  flex: none;
  width: 20px;
  height: 20px;
}

.search-wrap__input,
.field__control,
.field .choices__inner,
textarea,
select {
  width: 100%;
  border: none;
  outline: none;
  background: none;
  padding: 2px 0 20px;
  font-family: inherit;
  color: var(--color-primary-blue);
}

/* Search field reuses .field but draws its own full-width underline */
.news-insights__search .search-wrap__inner.field::before {
  content: none;
}

#news-insights-search {
  padding: 0;
}

#news-insights-search::-webkit-search-cancel-button,
#news-insights-search::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

#news-insights-search::-ms-clear {
  display: none;
}

.news-insights__search .search-wrap__inner .field__control {
  height: auto;
  background-image: none;
}

.search-wrap__input::-webkit-input-placeholder {
  color: var(--color-primary-blue);
}

.search-wrap__input::-moz-placeholder {
  color: var(--color-primary-blue);
}

.search-wrap__input:-ms-input-placeholder {
  color: var(--color-primary-blue);
}

.search-wrap__input::-ms-input-placeholder {
  color: var(--color-primary-blue);
}

.search-wrap__input::placeholder {
  color: var(--color-primary-blue);
}

.field__control::-webkit-input-placeholder {
  color: var(--color-primary-blue);
  opacity: 0.5;
}

.field__control::-moz-placeholder {
  color: var(--color-primary-blue);
  opacity: 0.5;
}

.field__control:-ms-input-placeholder {
  color: var(--color-primary-blue);
  opacity: 0.5;
}

.field__control::-ms-input-placeholder {
  color: var(--color-primary-blue);
  opacity: 0.5;
}

.field__control::placeholder {
  color: var(--color-primary-blue);
  opacity: 0.5;
}

/* Field Line */
.field-line__bar,
.field-line__tail {
  display: block;
  height: 100%;
}

.field-line__bar {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.field-line__tail {
  flex: 0 0 auto;
  aspect-ratio: var(--field-line-tail-ratio);
}

.field-line path {
  fill: none;
  stroke: var(--field-line-color);
  stroke-width: var(--field-line-thickness);
  vector-effect: non-scaling-stroke;
  transition:
    stroke 0.2s ease,
    stroke-width 0.2s ease;
}

/* In-flow divider variant */
.field-line--divider {
  --field-line-color: #12384a;
  --field-line-thickness: 1.5px;

  display: none;
  margin-top: 0;
  transform: scaleY(-1);
}

.field-line--divider path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .field-line--divider {
    display: flex;
  }
}

/* Businesses (What We Do) */
.businesses-purpose {
  background: var(--color-secondary-blue-gradient);
  padding: 100px 10px;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .businesses-purpose {
    padding: 141px 80px;
  }
}

.businesses__box {
  width: 100%;
  position: relative;
  background: var(--color-primary-white);
  padding: calc(30px + 55px) calc(16px + 37px) 30px 16px;
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .businesses__box {
    padding: calc(50px + 63px) calc(50px + 86px) 50px 50px;
  }
}

.businesses__h-line-wrap {
  position: absolute;
  top: 55px;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
}

.businesses__h-line--1-wrap {
  position: relative;
  width: 88%;
}

@media (min-width: 1024px) {
  .businesses__h-line--1-wrap {
    width: 92%;
  }
}

.businesses__h-line--1 img {
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  position: absolute;
  top: 0;
  right: 0;
}

@media (min-width: 1024px) {
  .businesses__h-line--1 img {
    width: 100% !important;
  }
}

.businesses__h-line--2-wrap {
  position: relative;
  width: 12%;
}

@media (min-width: 1024px) {
  .businesses__h-line--2-wrap {
    width: 8%;
  }
}

@media (min-width: 768px) {
  .businesses__h-line-wrap {
    top: 63px;
  }
}

.businesses__h-line img {
  width: 100%;
  height: 13px;
}

.businesses__v-line {
  position: absolute;
  top: -2px;
  right: 0;
  transform: translate(100%, 13px);
  height: 100%;
  z-index: 0;
}

@media (min-width: 768px) {
  .businesses__v-line {
    top: 0;
  }
}

.businesses__v-line img {
  width: 8px;
  height: 100%;
}

@media (min-width: 768px) {
  .businesses__v-line img {
    width: 13px;
  }
}

.businesses__intro {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
  padding-right: 30px;
}

@media (min-width: 768px) {
  .businesses__intro {
    flex-direction: row;
    padding-bottom: 60px;
  }
}

.businesses__intro-label,
.businesses__intro-body {
  flex: 1;
}

.businesses__title {
  padding: 12px 0;
}

@media (min-width: 768px) {
  .businesses__title {
    padding: 14px 0;
  }
}

/* Businesses Gallery (Swiper) */
.businesses__gallery {
  margin-left: -16px;
  width: calc(100% + 16px + 53px);
  position: relative;
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .businesses__gallery {
    padding: 0 50px;
  }
}

.businesses__gallery:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

@media (min-width: 768px) {
  .businesses__gallery {
    margin-left: -50px;
    width: calc(100% + 50px + 136px);
  }
}

.businesses__slide {
  width: 276px;
  height: 276px;
  flex-shrink: 0;
}

.business-card {
  display: block;
  position: relative;
  width: 276px;
  height: 276px;
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.business-card img,
.business-card video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.business-card__content {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 20px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.business-card__title {
  color: var(--color-primary-white);
}

.business-card__description {
  color: var(--color-primary-white);
  padding-top: 6px;
  overflow: hidden;
  min-height: 0;
}

@media (min-width: 768px) {
  .business-card__content {
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.4s ease;
    transition: grid-template-rows 0.4s ease, -ms-grid-rows 0.4s ease;
  }

  .business-card__description {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .business-card:hover .business-card__content {
    grid-template-rows: auto 1fr;
  }

  .business-card:hover .business-card__description {
    opacity: 1;
    transition: opacity 0.3s ease 0.1s;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .businesses-purpose {
    padding: 141px 40px;
  }
}

/* Purpose */
.purpose-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: url('../images/about-img-3.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

.purpose-box__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 60px 0 60px 16px;
}

@media (min-width: 768px) {
  .purpose-box__top {
    flex-direction: row;
    gap: 45px;
    padding: 64px 0 64px 50px;
  }
}

.purpose-box__intro {
  color: var(--color-primary-white);
}

.purpose-box__title {
  padding: 8px 0 12px;
}

@media (min-width: 768px) {
  .purpose-box__title {
    padding: 12px 0 20px;
  }
}

@media (min-width: 768px) {
  .purpose-box__description {
    width: 432px;
  }
}

/* Purpose Cards Slider */
.purpose-box__slider {
  width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .purpose-box__slider {
    flex: 1;
    min-width: 0;
  }
}

.purpose-box__card {
  background: var(--color-primary-white);
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.purpose-box__card .cut-card__circle {
  margin-bottom: 30px;
}

.purpose-box__card-title {
  margin-bottom: 8px;
}

/* Logo Marquee */
.purpose-box__logos {
  width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .purpose-box__logos {
    padding: 10px;
  }
}

.purpose-box__logos-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: purpose-box-logos-scroll 30s linear infinite;
  animation: purpose-box-logos-scroll 30s linear infinite;
}

@media (min-width: 768px) {
  .purpose-box__logos-track {
    gap: 60px;
  }
}

.purpose-box__logo {
  flex-shrink: 0;
}

@-webkit-keyframes purpose-box-logos-scroll {
  to {
    transform: translateX(-50%);
  }
}

@keyframes purpose-box-logos-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .purpose-box__top {
    flex-direction: column;
    gap: 40px;
    padding: 60px 0 60px 16px;
  }

  .purpose-box__title {
    padding: 8px 0 12px;
  }

  .purpose-box__description {
    width: auto;
  }

  .purpose-box__slider {
    flex: 0 1 auto;
    min-width: auto;
  }

  .purpose-box__logos {
    padding: 0;
  }

  .purpose-box__logos-track {
    gap: 20px;
  }
}

/* Key Differences */
.key-differences__intro {
  color: var(--color-primary-white);
  padding: 140px 0 100px;
  max-width: 900px;
  margin: 0 auto;
}

/* Purpose Tabs */
.purpose-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .purpose-tabs {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .purpose-tabs {
    gap: 45px;
  }
}

.purpose-tabs__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .purpose-tabs__list {
    width: 410px;
  }
}

.purpose-tabs__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px 30px;
  border: 1px solid rgba(243, 243, 239, 0.3);
  border-radius: 10px;
  background: none;
  color: var(--color-primary-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    padding 0.25s ease;
}

.purpose-tabs__label {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .purpose-tabs__item {
    padding: 20px;
  }
}

.purpose-tabs__item:hover {
  border-color: rgba(243, 243, 239, 0.6);
}

.purpose-tabs__item:focus-visible {
  outline: 2px solid var(--color-primary-white);
  outline-offset: 2px;
}

.purpose-tabs__item--active {
  color: var(--color-primary-blue);
  background: linear-gradient(90deg, #f3f3ef 0%, #bcbec0 100%);
  border-color: transparent;
}

.purpose-tabs__indicator {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  border-radius: 100%;
  background: var(--color-primary-linear);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.purpose-tabs__item--active .purpose-tabs__indicator {
  opacity: 1;
  transform: scale(1);
}

.purpose-tabs__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 16px;
  color: var(--color-primary-white);
  -webkit-animation: purpose-tabs-fade-in 0.3s ease;
  animation: purpose-tabs-fade-in 0.3s ease;
}

@media (min-width: 768px) {
  .purpose-tabs__panel {
    flex-direction: row;
    gap: 40px;
    padding: 0;
  }
}

@-webkit-keyframes purpose-tabs-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes purpose-tabs-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.purpose-tabs__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .purpose-tabs__image {
    width: 374px;
    height: 500px;
    align-self: center;
  }
}

.purpose-tabs__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 768px) {
  .purpose-tabs__content {
    max-width: 382px;
  }
}

.purpose-tabs__content-title {
  padding: 12px 0;
}

@media (min-width: 768px) {
  .purpose-tabs__content-title {
    padding: 12px 0 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .purpose-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .purpose-tabs__list {
    width: 100%;
  }

  .purpose-tabs__panel {
    flex-direction: column;
    gap: 20px;
  }

  .purpose-tabs__image {
    width: 100%;
    height: 360px;
    align-self: stretch;
  }

  .purpose-tabs__content {
    max-width: none;
  }
}

/* News & Insights: Groups */
.news-insights__groups {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-insights__group {
  background: var(--color-primary-white);
  padding: 60px 10px;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .news-insights__group {
    padding: 80px;
  }
}

.news-insights__group-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

@media (min-width: 768px) {
  .news-insights__group-header {
    flex-direction: row;
    gap: 40px;
  }
}

.news-insights__group-title,
.news-insights__description {
  flex: 1;
}

.news-insights__group-title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .news-insights__group {
    padding: 60px 40px;
  }
}


.news-insights__heading {
  font-weight: 600;
}

@media (min-width: 768px) {
  .news-insights__heading {
    font-weight: 500;
  }
}


/* Card Grid */
.news-insights__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0 0;
  opacity: 1;
  transition: opacity 0.25s ease;
}

@media (min-width: 768px) {
  .news-insights__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    padding: 60px 0 0;
  }
}

.news-insights__grid--updating {
  opacity: 0;
}

.news-insights__grid-featured {
  width: 100%;
}

.news-insights__grid-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
  align-content: start;
  opacity: 1;
  transition: opacity 220ms ease;
}

.news-insights__grid-secondary--fading {
  opacity: 0;
}

@media (min-width: 768px) {
  .news-insights__grid-featured {
    flex: 1 1 568px;
  }

  .news-insights__grid-secondary {
    flex: 1;
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .news-insights__grid {
    align-items: flex-start;
  }

  .news-insights__grid-featured {
    flex: 0 0 calc((100% - 24px) * 0.4);
  }

  .news-insights__grid-secondary {
    flex: 0 0 calc((100% - 24px) * 0.6);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .news-insights__grid {
    align-items: flex-start;
  }

  .news-insights__grid-featured {
    flex: 0 0 calc((100% - 24px) * 0.4);
  }

  .news-insights__grid-secondary {
    flex: 0 0 calc((100% - 24px) * 0.6);
  }
}

/* Reusable News Card */
.news-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
}

.news-card__frame {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .news-card__frame {
    margin-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  .news-card--featured .news-card__frame {
    width: 100%;
  }
}

.news-card__title {
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
  .news-card--featured .news-card__title {
    font-size: var(--font-size-h6);
  }
}

.news-card:hover .news-card__title {
  opacity: 0.65;
}

.news-card__image {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.news-card__image:hover {
  transform: scale(1.1);
}

.news-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.8;
}

/* Open Positions */
.open-positions {
  padding: 60px 10px;
}

@media (min-width: 768px) {
  .open-positions {
    padding: 140px 80px;
  }
}

.open-positions__intro {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .open-positions__intro {
    margin-bottom: 60px;
  }
}

.open-positions__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 10px;
}

@media (min-width: 768px) {
  .open-positions__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Career Card */
.career-card {
  background: var(--color-primary-white);
  border: 1px solid transparent;
  color: var(--color-primary-blue);
  padding: 18px 16px 42px;
  cursor: pointer;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.3s ease;
}

@media (min-width: 768px) {
  .career-card {
    padding: 30px 30px 42px;
  }
}

.career-card:hover,
.career-card:focus-visible {
  background: var(--color-secondary-blue-gradient);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-primary-white);
}

.career-card:focus-visible {
  outline: 2px solid var(--color-primary-white);
  outline-offset: 2px;
}

.career-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

.career-card__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 100%;
  background: var(--color-primary-linear);
}

.career-card__type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-blue);
  transition: color 0.3s ease;
}

.career-card:hover .career-card__type,
.career-card:focus-visible .career-card__type {
  color: var(--color-primary-white);
}

.career-card__header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 20px 0 12px;
}

@media (min-width: 768px) {
  .career-card__header {
    padding: 17px 0 16px;
  }
}

.career-card__department {
  opacity: 0.5;
}

.career-card__description {
  opacity: 0.8;
}

/* Why Work With Us */
.why-work-with-us {
  border-radius: 10px;
  padding: 100px 10px;
  background: var(--color-secondary-blue-gradient);
  color: var(--color-primary-white);
  margin: 10px;
  z-index: 20;
  position: relative;
}

@media (min-width: 768px) {
  .why-work-with-us {
    padding: 90px 70px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .why-work-with-us {
    padding: 72px 40px;
    margin: 16px;
  }
}

.why-work-with-us__intro {
  max-width: 836px;
  margin: 0 auto 60px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .why-work-with-us__intro {
    margin: 0 auto 48px;
  }
}

/* Benefit Card */
.benefit-card-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .benefit-card-group {
    flex-direction: row;
    max-width: 1440px;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .benefit-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
    margin: 0;
  }
}

.benefit-card {
  position: relative;
  flex: 1;
  background: var(--color-primary-white);
  color: var(--color-primary-blue);
  border-radius: 10px;
  overflow: hidden;
  padding: 30px 16px;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .benefit-card {
    aspect-ratio: 1 / 1;
    padding: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .benefit-card {
    aspect-ratio: auto;
    padding: 30px 16px;
  }
}

.benefit-card__icon {
  width: 34px;
}

.benefit-card__content {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.benefit-card__title {
  padding: 30px 0 12px;
}

@media (min-width: 768px) {
  .benefit-card__title {
    padding: 24px 0 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .benefit-card__title {
    padding: 30px 0 12px;
  }
}

.benefit-card__reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.benefit-card__reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(var(--color-primary-blue-rgb), 0.15) 0%,
      rgba(var(--color-primary-blue-rgb), 0.85) 100%);
}

.benefit-card__reveal img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.benefit-card--has-reveal:hover .benefit-card__reveal,
.benefit-card--has-reveal:focus-visible .benefit-card__reveal {
  opacity: 1;
  transform: scale(1);
}

.benefit-card--has-reveal:hover .benefit-card__content,
.benefit-card--has-reveal:focus-visible .benefit-card__content {
  opacity: 0;
}

.benefit-card--has-reveal:focus-visible {
  outline: 2px solid var(--color-primary-white);
  outline-offset: 2px;
}

/* Life Background */
.wrap {
  position: relative;
  background: linear-gradient(332deg,
      #b4cadb -28.04%,
      #637799 29.32%,
      #093341 92.01%);
}

.bg-white-shadow {
  position: absolute;
  width: 100%;
  height: 227px;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  background: linear-gradient(180deg,
      #fff 55.01%,
      rgba(255, 255, 255, 0) 99.06%);
  z-index: 2;
}

@media (min-width: 768px) {
  .bg-white-shadow {
    height: 460px;
  }
}

.wrap__bg-white {
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: white;
}

@media (min-width: 768px) {
  .wrap__bg-white {
    height: 25%;
  }
}

.wrap__bg-gradient {
  position: absolute;
  inset: 45% 0 0 0;
  background: white;
  /* background: linear-gradient(332deg,
      #b4cadb -28.04%,
      #637799 29.32%,
      #093341 92.01%); */
}

@media (min-width: 768px) {
  .wrap__bg-gradient {
    inset: 25% 0 0 0;
  }
}

/* Life */
.life {
  display: none;
  position: relative;
  padding: 100px 10px;
  color: var(--color-primary-white);
}

@media (min-width: 768px) {
  .life {
    padding: 100px 80px 100px;
  }
}

.life__intro {
  max-width: 836px;
  margin: 0 auto;
}

.life-card-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 120px 0 50px;
}

@media (min-width: 768px) {
  .life-card-group {
    gap: 32px;
    margin: 80px 0 0;
  }
}

.life-card-group__media {
  display: none;
}

.life-card {
  --life-card-width: 327px;
  position: relative;
  width: 100%;
  max-width: 294px;
  min-height: 160px;
}

.life-card__inner {
  --notch: 24px;
  --corner-radius: 12px;
  --fillet: 6px;
  --fillet-trim: calc(var(--fillet) / tan(67.5deg));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  height: 100%;
  min-height: 160px;
  padding: 24px 20px;
  background: var(--color-primary-white);
  color: var(--color-primary-blue);
  transition:
    background 0.3s ease,
    color 0.3s ease;
  -webkit-clip-path: shape(from var(--corner-radius) 0,
      line to calc(100% - var(--notch) - var(--fillet-trim)) 0,
      arc to calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)) calc(var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      line to calc(100% - var(--fillet-trim) * sin(45deg)) calc(var(--notch) - var(--fillet-trim) * sin(45deg)),
      arc to 100% calc(var(--notch) + var(--fillet-trim)) of var(--fillet) cw,
      line to 100% calc(100% - var(--corner-radius)),
      arc to calc(100% - var(--corner-radius)) 100% of var(--corner-radius) cw,
      line to calc(var(--notch) + var(--fillet-trim)) 100%,
      arc to calc(var(--notch) - var(--fillet-trim) * sin(45deg)) calc(100% - var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      line to calc(var(--fillet-trim) * sin(45deg)) calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)),
      arc to 0 calc(100% - var(--notch) - var(--fillet-trim)) of var(--fillet) cw,
      line to 0 var(--corner-radius),
      arc to var(--corner-radius) 0 of var(--corner-radius) cw,
      close);
  clip-path: shape(from var(--corner-radius) 0,
      line to calc(100% - var(--notch) - var(--fillet-trim)) 0,
      arc to calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)) calc(var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      line to calc(100% - var(--fillet-trim) * sin(45deg)) calc(var(--notch) - var(--fillet-trim) * sin(45deg)),
      arc to 100% calc(var(--notch) + var(--fillet-trim)) of var(--fillet) cw,
      line to 100% calc(100% - var(--corner-radius)),
      arc to calc(100% - var(--corner-radius)) 100% of var(--corner-radius) cw,
      line to calc(var(--notch) + var(--fillet-trim)) 100%,
      arc to calc(var(--notch) - var(--fillet-trim) * sin(45deg)) calc(100% - var(--fillet-trim) * sin(45deg)) of var(--fillet) cw,
      line to calc(var(--fillet-trim) * sin(45deg)) calc(100% - var(--notch) + var(--fillet-trim) * sin(45deg)),
      arc to 0 calc(100% - var(--notch) - var(--fillet-trim)) of var(--fillet) cw,
      line to 0 var(--corner-radius),
      arc to var(--corner-radius) 0 of var(--corner-radius) cw,
      close);
}

.life-card:hover .life-card__inner {
  background: var(--color-secondary-blue-gradient);
  color: var(--color-primary-white);
}

.life-card-group:has(.life-card-group__image--1.is-active) .life-card--1 .life-card__inner {
  background: var(--color-secondary-blue-gradient);
  color: var(--color-primary-white);
}

.life-card-group:has(.life-card--2:hover) .life-card--1 .life-card__inner,
.life-card-group:has(.life-card--3:hover) .life-card--1 .life-card__inner,
.life-card-group:has(.life-card--4:hover) .life-card--1 .life-card__inner {
  background: var(--color-primary-white);
  color: var(--color-primary-blue);
}

.life-card__deco {
  position: absolute;
  z-index: 0;
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
  pointer-events: none;
}

.life-card__deco--top-left {
  top: 0;
  left: 0;
  transform: translate(-50%, -75%);
}

.life-card__deco--bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(50%, 75%);
}

@media (min-width: 768px) {
  .life-card__deco {
    width: 152px;
    height: 152px;
  }
}

.life-card--1,
.life-card--3 {
  align-self: flex-end;
}

.life-card--2,
.life-card--4 {
  align-self: flex-start;
}

@media (min-width: 768px) {
  .life-card__inner {
    --notch: 32px;
    --corner-radius: 16px;
  }
}

.life-card__role {
  text-align: right;
  opacity: 0.7;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .life-card-group {
    gap: 24px;
    margin: 120px 0 50px;
  }

  .life-card__inner {
    --notch: 24px;
    --corner-radius: 12px;
  }

  .life-card__deco {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 768px) {
  .life-card-group__media {
    display: block;
    position: relative;
    width: 48%;
    max-width: 417px;
    aspect-ratio: 417 / 557;
    border-radius: 10px;
    overflow: hidden;
  }

  .life-card-group__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transform: scale(1.1);
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .life-card-group__image--1 {
    opacity: 1;
  }

  .life-card-group:has(.life-card--2:hover) .life-card-group__image--1,
  .life-card-group:has(.life-card--3:hover) .life-card-group__image--1,
  .life-card-group:has(.life-card--4:hover) .life-card-group__image--1 {
    opacity: 0;
  }

  .life-card-group:has(.life-card--2:hover) .life-card-group__image--2,
  .life-card-group:has(.life-card--3:hover) .life-card-group__image--3,
  .life-card-group:has(.life-card--4:hover) .life-card-group__image--4 {
    opacity: 1;
  }

  .life-card-group {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 300px auto;
    max-width: 1180px;
  }

  .life-card {
    position: absolute;
    width: var(--life-card-width);
    max-width: var(--life-card-width);
    min-height: 178px;
    flex: none;
    align-self: auto;
  }

  .life-card--1 {
    top: -40%;
    left: 10%;
    transform: translateY(-30%);
  }

  .life-card--2 {
    left: -10%;
    bottom: 14%;
    transform: translateY(45%);
  }

  .life-card--3 {
    right: -10%;
    top: 5%;
    transform: translateY(-45%);
  }

  .life-card--4 {
    right: 8%;
    bottom: -40%;
    transform: translateY(30%);
  }
}

@media (min-width: 1024px) {
  .life-card-group {
    margin: 140px auto;
  }

  .life-card--1 {
    top: 10%;
    left: 10%;
    transform: translateY(-30%);
  }

  .life-card--2 {
    left: -4%;
    bottom: 14%;
    transform: translateY(45%);
  }

  .life-card--3 {
    right: -2%;
    top: 0;
    transform: translateY(-45%);
  }

  .life-card--4 {
    right: 8%;
    bottom: 25%;
    transform: translateY(30%);
  }
}

/* Contact */
.contact {
  display: flex;
  flex-direction: column;
  padding: 60px 10px;
}

@media (min-width: 768px) {
  .contact {
    padding: 40px 80px 80px;
  }
}

@media (min-width: 1024px) {
  .contact {
    flex-direction: row;
    gap: 108px;
  }
}

.contact__subtitle {
  padding: 16px 0;
}

.contact__intro {
  margin-bottom: 60px;
}

@media (min-width: 768px) {
  .contact__intro {
    width: 40%;
    margin-bottom: 0;
  }

  .contact__subtitle {
    padding: 20px 0;
  }
}

/* Contact: Info Cards */
.contact__cards {
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
  list-style: none;
  color: black;
}

@media (min-width: 768px) {
  .contact__cards {
    grid-template-columns: 1fr 1fr;
    gap: 50px 34px;
  }
}

.contact__card {
  position: relative;
  width: 100%;
  padding-top: 26px;
}

.decor-line-backward {
  width: 100%;
  transform: translateY(30%);
}

.contact__card .field {
  transform: scaleY(-1);
}

@media (min-width: 768px) {
  .contact__card {
    width: 320px;
  }
}

@media (min-width: 1450px) {
  .contact__card {
    width: 400px;
  }
}

.contact__card-title {
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .contact__card-title {
    margin-bottom: 25px;
  }
}

.contact__card-detail {
  max-width: 266px;
}

@media (min-width: 768px) {
  .contact__card-detail {
    max-width: 300px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact__intro {
    width: auto;
    margin-bottom: 60px;
  }

  .contact__subtitle {
    padding: 16px 0;
  }

  .contact__card {
    width: 100%;
  }

  .contact__card-title {
    margin-bottom: 16px;
  }

  .contact__card-detail {
    max-width: 266px;
  }
}

/* Contact: Map */
.contact-map {
  padding: 0 10px 60px;
}

@media (min-width: 768px) {
  .contact-map {
    padding: 12px 10px 100px;
  }
}

.contact-map__canvas {
  display: block;
  width: 100%;
  height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-system-grey);
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .contact-map__canvas {
    height: 650px;
  }
}

.contact-map__frame {
  position: relative;
  overflow: hidden;
}

/* Map Marker */
.map-marker {
  position: absolute;
  left: var(--map-marker-left, 50%);
  top: var(--map-marker-top, 50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

@media (max-width: 768px) {
  .map-marker {
    left: var(--map-marker-left-mobile, var(--map-marker-left, 50%));
    top: var(--map-marker-top-mobile, var(--map-marker-top, 50%));
  }
}

.map-marker__pin {
  display: flex;
  -webkit-filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
  transition: transform 0.3s ease;
}

.map-marker__icon {
  width: 60px;
  height: 60px;
}

@media (min-width: 768px) {
  .map-marker__icon {
    width: 72px;
    height: 72px;
  }
}

.map-marker:hover .map-marker__pin,
.map-marker:focus-visible .map-marker__pin,
.map-marker.is-active .map-marker__pin {
  transform: scale(1.1);
}

.map-marker:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 4px;
  border-radius: 50%;
}

.map-marker__popup {
  position: absolute;
  top: -10px;
  left: calc(100% + 14px);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 220px;
  background: var(--color-primary-white);
  color: var(--color-primary-blue);
  border: 1px solid var(--color-system-grey);
  border-radius: 10px;
  padding: 16px;
  box-shadow:
    0 14px 4px 0 rgba(0, 0, 0, 0),
    0 9px 4px 0 rgba(0, 0, 0, 0.01),
    0 5px 3px 0 rgba(0, 0, 0, 0.03),
    0 2px 2px 0 rgba(0, 0, 0, 0.04),
    0 1px 1px 0 rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
  z-index: 3;
}

@media (min-width: 768px) {
  .map-marker__popup {
    max-width: 260px;
    padding: 20px;
  }
}

.map-marker:hover .map-marker__popup,
.map-marker:focus-within .map-marker__popup,
.map-marker.is-active .map-marker__popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.map-marker__popup-title {
  margin-bottom: 8px;
}

.map-marker--flip-x .map-marker__popup {
  left: auto;
  right: calc(100% + 14px);
  transform: translateX(-8px);
}

.map-marker--flip-x:hover .map-marker__popup,
.map-marker--flip-x:focus-within .map-marker__popup,
.map-marker--flip-x.is-active .map-marker__popup {
  transform: translate(50%, 50%);
}

@media (min-width: 768px) {

  .map-marker--flip-x:hover .map-marker__popup,
  .map-marker--flip-x:focus-within .map-marker__popup,
  .map-marker--flip-x.is-active .map-marker__popup {
    transform: translateX(0);
  }
}

.map-marker--flip-y .map-marker__popup {
  top: auto;
  bottom: -10px;
}

/* Contact: Send a Message */
.send {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 60px;
}

@media (min-width: 768px) {
  .send {
    flex-direction: row;
    gap: 12px;
    padding: 0 80px 100px;
  }
}

@media (min-width: 768px) {

  .send__media,
  .send__panel {
    flex: 1;
  }
}

.send__image {
  display: block;
  width: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 768px) {
  .send__image {
    height: 100%;
  }
}

.send__panel {
  border-radius: 10px;
  background: var(--color-primary-white);
  padding: 60px 12px;
}

@media (min-width: 1024px) {
  .send__panel {
    padding: 80px 95px;
  }
}

.send__title {
  margin-bottom: 16px;
}

.career-panel__success-text {
  margin-bottom: 16px;
}

.send__subtitle {
  margin-bottom: 32px;
}

.send__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.send__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 20px;
}

@media (min-width: 600px) {
  .send__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.send__submit {
  align-self: flex-start;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.send__submit:hover,
.send__submit:focus-visible {
  opacity: 0.85;
}

.send__submit:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 3px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  section.send {
    flex-direction: column;
    gap: 10px;
    padding: 0 10px 60px;
  }

  section.send .send__media,
  section.send .send__panel {
    flex: none;
  }

  section.send .send__image {
    height: auto;
  }
}

/* Form Field */

.field {
  position: relative;
}

.field::before,
.field .field__control,
.field .choices__inner {
  height: 38px;
}

.field::before {
  content: "";
  display: block;
  width: calc(100% - 548px);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M20 19.5038V19.9934H0V19.5029L20 19.5038Z" fill="%23093341"/></svg>');
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: right bottom;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.field .field__control,
.field .choices__inner {
  border: 0;
  border-radius: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="548" height="20" viewBox="0 0 548 20" fill="none"><path d="M521.887 19.9934C523.611 20.0828 527.983 19.3021 532.006 15.5449C535.978 11.8362 544.771 3.609 548 0.340427L547.64 8.96347e-07C544.421 3.25943 535.637 11.4773 531.661 15.1901C527.738 18.8539 523.501 19.5861 521.913 19.5038L521.9 19.5028H0V19.9934H521.887Z" fill="%23093341"/></svg>');
  background-size: 548px 20px;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  margin-bottom: 8px;
}

.field:has(.field__control--textarea)::before,
.field .field__control--textarea {
  height: 80px;
}

.field__control--textarea {
  resize: none;
}

.field__control:focus~.field-line path {
  stroke: var(--color-primary-blue);
  stroke-width: 2px;
}

select.field__control {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  cursor: pointer;
}

select.field__control:invalid {
  color: var(--color-primary-blue);
  opacity: 0.5;
}

.field--select::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 30px;
  width: 10px;
  height: 6px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23093341' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Choices.js enhanced select (quotation modal) ──
   Toggle keeps the existing field look; only the open dropdown list
   is restyled to match .product-single__navbar-select. */
.field--select .choices {
  margin: 0;
  font-size: inherit;
}

.field--select .choices[data-type*='select-one'] {
  cursor: pointer;
}

.field--select .choices[data-type*='select-one'] .choices__inner {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 2px 0 20px;
  cursor: pointer;
}

.field--select .choices[data-type*='select-one']::after {
  display: none;
}

.field--select .choices__input {
  display: none;
}

.field--select .choices__list--single {
  display: block;
  padding: 0;
  width: 100%;
}

.field--select .choices__list--single .choices__item {
  padding: 0;
}

.field--select .choices__placeholder {
  color: var(--color-primary-blue);
  opacity: 0.5;
}

/* Dropdown menu itself is styled by the shared rules above
   (.product-single__navbar / .quotation-modal__body / .field--select
   .choices__list--dropdown), keeping all three Choices.js instances identical. */

.field__file {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 38px;
  padding: 2px 0 20px;
  color: var(--color-primary-blue);
  cursor: pointer;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="548" height="20" viewBox="0 0 548 20" fill="none"><path d="M521.887 19.9934C523.611 20.0828 527.983 19.3021 532.006 15.5449C535.978 11.8362 544.771 3.609 548 0.340427L547.64 8.96347e-07C544.421 3.25943 535.637 11.4773 531.661 15.1901C527.738 18.8539 523.501 19.5861 521.913 19.5038L521.9 19.5028H0V19.9934H521.887Z" fill="%23093341"/></svg>');
  background-size: 548px 20px;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.field__file-text {
  opacity: 0.5;
}

.field__file-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.field__file-name {
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field__file-input:focus-visible+.field__file {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 3px;
}

.field__file-input:focus-visible~.field-line path {
  stroke: var(--color-primary-blue);
  stroke-width: 2px;
}

/* Overlay Close Button */
.overlay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  .overlay-close {
    top: 24px;
    right: 24px;
  }
}

.overlay-close:hover,
.overlay-close:focus,
.overlay-close:focus-visible,
.overlay-close:active {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Quotation Modal */
body:has(.quotation-modal--open)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  background: white;
}

.quotation-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: max(0px, var(--quotation-modal-offset, 0px));
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

.quotation-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear;
}

.quotation-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.quotation-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  background: white;
}

.quotation-modal__body {
  min-height: 100%;
  padding: 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .quotation-modal__body {
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* Bottom Sheet */
.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: max(0px, var(--bottom-sheet-offset, 0px));
  z-index: 100;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}

.bottom-sheet--open {
  visibility: visible;
  transition: visibility 0s linear;
}

.bottom-sheet__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.bottom-sheet--open .bottom-sheet__backdrop {
  opacity: 1;
}

.bottom-sheet__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

@media (max-width: 767px) {
  .bottom-sheet__panel {
    top: auto;
    height: 85vh;
    max-height: 85vh;
  }
}

@media (min-width: 768px) {
  .bottom-sheet__panel {
    border-radius: 32px 32px 0 0;
  }
}

.bottom-sheet--open .bottom-sheet__panel {
  transform: translateY(0);
}

.bottom-sheet__dialog {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

/* Career Application Panel */
.career-application-panel .bottom-sheet__dialog {
  padding: 40px 10px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

@media (min-width: 768px) {
  .career-application-panel .bottom-sheet__dialog {
    padding: 75px 80px;
    padding-bottom: max(75px, env(safe-area-inset-bottom));
  }
}

/* Download Modal */
.download-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
}

.download-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.3s ease-out,
    visibility 0s linear;
}

.download-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.download-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 10px;
  background: var(--color-primary-white);
  transform: scale(0.96);
  transition: transform 0.3s ease-out;
}

.download-modal--open .download-modal__dialog {
  transform: scale(1);
}

.download-modal__panel {
  padding: 40px 16px;
}

@media (min-width: 768px) {
  .download-modal__panel {
    padding: 60px;
  }
}

.download-modal__title {
  margin-bottom: 12px;
}

.download-modal__description {
  margin-bottom: 32px;
}

.download-modal__submit {
  width: 100%;
}

@media (min-width: 600px) {
  .download-modal__submit {
    width: auto;
  }
}

/* Career Panel */
.career-panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .career-panel {
    flex-direction: row;
    gap: 80px;
  }

  .career-panel__details,
  .career-panel__form {
    flex: 1;
    min-width: 0;
  }
}

.career-panel__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

.career-panel__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.career-panel__type {
  opacity: 0.65;
}

.career-panel__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  .career-panel__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.career-panel__department {
  opacity: 0.5;
}

.career-panel__section {
  display: flex;
  flex-direction: column;
}

.career-panel__label {
  opacity: 0.5;
  margin-bottom: 14px;
}

.career-panel__overview,
.career-panel__list {
  opacity: 0.8;
}

.career-panel__list {
  padding-left: 18px;
}

.career-panel__form {
  display: flex;
  flex-direction: column;
  background: var(--color-primary-white);
  padding: 40px 12px;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .career-panel__form {
    padding: 50px 43px;
  }
}

.career-panel__success {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.career-panel__success[hidden] {
  display: none;
}

/* Quotation Modal & Career Panel */
@media (min-width: 768px) and (max-width: 1023px) {
  .quotation-modal .send {
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 60px;
  }

  .quotation-modal .send__media,
  .quotation-modal .send__panel {
    flex: none;
  }

  .quotation-modal .send__image {
    height: auto;
  }

  .career-application-panel .bottom-sheet__dialog {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  .career-panel {
    flex-direction: column;
    gap: 40px;
  }

  .career-panel__details,
  .career-panel__form {
    flex: none;
    min-width: 0;
  }

  .career-panel__heading {
    gap: 4px;
  }
}

/* Policies */
.policies__intro {
  max-width: 836px;
  margin: 0 auto;
  padding: 100px 0 40px;
}

.policies__field-line {
  padding: 0 10px;
}

.policies__field-line .field-line {
  --field-line-thickness: 1px;
}

@media (min-width: 768px) {
  .policies__field-line {
    padding: 0 80px;
  }
}

.policies__layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 10px;
}

@media (min-width: 768px) {
  .policies__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 96px;
    padding: 80px;
  }
}

.policies__nav {
  width: 100%;
}

@media (min-width: 768px) {
  .policies__nav {
    width: 323px;
    flex: none;
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
  }
}

.policies__nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.policies__nav-item {
  color: var(--color-primary-blue);
  border-color: rgba(var(--color-primary-blue-rgb), 0.1);
  text-decoration: none;
}

.policies__nav-item:hover {
  border-color: rgba(var(--color-primary-blue-rgb), 0.6);
}

.policies__nav-item:focus-visible {
  outline-color: var(--color-primary-blue);
}

.policies__nav-item.purpose-tabs__item--active {
  background: linear-gradient(90deg,
      #093341 8%,
      #08303d 35%,
      #072934 56%,
      #041c23 75%,
      #010a0c 92%,
      #000 100%);
  color: var(--color-primary-white);
  font-weight: 600;
}

.policies__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 40px;
  min-width: 0;
}

.policies__content .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
}

.policies__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: calc(var(--navbar-offset, 70px) + 12px);
}

@media (min-width: 768px) {
  .policies__section {
    scroll-margin-top: calc(var(--navbar-offset, 70px) + 24px);
  }
}

.policies__section__field-line {
  padding-top: 20px;
}

.policies__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.policies__list {
  list-style: disc;
  padding-left: 20px;
}

/* Breadcrumb */
.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item,
.breadcrumb__sep {
  opacity: 0.5;
}

.breadcrumb__item--current {
  opacity: 1;
}

.breadcrumb--white,
.breadcrumb--white .breadcrumb__link {
  color: var(--color-primary-white);
}

.breadcrumb--blue,
.breadcrumb--blue .breadcrumb__link {
  color: var(--color-primary-blue);
}

.breadcrumb__link {
  text-decoration: none;
}

.breadcrumb__sep {
  padding: 0 6px;
}

.breadcrumb--cover {
  position: absolute;
  top: 16px;
  left: 10px;
  z-index: 10;
}

@media (min-width: 1024px) {
  .breadcrumb--cover {
    top: 35px;
    left: 35px;
  }
}

.breadcrumb--standalone {
  padding-top: 24px;
  padding-left: 10px;
}

@media (min-width: 768px) {
  .breadcrumb--standalone {
    padding-top: 50px;
    padding-left: 45px;
  }
}

/* News Single */
.news-single {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 10px 0;
}

.news-single__breadcrumb--mobile {
  margin-bottom: -12px;
  /* .news-single gap is 32px on mobile; this nets a 20px gap before the image */
}

.news-single__breadcrumb--desktop {
  display: none;
}

@media (min-width: 768px) {
  .news-single__breadcrumb--mobile {
    display: none;
  }

  .news-single__breadcrumb--desktop {
    display: block;
    padding-top: 40px;
  }
}

@media (min-width: 768px) {
  .news-single {
    flex-direction: row;
    align-items: flex-start;
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .news-single {
    gap: 10px;
    /* padding: 50px 80px 80px; */
    padding: 10px;
  }
}

/* Left column */
.news-single__media {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .news-single__media {
    width: 46%;
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--navbar-offset, 70px) + 20px);
  }
}

@media (min-width: 1024px) {
  .news-single_right {
    padding: 0 20px;
  }
}

.news-single__image-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.news-single__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* Right column */
.news-single__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

@media (min-width: 768px) {
  .news-single__content {
    padding-top: 20px;
  }
}

@media (min-width: 1024px) {
  .news-single__content {
    min-height: calc(34.5vw - 69.3px);
    display: flex;
    justify-content: space-between;
  }
}

.news-single__category {
  opacity: 0.55;
  margin-top: 4px;
}

.news-single__title {
  font-size: var(--font-size-h3);
  line-height: 1.25;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .news-single__title {
    font-size: var(--font-size-title);
  }
}

.news-single__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.social-share {
  display: flex;
  gap: 15px;
}

.social-share__icons {
  display: flex;
  gap: 20px;
}

/* Back link */
.news-single__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--color-primary-blue);
  text-decoration: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: opacity 0.2s ease;
}

.news-single__back:hover {
  opacity: 0.65;
}

.news-single__back img {
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

.news-single__nav {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 10px 0;
  padding: 20px 0 60px;
  border-top: 0.5px solid var(--color-primary-blue);
}

@media (min-width: 768px) {
  .news-single__nav {
    padding: 20px 10px 100px;
  }
}

.news-single__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  max-width: 45%;
}

.news-single__nav-item:nth-child(1) {
  flex-direction: column;
  align-items: flex-start;
}

.news-single__nav-item:nth-child(2) {
  flex-direction: column-reverse;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .news-single__nav-item {
    flex-direction: row !important;
  }
}

.news-single__nav-item--empty {
  pointer-events: none;
}

.news-single__nav-item--next {
  margin-left: auto;
}

.news-single__nav-thumb {
  flex-shrink: 0;
  width: 155px;
  height: 115px;
}

.news-single__nav-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  display: block;
}

.news-single__nav-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: space-between;
}

.news-single__nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 155px;
  color: var(--color-primary-blue);
}

@media (min-width: 768px) {
  .news-single__nav-title {
    max-width: 230px;
  }
}

.news-single__nav-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(var(--color-primary-blue-rgb));
}

.news-single__nav-item--next .news-single__nav-info {
  text-align: right;
}

.news-single__nav-item--next .news-single__nav-label {
  justify-content: flex-end;
}

/* gutenberg */
.has-global-padding {
  padding: 0;
}

.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

.entry-content :is(h2, h3) {
  margin: 0;
  font-family: aktiv-grotesk, 'Anuphan', sans-serif;
  color: var(--color-primary-blue);
}

.entry-content :is(h2) {
  font-size: var(--font-size-h4);
  font-weight: 500;
  margin-bottom: 36px;
}

.entry-content :is(h3) {
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  margin-bottom: 24px;
}

.entry-content .wp-block-paragraph {
  margin-bottom: 36px;
  text-wrap: pretty;
}

.entry-content .wp-block-paragraph:has(+ ul),
.entry-content .wp-block-paragraph:has(+ ol),
.entry-content .wp-block-paragraph:has(+ .wp-block-list) {
  margin-bottom: 0;
}

.entry-content .wp-block-paragraph,
.entry-content .wp-block-list {
  font-size: var(--font-size-body);
  font-family: aktiv-grotesk, 'Anuphan', sans-serif;
}

.entry-content .wp-block-list {
  padding-left: 30px;
  margin-top: 0;
}

.entry-content .wp-block-image {
  border-radius: 10px;
  overflow: hidden;
}

.entry-content .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.entry-content .wp-block-columns-is-layout-flex {
  gap: 8px;
  margin: 36px;
}

.entry-content .wp-block-separator {
  border: 0;
  background: none;
  width: 100%;
  height: auto;
  aspect-ratio: 862/35;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="862" height="35" viewBox="0 0 862 35" fill="none"><path d="M0 34.5984L815.5 34.166C818.414 34.3152 825.989 33.0029 832.981 26.5608C839.974 20.1187 855.44 5.84365 861.114 0.177002" stroke="%23093341" stroke-width="0.5"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 100% auto;
}

.entry-content .wp-block-separator:not(:last-child) {
  margin-bottom: 36px;
}

/* Error / 404 */
.header--hidden {
  display: none;
}

.header--hidden~footer {
  display: none;
}

.error-main {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  padding: 0 20px;
}

.error-main__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -1;
}

.error-main [data-section='error'] {
  width: 100%;
}

.page-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .page-not-found {
    flex-direction: row;
    justify-content: space-between;
  }
}

.page-not-found__text {
  mix-blend-mode: difference;
  font-size: 60px;
  line-height: 1.1;
  color: var(--color-primary-white);
}

@media (min-width: 768px) {
  .page-not-found__text {
    font-size: 100px;
  }
}

.page-not-found__detail {
  color: var(--color-primary-white);
  mix-blend-mode: difference;
  padding: 16px 0 38px;
  max-width: 310px;
}

@media (min-width: 768px) {
  .page-not-found__detail {
    position: absolute;
    left: 30px;
    bottom: 40px;
    padding: 0;
    max-width: unset;
  }
}

.btn-go-to-homepage {
  position: relative;
  display: inline-block;
  padding: 16px 30px;
  background: var(--color-primary-white);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  z-index: 1;
}

.btn-go-to-homepage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #F3F3EF 0%,
      #BCBEC0 67.44%,
      #58595B 134.88%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-go-to-homepage:hover::before {
  opacity: 1;
}

/* Footer */
.footer {
  --footer-nav-gap: 24px;
  color: var(--color-primary-white);
  padding: 60px 10px;
  background: linear-gradient(165deg,
      #093341 -2.82%,
      #08303d 21.13%,
      #072934 39.76%,
      #041c23 56.62%,
      #010a0c 71.69%,
      #000 78.79%);
}

@media (min-width: 768px) {
  .footer {
    --footer-nav-gap: 30px;
    padding: 85px 60px;
  }
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'brand'
    'nav'
    'links'
    'legal';
  gap: 80px;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'brand nav'
      'legal links';
    gap: 250px 80px;
  }
}

.footer__brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
}

.footer__logo {
  width: 287px;
  display: block;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .footer__logo {
    width: 433px;
    margin-bottom: 40px;
  }
}

.footer__address {
  max-width: 300px;
  margin-bottom: 20px;
  line-height: 1.6;
  color: var(--color-primary-white);
}

.footer__contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__nav {
  grid-area: nav;
}

.footer__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 768px) {
  .footer__nav-list {
    gap: 12px;
  }
}

.footer__nav-link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(90deg,
      #b4cadb 13.28%,
      #637799 86.28%,
      #093341 166.04%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: brightness(30);
  filter: brightness(30);
  transition: -webkit-filter 0.6s ease-out;
  transition: filter 0.6s ease-out;
  transition: filter 0.6s ease-out, -webkit-filter 0.6s ease-out;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3;
  font-size: var(--font-size-h3);
}

.footer__nav-link:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

@media (min-width: 768px) {
  .footer__nav-link {
    font-size: var(--font-size-display);
  }
}

.footer__legal {
  grid-area: legal;
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-size-xs);
}

.footer__copyright,
.footer__attribution {
  font-size: var(--font-size-sm);
}

.footer__links-dual {
  grid-area: links;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.footer__link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.footer__link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer__link:hover {
  opacity: 1;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer {
    padding: 85px 40px;
  }

  .footer__grid {
    gap: 140px 60px;
  }

  .footer__logo {
    width: 100%;
    max-width: 360px;
  }
}



/* #region Clip Path */
.highlight__card-img.corner-cut,
.overview__image.image-frame,
.news-card__frame.image-frame,
.news-single__nav-thumb,
.key-features__item-frame {
  height: auto;
  aspect-ratio: 4/3;
  -webkit-clip-path: polygon(0.003% 13.539%, 0.003% 13.539%, 0.017% 13.091%, 0.057% 12.649%, 0.124% 12.214%, 0.216% 11.789%, 0.333% 11.375%, 0.475% 10.974%, 0.641% 10.588%, 0.829% 10.22%, 1.041% 9.871%, 1.274% 9.542%, 1.274% 9.542%, 1.658% 9.042%, 2.19% 8.35%, 2.831% 7.514%, 3.546% 6.582%, 4.298% 5.602%, 5.049% 4.621%, 5.764% 3.689%, 6.405% 2.852%, 6.936% 2.159%, 7.319% 1.658%, 7.319% 1.658%, 7.571% 1.353%, 7.839% 1.078%, 8.121% 0.831%, 8.417% 0.616%, 8.724% 0.431%, 9.042% 0.278%, 9.368% 0.157%, 9.701% 0.07%, 10.04% 0.018%, 10.384% 0%, 97.855% 0.058%, 97.855% 0.058%, 98.203% 0.094%, 98.533% 0.2%, 98.841% 0.37%, 99.122% 0.598%, 99.372% 0.877%, 99.586% 1.203%, 99.761% 1.57%, 99.891% 1.971%, 99.972% 2.401%, 100% 2.855%, 100% 87.012%, 99.978% 87.012%, 99.978% 87.012%, 99.939% 87.399%, 99.88% 87.78%, 99.8% 88.153%, 99.702% 88.518%, 99.584% 88.874%, 99.448% 89.218%, 99.294% 89.55%, 99.123% 89.868%, 98.934% 90.171%, 98.729% 90.458%, 98.729% 90.458%, 98.345% 90.958%, 97.813% 91.65%, 97.172% 92.486%, 96.457% 93.418%, 95.705% 94.398%, 94.954% 95.379%, 94.239% 96.311%, 93.598% 97.148%, 93.067% 97.841%, 92.684% 98.342%, 92.684% 98.342%, 92.432% 98.646%, 92.164% 98.922%, 91.882% 99.169%, 91.586% 99.384%, 91.279% 99.569%, 90.961% 99.722%, 90.635% 99.843%, 90.302% 99.93%, 89.963% 99.982%, 89.619% 100%, 2.144% 99.942%, 2.144% 99.942%, 1.797% 99.906%, 1.467% 99.8%, 1.159% 99.63%, 0.878% 99.403%, 0.628% 99.123%, 0.414% 98.797%, 0.239% 98.43%, 0.109% 98.029%, 0.028% 97.599%, 0% 97.145%, 0% 13.539%, 0.003% 13.539%);
  clip-path: polygon(0.003% 13.539%, 0.003% 13.539%, 0.017% 13.091%, 0.057% 12.649%, 0.124% 12.214%, 0.216% 11.789%, 0.333% 11.375%, 0.475% 10.974%, 0.641% 10.588%, 0.829% 10.22%, 1.041% 9.871%, 1.274% 9.542%, 1.274% 9.542%, 1.658% 9.042%, 2.19% 8.35%, 2.831% 7.514%, 3.546% 6.582%, 4.298% 5.602%, 5.049% 4.621%, 5.764% 3.689%, 6.405% 2.852%, 6.936% 2.159%, 7.319% 1.658%, 7.319% 1.658%, 7.571% 1.353%, 7.839% 1.078%, 8.121% 0.831%, 8.417% 0.616%, 8.724% 0.431%, 9.042% 0.278%, 9.368% 0.157%, 9.701% 0.07%, 10.04% 0.018%, 10.384% 0%, 97.855% 0.058%, 97.855% 0.058%, 98.203% 0.094%, 98.533% 0.2%, 98.841% 0.37%, 99.122% 0.598%, 99.372% 0.877%, 99.586% 1.203%, 99.761% 1.57%, 99.891% 1.971%, 99.972% 2.401%, 100% 2.855%, 100% 87.012%, 99.978% 87.012%, 99.978% 87.012%, 99.939% 87.399%, 99.88% 87.78%, 99.8% 88.153%, 99.702% 88.518%, 99.584% 88.874%, 99.448% 89.218%, 99.294% 89.55%, 99.123% 89.868%, 98.934% 90.171%, 98.729% 90.458%, 98.729% 90.458%, 98.345% 90.958%, 97.813% 91.65%, 97.172% 92.486%, 96.457% 93.418%, 95.705% 94.398%, 94.954% 95.379%, 94.239% 96.311%, 93.598% 97.148%, 93.067% 97.841%, 92.684% 98.342%, 92.684% 98.342%, 92.432% 98.646%, 92.164% 98.922%, 91.882% 99.169%, 91.586% 99.384%, 91.279% 99.569%, 90.961% 99.722%, 90.635% 99.843%, 90.302% 99.93%, 89.963% 99.982%, 89.619% 100%, 2.144% 99.942%, 2.144% 99.942%, 1.797% 99.906%, 1.467% 99.8%, 1.159% 99.63%, 0.878% 99.403%, 0.628% 99.123%, 0.414% 98.797%, 0.239% 98.43%, 0.109% 98.029%, 0.028% 97.599%, 0% 97.145%, 0% 13.539%, 0.003% 13.539%);
}

.cut-card__deco--1.corner-cut {
  height: auto;
  aspect-ratio: 1/1;
  -webkit-clip-path: polygon(99.995% 19.768%, 99.995% 19.768%, 99.972% 19.114%, 99.905% 18.469%, 99.795% 17.834%, 99.642% 17.213%, 99.448% 16.608%, 99.213% 16.023%, 98.938% 15.46%, 98.625% 14.922%, 98.275% 14.412%, 97.888% 13.932%, 97.888% 13.932%, 97.251% 13.202%, 96.371% 12.192%, 95.308% 10.971%, 94.122% 9.61%, 92.877% 8.179%, 91.631% 6.747%, 90.446% 5.386%, 89.384% 4.164%, 88.504% 3.152%, 87.869% 2.421%, 87.869% 2.421%, 87.451% 1.976%, 87.007% 1.573%, 86.539% 1.214%, 86.049% 0.899%, 85.54% 0.629%, 85.014% 0.405%, 84.473% 0.23%, 83.921% 0.103%, 83.359% 0.026%, 82.79% 0%, 3.594% 0.004%, 3.594% 0.004%, 3.018% 0.057%, 2.471% 0.212%, 1.961% 0.46%, 1.495% 0.792%, 1.081% 1.2%, 0.726% 1.676%, 0.437% 2.211%, 0.221% 2.797%, 0.086% 3.425%, 0.04% 4.088%, 0% 81.037%, 0.036% 81.037%, 0.036% 81.037%, 0.101% 81.601%, 0.199% 82.157%, 0.331% 82.703%, 0.494% 83.236%, 0.689% 83.754%, 0.914% 84.257%, 1.17% 84.741%, 1.454% 85.206%, 1.767% 85.649%, 2.107% 86.068%, 2.107% 86.068%, 2.744% 86.798%, 3.624% 87.808%, 4.687% 89.029%, 5.872% 90.39%, 7.118% 91.821%, 8.364% 93.253%, 9.549% 94.614%, 10.611% 95.836%, 11.491% 96.848%, 12.126% 97.579%, 12.126% 97.579%, 12.543% 98.024%, 12.987% 98.426%, 13.456% 98.786%, 13.946% 99.101%, 14.455% 99.371%, 14.981% 99.595%, 15.521% 99.77%, 16.074% 99.897%, 16.636% 99.974%, 17.205% 100%, 96.406% 99.997%, 96.406% 99.997%, 96.982% 99.943%, 97.529% 99.788%, 98.039% 99.541%, 98.505% 99.208%, 98.919% 98.8%, 99.274% 98.324%, 99.563% 97.789%, 99.779% 97.203%, 99.913% 96.575%, 99.96% 95.913%, 100% 19.768%, 99.995% 19.768%);
  clip-path: polygon(99.995% 19.768%, 99.995% 19.768%, 99.972% 19.114%, 99.905% 18.469%, 99.795% 17.834%, 99.642% 17.213%, 99.448% 16.608%, 99.213% 16.023%, 98.938% 15.46%, 98.625% 14.922%, 98.275% 14.412%, 97.888% 13.932%, 97.888% 13.932%, 97.251% 13.202%, 96.371% 12.192%, 95.308% 10.971%, 94.122% 9.61%, 92.877% 8.179%, 91.631% 6.747%, 90.446% 5.386%, 89.384% 4.164%, 88.504% 3.152%, 87.869% 2.421%, 87.869% 2.421%, 87.451% 1.976%, 87.007% 1.573%, 86.539% 1.214%, 86.049% 0.899%, 85.54% 0.629%, 85.014% 0.405%, 84.473% 0.23%, 83.921% 0.103%, 83.359% 0.026%, 82.79% 0%, 3.594% 0.004%, 3.594% 0.004%, 3.018% 0.057%, 2.471% 0.212%, 1.961% 0.46%, 1.495% 0.792%, 1.081% 1.2%, 0.726% 1.676%, 0.437% 2.211%, 0.221% 2.797%, 0.086% 3.425%, 0.04% 4.088%, 0% 81.037%, 0.036% 81.037%, 0.036% 81.037%, 0.101% 81.601%, 0.199% 82.157%, 0.331% 82.703%, 0.494% 83.236%, 0.689% 83.754%, 0.914% 84.257%, 1.17% 84.741%, 1.454% 85.206%, 1.767% 85.649%, 2.107% 86.068%, 2.107% 86.068%, 2.744% 86.798%, 3.624% 87.808%, 4.687% 89.029%, 5.872% 90.39%, 7.118% 91.821%, 8.364% 93.253%, 9.549% 94.614%, 10.611% 95.836%, 11.491% 96.848%, 12.126% 97.579%, 12.126% 97.579%, 12.543% 98.024%, 12.987% 98.426%, 13.456% 98.786%, 13.946% 99.101%, 14.455% 99.371%, 14.981% 99.595%, 15.521% 99.77%, 16.074% 99.897%, 16.636% 99.974%, 17.205% 100%, 96.406% 99.997%, 96.406% 99.997%, 96.982% 99.943%, 97.529% 99.788%, 98.039% 99.541%, 98.505% 99.208%, 98.919% 98.8%, 99.274% 98.324%, 99.563% 97.789%, 99.779% 97.203%, 99.913% 96.575%, 99.96% 95.913%, 100% 19.768%, 99.995% 19.768%);
}

.cut-card__deco--2.corner-cut {
  height: auto;
  aspect-ratio: 1/1;
  -webkit-clip-path: polygon(0.005% 19.768%, 0.005% 19.768%, 0.028% 19.114%, 0.095% 18.469%, 0.205% 17.834%, 0.358% 17.213%, 0.552% 16.608%, 0.787% 16.023%, 1.062% 15.46%, 1.375% 14.922%, 1.725% 14.412%, 2.112% 13.932%, 2.112% 13.932%, 2.749% 13.202%, 3.629% 12.192%, 4.692% 10.971%, 5.878% 9.61%, 7.123% 8.179%, 8.369% 6.747%, 9.554% 5.386%, 10.616% 4.164%, 11.496% 3.152%, 12.131% 2.421%, 12.131% 2.421%, 12.549% 1.976%, 12.993% 1.574%, 13.461% 1.214%, 13.951% 0.899%, 14.46% 0.629%, 14.986% 0.405%, 15.527% 0.23%, 16.079% 0.103%, 16.641% 0.026%, 17.21% 0%, 96.406% 0.004%, 96.406% 0.004%, 96.982% 0.057%, 97.529% 0.212%, 98.039% 0.46%, 98.505% 0.792%, 98.919% 1.2%, 99.274% 1.676%, 99.563% 2.211%, 99.779% 2.797%, 99.914% 3.425%, 99.96% 4.088%, 100% 81.037%, 99.964% 81.037%, 99.964% 81.037%, 99.899% 81.601%, 99.8% 82.157%, 99.669% 82.703%, 99.506% 83.235%, 99.311% 83.754%, 99.086% 84.257%, 98.83% 84.741%, 98.546% 85.206%, 98.234% 85.648%, 97.893% 86.068%, 97.893% 86.068%, 97.257% 86.798%, 96.376% 87.808%, 95.313% 89.029%, 94.128% 90.39%, 92.882% 91.821%, 91.636% 93.253%, 90.451% 94.614%, 89.389% 95.836%, 88.51% 96.848%, 87.874% 97.579%, 87.874% 97.579%, 87.457% 98.024%, 87.013% 98.426%, 86.544% 98.786%, 86.054% 99.101%, 85.545% 99.371%, 85.019% 99.594%, 84.479% 99.77%, 83.926% 99.897%, 83.364% 99.974%, 82.795% 100%, 3.594% 99.996%, 3.594% 99.996%, 3.018% 99.943%, 2.471% 99.788%, 1.961% 99.54%, 1.495% 99.208%, 1.081% 98.8%, 0.726% 98.324%, 0.437% 97.789%, 0.221% 97.203%, 0.086% 96.575%, 0.04% 95.913%, 0% 19.768%, 0.005% 19.768%);
  clip-path: polygon(0.005% 19.768%, 0.005% 19.768%, 0.028% 19.114%, 0.095% 18.469%, 0.205% 17.834%, 0.358% 17.213%, 0.552% 16.608%, 0.787% 16.023%, 1.062% 15.46%, 1.375% 14.922%, 1.725% 14.412%, 2.112% 13.932%, 2.112% 13.932%, 2.749% 13.202%, 3.629% 12.192%, 4.692% 10.971%, 5.878% 9.61%, 7.123% 8.179%, 8.369% 6.747%, 9.554% 5.386%, 10.616% 4.164%, 11.496% 3.152%, 12.131% 2.421%, 12.131% 2.421%, 12.549% 1.976%, 12.993% 1.574%, 13.461% 1.214%, 13.951% 0.899%, 14.46% 0.629%, 14.986% 0.405%, 15.527% 0.23%, 16.079% 0.103%, 16.641% 0.026%, 17.21% 0%, 96.406% 0.004%, 96.406% 0.004%, 96.982% 0.057%, 97.529% 0.212%, 98.039% 0.46%, 98.505% 0.792%, 98.919% 1.2%, 99.274% 1.676%, 99.563% 2.211%, 99.779% 2.797%, 99.914% 3.425%, 99.96% 4.088%, 100% 81.037%, 99.964% 81.037%, 99.964% 81.037%, 99.899% 81.601%, 99.8% 82.157%, 99.669% 82.703%, 99.506% 83.235%, 99.311% 83.754%, 99.086% 84.257%, 98.83% 84.741%, 98.546% 85.206%, 98.234% 85.648%, 97.893% 86.068%, 97.893% 86.068%, 97.257% 86.798%, 96.376% 87.808%, 95.313% 89.029%, 94.128% 90.39%, 92.882% 91.821%, 91.636% 93.253%, 90.451% 94.614%, 89.389% 95.836%, 88.51% 96.848%, 87.874% 97.579%, 87.874% 97.579%, 87.457% 98.024%, 87.013% 98.426%, 86.544% 98.786%, 86.054% 99.101%, 85.545% 99.371%, 85.019% 99.594%, 84.479% 99.77%, 83.926% 99.897%, 83.364% 99.974%, 82.795% 100%, 3.594% 99.996%, 3.594% 99.996%, 3.018% 99.943%, 2.471% 99.788%, 1.961% 99.54%, 1.495% 99.208%, 1.081% 98.8%, 0.726% 98.324%, 0.437% 97.789%, 0.221% 97.203%, 0.086% 96.575%, 0.04% 95.913%, 0% 19.768%, 0.005% 19.768%);
}

.cut-card__inner.corner-cut,
.life-card__inner {
  height: auto;
  aspect-ratio: 350/235;
  aspect-ratio: unset;
  -webkit-clip-path: polygon(99.997% 18.498%, 99.997% 18.498%, 99.983% 17.886%, 99.941% 17.282%, 99.871% 16.688%, 99.775% 16.107%, 99.653% 15.541%, 99.505% 14.994%, 99.332% 14.467%, 99.136% 13.964%, 98.915% 13.486%, 98.672% 13.037%, 98.672% 13.037%, 98.272% 12.354%, 97.718% 11.409%, 97.049% 10.266%, 96.304% 8.993%, 95.521% 7.653%, 94.738% 6.314%, 93.993% 5.04%, 93.325% 3.896%, 92.772% 2.95%, 92.372% 2.265%, 92.372% 2.265%, 92.11% 1.849%, 91.831% 1.472%, 91.536% 1.136%, 91.228% 0.841%, 90.908% 0.588%, 90.577% 0.379%, 90.237% 0.215%, 89.89% 0.096%, 89.536% 0.024%, 89.179% 0%, 2.258% 0%, 2.258% 0%, 1.896% 0.05%, 1.552% 0.195%, 1.231% 0.427%, 0.938% 0.737%, 0.678% 1.119%, 0.454% 1.565%, 0.273% 2.065%, 0.137% 2.614%, 0.052% 3.202%, 0.023% 3.821%, 0% 82.255%, 0.023% 82.255%, 0.023% 82.255%, 0.064% 82.783%, 0.125% 83.303%, 0.208% 83.814%, 0.311% 84.312%, 0.433% 84.798%, 0.575% 85.268%, 0.735% 85.721%, 0.914% 86.156%, 1.111% 86.57%, 1.325% 86.963%, 1.325% 86.963%, 1.725% 87.646%, 2.279% 88.591%, 2.947% 89.734%, 3.692% 91.007%, 4.476% 92.347%, 5.259% 93.686%, 6.004% 94.96%, 6.672% 96.104%, 7.225% 97.05%, 7.625% 97.735%, 7.625% 97.735%, 7.887% 98.151%, 8.166% 98.528%, 8.461% 98.864%, 8.769% 99.159%, 9.089% 99.412%, 9.42% 99.621%, 9.76% 99.785%, 10.107% 99.904%, 10.46% 99.976%, 10.818% 100%, 97.742% 100%, 97.742% 100%, 98.104% 99.95%, 98.448% 99.805%, 98.769% 99.573%, 99.062% 99.263%, 99.322% 98.88%, 99.546% 98.435%, 99.727% 97.934%, 99.863% 97.386%, 99.948% 96.798%, 99.977% 96.178%, 100% 18.498%, 99.997% 18.498%);
  clip-path: polygon(99.997% 18.498%, 99.997% 18.498%, 99.983% 17.886%, 99.941% 17.282%, 99.871% 16.688%, 99.775% 16.107%, 99.653% 15.541%, 99.505% 14.994%, 99.332% 14.467%, 99.136% 13.964%, 98.915% 13.486%, 98.672% 13.037%, 98.672% 13.037%, 98.272% 12.354%, 97.718% 11.409%, 97.049% 10.266%, 96.304% 8.993%, 95.521% 7.653%, 94.738% 6.314%, 93.993% 5.04%, 93.325% 3.896%, 92.772% 2.95%, 92.372% 2.265%, 92.372% 2.265%, 92.11% 1.849%, 91.831% 1.472%, 91.536% 1.136%, 91.228% 0.841%, 90.908% 0.588%, 90.577% 0.379%, 90.237% 0.215%, 89.89% 0.096%, 89.536% 0.024%, 89.179% 0%, 2.258% 0%, 2.258% 0%, 1.896% 0.05%, 1.552% 0.195%, 1.231% 0.427%, 0.938% 0.737%, 0.678% 1.119%, 0.454% 1.565%, 0.273% 2.065%, 0.137% 2.614%, 0.052% 3.202%, 0.023% 3.821%, 0% 82.255%, 0.023% 82.255%, 0.023% 82.255%, 0.064% 82.783%, 0.125% 83.303%, 0.208% 83.814%, 0.311% 84.312%, 0.433% 84.798%, 0.575% 85.268%, 0.735% 85.721%, 0.914% 86.156%, 1.111% 86.57%, 1.325% 86.963%, 1.325% 86.963%, 1.725% 87.646%, 2.279% 88.591%, 2.947% 89.734%, 3.692% 91.007%, 4.476% 92.347%, 5.259% 93.686%, 6.004% 94.96%, 6.672% 96.104%, 7.225% 97.05%, 7.625% 97.735%, 7.625% 97.735%, 7.887% 98.151%, 8.166% 98.528%, 8.461% 98.864%, 8.769% 99.159%, 9.089% 99.412%, 9.42% 99.621%, 9.76% 99.785%, 10.107% 99.904%, 10.46% 99.976%, 10.818% 100%, 97.742% 100%, 97.742% 100%, 98.104% 99.95%, 98.448% 99.805%, 98.769% 99.573%, 99.062% 99.263%, 99.322% 98.88%, 99.546% 98.435%, 99.727% 97.934%, 99.863% 97.386%, 99.948% 96.798%, 99.977% 96.178%, 100% 18.498%, 99.997% 18.498%);
}

.career-card {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-clip-path: polygon(99.999% 18.148%, 99.999% 18.148%, 99.992% 17.551%, 99.973% 16.961%, 99.942% 16.382%, 99.899% 15.815%, 99.845% 15.263%, 99.779% 14.729%, 99.702% 14.215%, 99.614% 13.724%, 99.515% 13.258%, 99.407% 12.82%, 99.407% 12.82%, 99.228% 12.153%, 98.98% 11.231%, 98.682% 10.116%, 98.349% 8.873%, 97.999% 7.567%, 97.649% 6.26%, 97.316% 5.016%, 97.018% 3.901%, 96.771% 2.977%, 96.592% 2.309%, 96.592% 2.309%, 96.475% 1.903%, 96.35% 1.536%, 96.219% 1.208%, 96.081% 0.92%, 95.938% 0.673%, 95.79% 0.469%, 95.638% 0.309%, 95.483% 0.193%, 95.325% 0.123%, 95.165% 0.099%, 1.01% 0%, 1.01% 0%, 0.848% 0.049%, 0.694% 0.19%, 0.551% 0.416%, 0.42% 0.72%, 0.304% 1.092%, 0.204% 1.527%, 0.123% 2.015%, 0.062% 2.55%, 0.024% 3.124%, 0.011% 3.729%, 0% 82.564%, 0.01% 82.564%, 0.01% 82.564%, 0.028% 83.079%, 0.056% 83.586%, 0.093% 84.084%, 0.139% 84.571%, 0.194% 85.044%, 0.257% 85.503%, 0.329% 85.945%, 0.408% 86.37%, 0.496% 86.774%, 0.592% 87.156%, 0.592% 87.156%, 0.771% 87.823%, 1.018% 88.746%, 1.317% 89.86%, 1.65% 91.103%, 2% 92.41%, 2.35% 93.717%, 2.682% 94.96%, 2.981% 96.076%, 3.228% 96.999%, 3.406% 97.667%, 3.406% 97.667%, 3.524% 98.073%, 3.648% 98.441%, 3.78% 98.769%, 3.918% 99.057%, 4.061% 99.303%, 4.209% 99.507%, 4.36% 99.668%, 4.516% 99.783%, 4.673% 99.854%, 4.833% 99.877%, 98.99% 99.976%, 98.99% 99.976%, 99.152% 99.928%, 99.306% 99.786%, 99.449% 99.56%, 99.58% 99.257%, 99.696% 98.884%, 99.796% 98.45%, 99.877% 97.961%, 99.938% 97.426%, 99.976% 96.852%, 99.989% 96.248%, 100% 18.148%, 99.999% 18.148%);
  clip-path: polygon(99.999% 18.148%, 99.999% 18.148%, 99.992% 17.551%, 99.973% 16.961%, 99.942% 16.382%, 99.899% 15.815%, 99.845% 15.263%, 99.779% 14.729%, 99.702% 14.215%, 99.614% 13.724%, 99.515% 13.258%, 99.407% 12.82%, 99.407% 12.82%, 99.228% 12.153%, 98.98% 11.231%, 98.682% 10.116%, 98.349% 8.873%, 97.999% 7.567%, 97.649% 6.26%, 97.316% 5.016%, 97.018% 3.901%, 96.771% 2.977%, 96.592% 2.309%, 96.592% 2.309%, 96.475% 1.903%, 96.35% 1.536%, 96.219% 1.208%, 96.081% 0.92%, 95.938% 0.673%, 95.79% 0.469%, 95.638% 0.309%, 95.483% 0.193%, 95.325% 0.123%, 95.165% 0.099%, 1.01% 0%, 1.01% 0%, 0.848% 0.049%, 0.694% 0.19%, 0.551% 0.416%, 0.42% 0.72%, 0.304% 1.092%, 0.204% 1.527%, 0.123% 2.015%, 0.062% 2.55%, 0.024% 3.124%, 0.011% 3.729%, 0% 82.564%, 0.01% 82.564%, 0.01% 82.564%, 0.028% 83.079%, 0.056% 83.586%, 0.093% 84.084%, 0.139% 84.571%, 0.194% 85.044%, 0.257% 85.503%, 0.329% 85.945%, 0.408% 86.37%, 0.496% 86.774%, 0.592% 87.156%, 0.592% 87.156%, 0.771% 87.823%, 1.018% 88.746%, 1.317% 89.86%, 1.65% 91.103%, 2% 92.41%, 2.35% 93.717%, 2.682% 94.96%, 2.981% 96.076%, 3.228% 96.999%, 3.406% 97.667%, 3.406% 97.667%, 3.524% 98.073%, 3.648% 98.441%, 3.78% 98.769%, 3.918% 99.057%, 4.061% 99.303%, 4.209% 99.507%, 4.36% 99.668%, 4.516% 99.783%, 4.673% 99.854%, 4.833% 99.877%, 98.99% 99.976%, 98.99% 99.976%, 99.152% 99.928%, 99.306% 99.786%, 99.449% 99.56%, 99.58% 99.257%, 99.696% 98.884%, 99.796% 98.45%, 99.877% 97.961%, 99.938% 97.426%, 99.976% 96.852%, 99.989% 96.248%, 100% 18.148%, 99.999% 18.148%);
}

.send__panel.corner-cut {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-clip-path: polygon(99.891% 9.481%, 99.891% 9.481%, 99.882% 9.169%, 99.854% 8.861%, 99.809% 8.559%, 99.746% 8.262%, 99.666% 7.974%, 99.569% 7.695%, 99.456% 7.427%, 99.327% 7.17%, 99.183% 6.927%, 99.024% 6.698%, 99.024% 6.698%, 98.762% 6.35%, 98.399% 5.868%, 97.961% 5.285%, 97.473% 4.636%, 96.96% 3.954%, 96.448% 3.271%, 95.96% 2.621%, 95.522% 2.039%, 95.16% 1.556%, 94.899% 1.207%, 94.899% 1.207%, 94.727% 0.995%, 94.544% 0.803%, 94.351% 0.632%, 94.15% 0.481%, 93.94% 0.353%, 93.723% 0.246%, 93.501% 0.162%, 93.273% 0.102%, 93.042% 0.065%, 92.808% 0.053%, 1.478% 0%, 1.478% 0%, 1.241% 0.025%, 1.016% 0.099%, 0.806% 0.217%, 0.614% 0.376%, 0.443% 0.571%, 0.297% 0.798%, 0.178% 1.053%, 0.089% 1.332%, 0.034% 1.632%, 0.015% 1.948%, 0% 90.756%, 0.015% 90.756%, 0.015% 90.756%, 0.042% 91.026%, 0.082% 91.291%, 0.136% 91.551%, 0.203% 91.805%, 0.284% 92.053%, 0.376% 92.292%, 0.482% 92.523%, 0.599% 92.745%, 0.727% 92.956%, 0.867% 93.156%, 0.867% 93.156%, 1.13% 93.504%, 1.492% 93.986%, 1.93% 94.568%, 2.418% 95.218%, 2.931% 95.9%, 3.444% 96.583%, 3.931% 97.232%, 4.369% 97.815%, 4.731% 98.298%, 4.992% 98.647%, 4.992% 98.647%, 5.164% 98.859%, 5.347% 99.051%, 5.54% 99.222%, 5.742% 99.372%, 5.951% 99.501%, 6.168% 99.608%, 6.39% 99.691%, 6.618% 99.752%, 6.849% 99.789%, 7.084% 99.801%, 98.415% 99.854%, 98.415% 99.854%, 98.652% 99.828%, 98.878% 99.754%, 99.088% 99.636%, 99.279% 99.478%, 99.45% 99.283%, 99.596% 99.056%, 99.715% 98.801%, 99.804% 98.521%, 99.859% 98.222%, 99.878% 97.906%, 99.893% 9.481%, 99.891% 9.481%);
  clip-path: polygon(99.891% 9.481%, 99.891% 9.481%, 99.882% 9.169%, 99.854% 8.861%, 99.809% 8.559%, 99.746% 8.262%, 99.666% 7.974%, 99.569% 7.695%, 99.456% 7.427%, 99.327% 7.17%, 99.183% 6.927%, 99.024% 6.698%, 99.024% 6.698%, 98.762% 6.35%, 98.399% 5.868%, 97.961% 5.285%, 97.473% 4.636%, 96.96% 3.954%, 96.448% 3.271%, 95.96% 2.621%, 95.522% 2.039%, 95.16% 1.556%, 94.899% 1.207%, 94.899% 1.207%, 94.727% 0.995%, 94.544% 0.803%, 94.351% 0.632%, 94.15% 0.481%, 93.94% 0.353%, 93.723% 0.246%, 93.501% 0.162%, 93.273% 0.102%, 93.042% 0.065%, 92.808% 0.053%, 1.478% 0%, 1.478% 0%, 1.241% 0.025%, 1.016% 0.099%, 0.806% 0.217%, 0.614% 0.376%, 0.443% 0.571%, 0.297% 0.798%, 0.178% 1.053%, 0.089% 1.332%, 0.034% 1.632%, 0.015% 1.948%, 0% 90.756%, 0.015% 90.756%, 0.015% 90.756%, 0.042% 91.026%, 0.082% 91.291%, 0.136% 91.551%, 0.203% 91.805%, 0.284% 92.053%, 0.376% 92.292%, 0.482% 92.523%, 0.599% 92.745%, 0.727% 92.956%, 0.867% 93.156%, 0.867% 93.156%, 1.13% 93.504%, 1.492% 93.986%, 1.93% 94.568%, 2.418% 95.218%, 2.931% 95.9%, 3.444% 96.583%, 3.931% 97.232%, 4.369% 97.815%, 4.731% 98.298%, 4.992% 98.647%, 4.992% 98.647%, 5.164% 98.859%, 5.347% 99.051%, 5.54% 99.222%, 5.742% 99.372%, 5.951% 99.501%, 6.168% 99.608%, 6.39% 99.691%, 6.618% 99.752%, 6.849% 99.789%, 7.084% 99.801%, 98.415% 99.854%, 98.415% 99.854%, 98.652% 99.828%, 98.878% 99.754%, 99.088% 99.636%, 99.279% 99.478%, 99.45% 99.283%, 99.596% 99.056%, 99.715% 98.801%, 99.804% 98.521%, 99.859% 98.222%, 99.878% 97.906%, 99.893% 9.481%, 99.891% 9.481%);
}


.specification-and-dimension__tab {
  border-top-left-radius: 8px;
  -webkit-mask-image: url(../images/tab-mask.svg);
  mask-image: url(../images/tab-mask.svg);
  -webkit-mask-position: right top;
  mask-position: right top;
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* #endregion Clip Path */


/* =========================================
   FILE UPLOAD
========================================= */

.custom-file-upload {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
}

.custom-file-upload-hidden {
  display: none;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

.custom-file-upload .file-upload-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="548" height="20" viewBox="0 0 548 20" fill="none"><path d="M521.887 19.9934C523.611 20.0828 527.983 19.3021 532.006 15.5449C535.978 11.8362 544.771 3.609 548 0.340427L547.64 8.96347e-07C544.421 3.25943 535.637 11.4773 531.661 15.1901C527.738 18.8539 523.501 19.5861 521.913 19.5038L521.9 19.5028H0V19.9934H521.887Z" fill="%23093341"/></svg>');
  background-size: 548px 20px;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.custom-file-upload .file-upload-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: none;
  padding: 2px 0 20px;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-primary-blue);
  cursor: pointer;
  font-size: var(--font-size-description);
  line-height: 1.4;
}

.custom-file-upload .file-upload-input::placeholder {
  font-size: var(--font-size-description);
  line-height: 1.4;
  color: var(--color-primary-blue);
  opacity: 0.5;
}

.custom-file-upload .file-upload-action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-right: 12px;
  cursor: pointer;
}

.custom-file-upload .file-upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0 7px 0 0;
  cursor: pointer;
}

.custom-file-upload .file-upload-button::after {
  content: "";
  display: block;
  width: 13px;
  height: 15px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="15" viewBox="0 0 13 15" fill="none"><path d="M2.68334 3.51612C2.57294 3.6346 2.51284 3.7913 2.51569 3.95322C2.51855 4.11514 2.58414 4.26962 2.69865 4.38413C2.81316 4.49865 2.96765 4.56424 3.12957 4.5671C3.29149 4.56995 3.44819 4.50985 3.56667 4.39945L2.68334 3.51612ZM6.45834 0.62445L6.9 0.182783C6.78282 0.0657414 6.62396 0 6.45834 0C6.29271 0 6.13386 0.0657414 6.01667 0.182783L6.45834 0.62445ZM9.35001 4.39945C9.40722 4.46086 9.47622 4.51011 9.55289 4.54427C9.62956 4.57843 9.71232 4.5968 9.79624 4.59828C9.88016 4.59976 9.96351 4.58432 10.0413 4.55289C10.1192 4.52145 10.1899 4.47466 10.2492 4.41532C10.3086 4.35597 10.3553 4.28527 10.3868 4.20745C10.4182 4.12962 10.4336 4.04627 10.4322 3.96235C10.4307 3.87843 10.4123 3.79567 10.3782 3.719C10.344 3.64234 10.2947 3.57334 10.2333 3.51612L9.35001 4.39945ZM5.83334 10.6245C5.83334 10.7902 5.89919 10.9492 6.0164 11.0664C6.13361 11.1836 6.29258 11.2495 6.45834 11.2495C6.6241 11.2495 6.78307 11.1836 6.90028 11.0664C7.01749 10.9492 7.08334 10.7902 7.08334 10.6245H5.83334ZM12.9167 11.4578C12.9167 11.292 12.8508 11.1331 12.7336 11.0158C12.6164 10.8986 12.4574 10.8328 12.2917 10.8328C12.1259 10.8328 11.9669 10.8986 11.8497 11.0158C11.7325 11.1331 11.6667 11.292 11.6667 11.4578H12.9167ZM1.25 11.4578C1.25 11.292 1.18416 11.1331 1.06695 11.0158C0.949736 10.8986 0.790765 10.8328 0.625005 10.8328C0.459244 10.8328 0.300273 10.8986 0.183063 11.0158C0.0658527 11.1331 4.78056e-06 11.292 4.78056e-06 11.4578H1.25ZM3.56667 4.39945L6.9 1.06612L6.01667 0.182783L2.68334 3.51612L3.56667 4.39945ZM6.01667 1.06612L9.35001 4.39945L10.2333 3.51612L6.9 0.182783L6.01667 1.06612ZM5.83334 0.62445V10.6245H7.08334V0.62445H5.83334ZM11.6667 11.4578V11.9578H12.9167V11.4578H11.6667ZM11.6667 11.9578C11.6667 12.7211 11.055 13.3328 10.2917 13.3328V14.5828C10.6366 14.5834 10.9782 14.516 11.297 14.3843C11.6158 14.2526 11.9054 14.0593 12.1493 13.8154C12.3932 13.5715 12.5865 13.2819 12.7182 12.9631C12.8499 12.6443 12.9173 12.3027 12.9167 11.9578H11.6667ZM10.2917 13.3328H2.625V14.5828H10.2917V13.3328ZM2.625 13.3328C1.86167 13.3328 1.25 12.7211 1.25 11.9578H4.78056e-06C-0.000654065 12.3027 0.0667939 12.6443 0.198479 12.9631C0.330164 13.2819 0.523495 13.5715 0.76738 13.8154C1.01127 14.0593 1.3009 14.2526 1.61968 14.3843C1.93846 14.516 2.2801 14.5834 2.625 14.5828V13.3328ZM1.25 11.9578V11.4578H4.78056e-06V11.9578H1.25Z" fill="%23093341"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
}