.row {
  --gap: 0px;
  --row-gap: var(--gap);
  --column-gap: var(--gap);
  --total: 12;
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap) var(--column-gap)
}
.col {
  --size: 12;
  --column: var(--columns, calc(var(--total) / var(--size)));
  --width: calc((100% - var(--column-gap) * (var(--column) - 1)) / var(--column));
  width: var(--width)
}
.section-sustainability img {
  transition-property: transform;
  transition-duration: var(--duration-3);
  transition-timing-function: var(--default-timing-function);
  transform: scale(1.005)
}
.section-sustainability a.panel:hover img {
  transform: scale(1.075)
}
.p-product-details .more-products .btn:hover svg, .p-news-details :is(.action-prev, .action-next):not(:disabled):hover svg, .p-news-details .news2:hover .icon-arrow svg, .p-news-list .banner-wrapper .news-item:hover .news-view .icon-arrow svg, .swiper-homepage .nav-action:not(:disabled):hover svg, .more:is(a, button):not(.disabled, :disabled):hover .icon-arrow svg, :is(a, button):not(.disabled, :disabled):hover .icon-arrow svg, .footer-form .submit:hover .icon-arrow svg, .arrow-btn:hover .arrow-circle svg, .pager .icon-arrow:not(.disabled):hover svg {
  animation: shuffle 1s cubic-bezier(0.75, 0, 0, 1)
}
.p-business .video-wrapper .page-banner, .contact-btn .icon-close, .header-home::before, .header-white .header-home::after {
  position: absolute;
  inset: 0
}
.p-product-details .splide .splide__arrow svg, .contact-btn .icon-close, .arrow-circle .icon-arrow, .icon-play svg, .icon-play, .header-home {
  position: absolute;
  inset: 0;
  margin: auto
}
.icon-play {
  transition-timing-function: var(--default-timing-function);
  transition-duration: var(--default-duration)
}
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid currentColor
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: manipulation
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto
}
input, button, textarea, select {
  font: inherit;
  color: inherit;
  outline: 0;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0)
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-box-shadow: none !important;
  transition: background-color 5000s ease-in-out 0s
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word
}
a {
  text-decoration: none;
  color: inherit
}
ul, ol {
  list-style: none
}
h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit
}
sup, sub {
  font-size: .5em
}
button {
  cursor: pointer
}
:root {
  --duration-1: 0.15s;
  --duration-2: 0.25s;
  --duration-3: 0.5s;
  --duration-4: 0.75s;
  --duration-5: 1s;
  --default-duration: var(--duration-2);
  --default-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --page-padding-x: 10rem;
  --root-font-size: 16;
  --svg-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cstyle%3E@keyframes rotate%7B0%25%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(360deg)%7D%7D@keyframes fillunfill%7B0%25%7Bstroke-dashoffset:32.3%7D50%25%7Bstroke-dashoffset:0%7Dto%7Bstroke-dashoffset:-31.9%7D%7D@keyframes rot%7B0%25%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(-360deg)%7D%7D@keyframes colors%7B0%25,to%7Bstroke:%23000000%7D%7D%3C/style%3E%3Cg style='animation-duration:1568.63ms;animation-iteration-count:infinite;animation-name:rotate;animation-timing-function:linear;transform-origin:50%25 50%25;width:16px;height:16px'%3E%3Cpath fill='none' d='M8 1.125A6.875 6.875 0 1 1 1.125 8' stroke-width='1' stroke-linecap='round' style='animation-duration:1333ms,5332ms,5332ms;animation-fill-mode:forwards;animation-iteration-count:infinite,infinite,infinite;animation-name:fillunfill,rot,colors;animation-play-state:running,running,running;animation-timing-function:cubic-bezier(.4,0,.2,1),steps(4),linear;transform-origin:50%25 50%25' stroke-dasharray='32.4' stroke-dashoffset='32.4'/%3E%3C/g%3E%3C/svg%3E");
  --svg-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --svg-check-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  font-size: calc(var(--root-font-size)/1920*100vw)
}
@media screen and (max-width: 750px) {
  :root {
    --page-padding-x: 1rem;
    font-size: calc(var(--root-font-size)/375*100vw)
  }
}
@keyframes shuffle {
  50% {
    transform: translateX(100%)
  }
  50.01% {
    transform: translateX(-100%)
  }
}
@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1
  }
  100% {
    transform: scale(1);
    opacity: 1
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0
  }
  100% {
    transform: translateY(0);
    opacity: 1
  }
}
@keyframes fade-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fade-out {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
.underline, .underline-target {
  --size: 1px;
  --color: currentColor;
  text-decoration: none;
  background-image: linear-gradient(var(--color), var(--color));
  background-size: 0% var(--size);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  transition-property: background-size;
  transition-duration: var(--duration-3);
  transition-timing-function: var(--default-timing-function)
}
.underline:hover, .underline-wrapper:hover .underline-target {
  background-size: 100% var(--size);
  background-position-x: 0%
}
.container {
  padding-left: var(--page-padding-x);
  padding-right: var(--page-padding-x)
}
.richtext :is(h1, h2, h3) {
  line-height: 1.125em;
  margin-bottom: .5em
}
.richtext :is(h1, h2, h3):not(:first-child) {
  margin-top: 1em
}
.richtext :is(h1, h2) {
  font-size: 20px;
	text-align: center
}
.richtext h3 {
  font-size: 2em
}
.richtext :is(ul, ol) {
  padding-left: 1em
}
.richtext ul {
  list-style: disc
}
.richtext ol {
  list-style: decimal
}
@media screen and (max-width: 750px) {
  .richtext :is(h1, h2) {
    font-size: 1.75em
  }
  .richtext h3 {
    font-size: 1.25em
  }
}
html {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5
}
.footer {
  --color-rgb: 255, 255, 255;
  --color-rgb-bg: 0, 0, 0;
  background-color: rgb(var(--color-rgb-bg));
  color: rgb(var(--color-rgb));
  padding-top: 11rem;
  padding-bottom: 4rem;
  text-align: center
}
.footer-nav a {
  text-transform: uppercase;
  margin-left: 2rem;
  margin-right: 2rem
}
.footer-copy {
  position: relative;
  color: rgba(var(--color-rgb), 0.5);
  margin-top: 5rem
}
.footer-copy a:hover {
  color: #fff
}
.footer-copy-space {
  display: inline-block;
  width: 1rem
}
.footer-logo {
  position: absolute;
  left: 0;
  bottom: .25rem;
  width: 13.4375rem;
  height: 3.125rem;
  background: url("../images/logo-white.png") center/contain no-repeat
}
.footer-media {
  position: absolute;
  right: 0;
  bottom: .25rem;
  display: flex;
  gap: .5rem
}
.footer-media svg {
  width: 1.5rem;
  height: 1.5rem
}
.footer-media a:hover {
  color: #fff
}
.footer-media img {
  opacity: 0;
  visibility: hidden;
  transition-duration: .25s
}
.footer-media .hover-wrapper img {
  opacity: 1;
  visibility: visible
}
@media screen and (max-width: 750px) {
  .footer {
    padding-top: 4rem;
    padding-bottom: 3rem;
    text-align: left
  }
  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem
  }
  .footer-nav a {
    margin: 0
  }
  .footer-copy {
    font-size: .75rem;
    margin-top: 2rem
  }
  .footer-logo {
    position: static;
    display: block;
    width: 8rem;
    height: 2rem;
    margin-bottom: 1rem
  }
  .footer-copy-space {
    display: block;
    width: 100%
  }
  .footer-media {
    position: static;
    margin-bottom: 1rem
  }
  .footer-media svg {
    width: 1.25rem;
    height: 1.25rem
  }
}
.section {
  margin-top: 6.75rem
}
.section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem
}
.section-title {
  font-size: 4rem;
  line-height: 1.125;
  text-transform:capitalize
}
.section-desc {
  margin-top: .5rem;
  font-size: 1.25rem
}
@media screen and (max-width: 750px) {
  .section {
    margin-top: 3rem
  }
  .section-header {
    margin-bottom: 2rem
  }
  .section-title {
    font-size: 1.75rem
  }
  .section-desc {
    font-size: .875rem
  }
}
.product-list {
  --columns: 4;
  --gap: 2rem
}
.product-block, .product-title, .product-image-wrapper {
  transition-timing-function: var(--default-timing-function);
  transition-duration: .5s
}
.product-block {
  display: block;
  transition-property: background-color, padding
}
.product-block:hover {
  background-color: #f0ede7;
  padding: 2rem 2rem 1.5rem
}
.product-block:hover .product-title {
  font-size: 1.875rem
}
.product-image {
  display: block;
  width: 100%;
  aspect-ratio: 420/525;
  object-fit: cover
}
.product-title {
  transition-property: font-size, transform;
  font-size: 1.25rem;
  margin-top: 1rem
}
@media screen and (max-width: 750px) {
  .product-list {
    --columns: 2;
    --gap: 0.5rem
  }
  .product-block {
    display: block;
    transition-property: background-color, padding;
    background-color: #f0ede7;
    padding: 2rem 2rem 1.5rem
  }
  .product-block, .product-block:hover {
    padding: .5rem
  }
  .product-title, .product-block:hover .product-title {
    font-size: .75rem;
    margin: .25rem auto
  }
}
.news-subtitle {
  font-size: 1.25rem
}
.news-title {
  font-size: 2rem;
  line-height: 3rem
}
.news-number {
  font-size: 6.75rem;
  line-height: .75;
  margin-right: 1rem
}
.news-view {
  display: flex;
  align-items: center
}
.news-view .underline-target {
  --size: 2px
}
.news-image {
  position: absolute;
  width: 32rem;
  aspect-ratio: 512/320;
  object-fit: cover;
  z-index: 1;
  top: calc(var(--offset-y)*1px);
  left: calc(var(--offset-x)*1px);
  transition-property: opacity, visibility, transform, filter;
  transition-timing-function: var(--default-timing-function);
  transition-duration: .5s;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
  filter: blur(5px);
  pointer-events: none
}
:is(.news-feature-1, .news-feature-2) {
  position: relative;
  display: block;
  border-color: #ddd9d4;
  border-top-width: 1px
}
:is(.news-feature-1, .news-feature-2):last-child {
  border-bottom-width: 1px
}
.news-feature-1 {
  padding-top: 2rem;
  padding-bottom: 5rem
}
.news-feature-1 .news-subtitle {
  font-size: 1rem
}
.news-feature-1 .news-title {
  position: relative;
  padding-right: 11.25rem;
  margin-top: .5rem
}
.news-feature-1 .news-title .icon-arrow {
  position: absolute;
  right: 0;
  top: .5rem;
  overflow: hidden
}
.news-feature-1 .news-title .icon-arrow svg {
  transition-property: transform;
  transition-timing-function: var(--default-timing-function);
  transition-duration: .5s;
  transform: scaleX(0);
  transform-origin: 100% 50%
}
.news-feature-1:hover .news-title .icon-arrow svg {
  transform: none;
  transform-origin: 0% 50%
}
.news-feature-2 {
  --offset-x: 0;
  --offset-y: 0;
  display: flex;
  padding-top: 3rem;
  padding-bottom: 6rem
}
.news-feature-2 .news-title {
  width: 0;
  flex-grow: 1;
  margin-left: 11.25rem
}
.news-feature-2:hover {
  z-index: 1
}
.news-feature-2:hover .news-image {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none
}
@media screen and (max-width: 750px) {
  .news-item {
    padding-top: 1.5rem;
    padding-bottom: 2.25rem
  }
  .news-item .underline-target {
    --size: 1px;
    padding-bottom: 2px
  }
  .news-title {
    font-size: 1rem;
    line-height: inherit
  }
  .news-subtitle, .news-view {
    font-size: .75rem
  }
  .news-number {
    font-size: 2.5rem;
    margin-right: auto;
    line-height: 3rem
  }
  .news-image {
    width: 12rem
  }
  .news-feature-1 .news-subtitle {
    font-size: .75rem
  }
  .news-feature-1 .news-title {
    padding-right: 0
  }
  .news-feature-1 .news-title .icon-arrow {
    display: none
  }
  .news-feature-2 {
    display: block
  }
  .news-feature-2 .news-title {
    padding-left: 5.5rem
  }
  .news-feature-2 .news-subtitle, .news-feature-2 .news-number {
    position: absolute;
    width: 5rem
  }
  .news-feature-2 .news-subtitle {
    margin-top: 3rem
  }
  .news-feature-2 .news-title {
    width: auto;
    margin-left: auto
  }
}
.svg-arrow {
  width: 2rem;
  height: .375rem
}
.header-home::before, .header-white .header-home::after {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%
}
.header, .header-white .header-home::before, .header-white .header-home::after {
  transition-timing-function: var(--default-timing-function);
  transition-duration: .35s
}
.header-white .header-home::before, .header-white .header-home::after {
  transition-property: opacity, visibility
}
body {
  --header-height: 7rem;
  padding-top: var(--header-height)
}
.p-home, .p-sustainability {
  padding-top: 0
}
@media (max-width: 1399px) {
  .header {
  display: flex;
  align-items: center;
  position:absolute;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 10;
  transition-property: color, background-color, opacity, visibility, box-shadow
}
}
@media (min-width: 1400px) and (max-width: 1439px) {
  .header {
  display: flex;
  align-items: center;
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 10;
  transition-property: color, background-color, opacity, visibility, box-shadow
}
}
@media (min-width: 1440px) and (max-width: 1918px) {
  .header {
  display: flex;
  align-items: center;
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 10;
  transition-property: color, background-color, opacity, visibility, box-shadow
}
}
@media (min-width: 1919px) and (max-width: 2000px) {
  .header {
  display: flex;
  align-items: center;
  position:absolute;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 10;
  transition-property: color, background-color, opacity, visibility, box-shadow
}
}
@media (min-width: 1922px) {
  .header {
  display: flex;
  align-items: center;
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 10;
  transition-property: color, background-color, opacity, visibility, box-shadow
}
}



:is(.on-start, .on-bottom) .header, .header-menu-open {
  background-color: #fff;
  color: #000;
  box-shadow: 0px 1px 0px 0px #ddd9d4
}
.is-scrolled-down .header {
  background-color: #fff;
  color: #000;
  box-shadow: 0px 1px 0px 0px #ddd9d4
}
.is-scrolled-down .header-white {
  color: #000
}
.is-scrolled-down .header-white .header-home::before {
  opacity: 1
}
.is-scrolled-down .header-white .header-home::after {
  opacity: 0
}
.is-scrolled-up .header {
  opacity: 1;
  visibility: visible
}
.header-white {
  color: #fff
}
.header-menu-open, :is(.on-start, .on-bottom) .header-white {
  color: #000
}
.header-white .header-home::before {
  opacity: 0
}
.header-white .header-home::after {
  background-image: url("../images/logo-white.png")
}
.header-menu-open .header-home::before, :is(.on-start, .on-bottom) .header-white .header-home::before {
  opacity: 1
}
.header-menu-open .header-home::after, :is(.on-start, .on-bottom) .header-white .header-home::after {
  opacity: 0
}
/* product pages: always show header-white in dark mode (black text, dark logo) */
.p-product-list .header-white, .p-product-details .header-white, .p-sustainability .header-white, .p-news-list .header-white, .p-news-details .header-white, .p-contact .header-white, .p-business .header-white {
  background-color: #fff;
  color: #000;
  box-shadow: 0px 1px 0px 0px #ddd9d4
}
.p-product-list .header-white .header-home::before, .p-product-details .header-white .header-home::before, .p-sustainability .header-white .header-home::before, .p-news-list .header-white .header-home::before, .p-news-details .header-white .header-home::before, .p-contact .header-white .header-home::before, .p-business .header-white .header-home::before {
  opacity: 1
}
.p-product-list .header-white .header-home::after, .p-product-details .header-white .header-home::after, .p-sustainability .header-white .header-home::after, .p-news-list .header-white .header-home::after, .p-news-details .header-white .header-home::after, .p-contact .header-white .header-home::after, .p-business .header-white .header-home::after {
  opacity: 0
}

.header-link {
  font-size: 1.25rem;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 2rem
}
.header-nav-left {
  margin-right: auto
}
.header-nav-right {
  margin-left: auto
}
.header-home {
  width: 13.4375rem;
  height: 3.125rem
}
.header-home::before {
  background-image: url("../images/logo-original.png")
}
.header-menu .name, .header-contact, .header-lang {
  font-size: .75rem;
  display: flex;
  align-items: center
}
.header-menu {
  margin-right: auto
}
.header-menu :is(.icon-menu, .icon-close) svg {
  width: 1.25rem;
  height: 1.25rem
}
.header-menu .icon-menu svg {
  margin-right: .5rem
}
.header-menu .icon-menu {
  display: flex;
  align-items: center
}
.header-menu .icon-close {
  display: none
}
.header-menu-open .header-menu .name {
  display: none
}
.header-menu-open .header-menu .icon-close {
  display: block
}
.header-menu-open .header-contact {
  display: none
}
.header-menu-open .header-lang {
  display: initial
}
.header-contact {
  margin-left: auto
}
.header-contact::after {
  content: "";
  display: inline-block;
  border-radius: 9999px;
  width: .5em;
  height: .5em;
  background-color: currentColor;
  margin-left: .25rem
}
.header-search {
  margin-left: 2rem;
  position: relative
}
.header-search, .header-search svg {
  width: 1.5rem;
  height: 1.5rem
}
.header-search svg {
  position: absolute;
  inset: 0;
  margin: auto
}
.header-search .icon-close {
  display: none
}
.header-search.toggle .icon-close {
  display: initial
}
.header-search.toggle .icon-search {
  display: none
}
@media screen and (min-width: 750px) {
  .header-menu, .header-contact {
    display: none
  }
  .header-lang-wrapper {
    position: relative
  }
  .header-lang-wrapper > .header-lang-link {
    text-decoration: underline
  }
  .header-lang-list {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    width: 6rem;
    left: 50%;
    margin-left: -3rem;
    text-align: center;
    padding: 1rem .5rem;
    margin-top: 1rem;
    transition-property: visibility, opacity, transform;
    transition-timing-function: var(--default-timing-function);
    transition-duration: var(--default-duration);
    transform: translateY(-4px);
    opacity: 0;
    visibility: hidden;
    transition-delay: .1s;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    gap: .5rem
  }
  .header-lang-wrapper:hover .header-lang-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s
  }
}
@media screen and (max-width: 750px) {
  body {
    --header-height: 4rem
  }
  .header-search {
    display: none
  }
  .header-search svg {
    width: 1.25rem;
    height: 1.25rem
  }
  .header-menu-open .header-search {
    display: block
  }
  .header-nav {
    display: none
  }
  .logo, .header-home {
    height: 1.5rem;
    width: 6rem
  }
}
.page-header {
	padding-top: 16rem;
	padding-bottom:4rem;

  text-align: center
}
.page-header .heading {
  font-size: 6rem;
  line-height: 1;

  margin-left: auto;
  margin-right: auto
}
.page-header .desc {
  font-size: 1.25rem;
  margin: 2rem auto 0
}
@media screen and (max-width: 750px) {
  .page-header {
    padding: 4rem 0
  }
  .page-header .heading {
    font-size: 2.25rem
  }
  .page-header .desc {
    font-size: .875rem;
    margin: 1rem auto 0
  }
}
.page-banner, .page-video {

  width: 100%
}
.page-banner {
  object-fit: cover
}
.page-video {
  object-fit: cover
}
.icon-play {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  border-width: 1px;
  color: #fff;
  transition-property: box-shadow
}
.icon-play svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
  left: .125rem
}
.icon-play:hover {
  box-shadow: inset 0 0 0 4px currentColor
}
@media screen and (max-width: 750px) {
  .page-banner, .page-video {
    aspect-ratio: 880/800
  }
  .icon-play {
    width: 4rem;
    height: 4rem
  }
}
.about-section {
  --gap: 4rem;
  --columns: 2
}
.about-section .about-stats {
  margin-top: 2rem
}
.about-section .richtext {
  font-size: 1.25rem;
}
.about-stats {
  font-size: 1.475rem
}
.about-stats-item {
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: flex;
  justify-content: center
}
.about-stats-item:not(:first-child) {
  border-top-width: 1px;
  border-color: #ddd9d4
}
.about-stats-data {

  font-size: 3.75rem;
  color: #c59a4f;
  display: inline
}
.about-stats-plus {
  font-size: 1.75rem;
  color: #c59a4f
}
.about-stats-name {
  margin-left: auto;

}
.about-image-label {
  margin-left: auto
}
@media screen and (max-width: 750px) {
  .about-section {
    --columns: 1
  }
  .about-section .about-stats {
    margin-top: 2rem
  }
  .about-section .richtext {
    font-size: 1rem
  }
  .about-stats {
    font-size: 1rem
  }
}
.section-sustainability .panel {
  max-width: 32rem;
  background-color: #fff;
  padding: 2rem;
  display: block
}
.section-sustainability .richtext {
  font-size: 1.25rem
}
.section-sustainability .richtext :is(h1, h2, h3) {
  font-size: 3em;
  margin-bottom: .5em;
  text-transform:capitalize;
	text-align: center;
}
.section-sustainability .richtext p {
  text-align: center
}
.section-sustainability img {
  display: block;
  width: 100%
}
.section-sustainability .more {
  margin-top: 2rem;
  display: flex;
  justify-content: center
}
@media screen and (max-width: 750px) {
  .section-sustainability .richtext {
    font-size: .875rem
  }
  .section-sustainability .richtext :is(h1, h2, h3) {
    font-size: 2.25rem
  }
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  gap: 1.25rem;
  margin-top: 6rem
}
.pager .icon-arrow {
  overflow: hidden
}
.pager .prev {
  transform: rotate(180deg);
  margin-right: .5rem
}
.pager .next {
  margin-left: .5rem
}
.pager .icon-arrow.disabled {
  color: rgba(0, 0, 0, .5);
  cursor: not-allowed
}
@media screen and (max-width: 750px) {
  .pager {
    font-size: .875rem;
    gap: 1rem;
    margin-top: 4rem
  }
}
@keyframes marquee-scroll {
  to {
    transform: translateX(-100%)
  }
}
.marquee {
  overflow: hidden;
  display: flex
}
.marquee-list {
  min-width: 100%;
  flex-shrink: 0;
  display: flex;
  animation: marquee-scroll 200s infinite linear
}
.marquee-item {
  flex-shrink: 0
}
.marquee-clients {
  background-color: #000;
  color: #fff;
  padding-top: 1px
}
.marquee-clients .marquee-item {
  position: relative
}
.marquee-clients .marquee-item::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -1px;
  border-width: 1px;
  border-color: #2b2b2b
}
.marquee-clients .marquee-logo {
  height: 7.5rem
}
.marquee-clients-title {
  font-size: 1.875rem;
  text-transform: uppercase;
  margin: 4rem auto;
  text-align: center
}
.marquee-qualifications .marquee-item {
  margin-right: 8rem
}
.marquee-qualifications .marquee-logo {
  filter: grayscale(1);
  height: 7.5rem;
  transition: filter .25s
}
.marquee-qualifications .marquee-logo:hover {
  filter: none
}
@media screen and (max-width: 750px) {
  .marquee-clients-title {
    font-size: 1.25rem;
    max-width: 16rem;
    margin: 2rem auto
  }
  .marquee-clients .marquee-logo {
    height: 4rem
  }
  .marquee-qualifications .marquee-item {
    margin-right: 1rem
  }
  .marquee-qualifications .marquee-logo {
    height: 4rem
  }
}
.footer-contact {
  background-color: #000;
  padding-top: 1px;
  margin-top: 24rem
}
.footer-contact .content {
  background-color: #f5f5f0;
  padding: 6rem;
  margin-top: -12rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end
}
.footer-contact .section-title {
  max-width: 52rem;
  margin-right: auto;
  text-transform: initial
}
.footer-contact .arrow-btn {
  width: 28.75rem;
  margin-left: auto
}
@media screen and (max-width: 750px) {
  .footer-contact {
    margin-top: 12rem
  }
  .footer-contact .content {
    margin-top: -8rem;
    padding: 3rem 2rem;
    flex-direction: column;
    gap: 1rem
  }
  .footer-contact .arrow-btn {
    width: 100%
  }
}
.arrow-circle {
  --btn-size: 8rem;
  --icon-size: 2rem;
  position: relative;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 9999px;
  background-color: hsla(0, 0%, 100%, .75)
}
.arrow-circle .icon-arrow {
  width: var(--icon-size);
  height: var(--icon-size);
  overflow: hidden
}
.arrow-circle svg {
  width: 100%;
  height: 100%
}
.arrow-btn {
  position: relative;
  padding: .5rem 0;
  font-size: 1.25rem;
  border-bottom-width: 1px
}
.arrow-btn .arrow-circle {
  position: absolute;
  right: -3rem;
  bottom: -2.25rem
}
.arrow-btn .arrow-circle .icon-arrow {
  transform: rotate(-15deg)
}
@media screen and (max-width: 750px) {
  .arrow-circle {
    --btn-size: 5rem
  }
  .arrow-btn .arrow-circle {
    bottom: -0.5rem;
    right: -1.25rem
  }
}
.line {
  width: 1px;
  background-color: currentColor;
  height: 3rem;
  margin: 4rem auto
}
@media screen and (max-width: 750px) {
  .line {
    height: 4rem;
    margin: 2rem auto
  }
}
.icon-arrow {
  width: 2rem;
  height: 2rem
}
.icon-arrow svg {
  width: 100%;
  height: 100%
}
@keyframes contact-btn-bounce {
  0%, 20%, 53%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0)
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1)
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05)
  }
  80% {
    transform: translateZ(0) scaleY(0.95);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
  }
  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02)
  }
}
.contact-btn {
  position: fixed;
  width: 4rem;
  height: 4rem;
  right: var(--page-padding-x);
  bottom: var(--page-padding-x);
  background-color: #f5f5f0;
  border-radius: 9999px;
  z-index: 8;
  transition-property: visibility, opacity, bottom, background-color, color;
  transition-duration: .25s;
  animation-name: contact-btn-bounce;
  transform-origin: center bottom;
  animation-duration: 1s;
  animation-fill-mode: both
}
.contact-btn .icon-message {
  width: 100%;
  height: 100%
}
.contact-btn .icon-message svg {
  width: 100%;
  height: 100%
}
.contact-btn .icon-close {
  display: none;
  position: absolute;
  width: 1.25rem;
  height: 1.25rem
}
.contact-btn .icon-close svg {
  width: 100%;
  height: 100%
}
.contact-btn:hover {
  background-color: #937143;
  color: #fff
}
.on-bottom .contact-btn {
  opacity: 0;
  visibility: hidden
}
@media screen and (min-width: 750px) {
  .p-home .contact-btn {
    bottom: 12rem
  }
  .on-start .p-home .contact-btn, .on-bottom .p-home .contact-btn {
    bottom: var(--page-padding-x)
  }
}
@media screen and (max-width: 750px) {
  .contact-btn {
    width: 3rem;
    height: 3rem
  }
}
@keyframes page-enter {
  0% {
    filter: blur(5px);
    opacity: 0
  }
  100% {
    filter: none;
    opacity: 1
  }
}
@keyframes page-leave {
  0% {
    filter: none;
    opacity: 1
  }
  100% {
    filter: blur(5px);
    opacity: 0
  }
}
.page-enter {
  animation: page-enter .5s forwards;
  animation-timing-function: ease-in-out
}
.page-leave {
  animation: page-leave .5s forwards;
  animation-timing-function: ease-in-out
}
.loader {
  inset: 0;
  position: absolute;
  background-color: hsla(0, 0%, 100%, .75);
  z-index: 100;
  border-radius: inherit;
  display: none;
  background-image: var(--svg-spinner);
  background-size: 2rem 2rem;
  background-position: 50% 50%;
  background-repeat: no-repeat
}
.loader-fixed {
  position: fixed
}
.form-response {
  margin-top: 1rem;
  padding: 1rem;
  background: #f5f5f0;
  color: #000;
  display: flex;
  align-items: center;
  font-weight: 500
}
.form-response .close {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  color: #000
}
.form-response .close:hover {
  background-color: rgba(0, 0, 0, .05)
}
.form-response .close svg {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  inset: 0;
  margin: auto
}
.form-response .icon {
  margin-right: .5rem
}
.form-response .icon svg {
  width: 1.25rem;
  height: 1.25rem
}
.form-response.success .icon {
  color: #07a307
}
.form-response.error .icon {
  color: #ff1a1a
}
.footer-form {
  color: #fff;
  background-color: #000;
  display: flow-root;
  margin-top: 23.75rem
}
.footer-form .form {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("../images/contact-form-bg.jpg") center/cover;
  padding: 5rem 20rem 12rem;
  margin-top: -23.75rem;
  position: relative;
  border-radius: 25px;
  overflow: hidden
}
.footer-form .title {
  font-size: 4rem;
  line-height: 1.125;
  text-transform:capitalize;
  text-align: center
}
.footer-form .subtitle {
  font-size: 1.25rem;
  text-align: center;
  margin-top: .5rem
}
.footer-form .row {
  --columns: 2;
  --column-gap: 2rem;
  --row-gap: 0.75rem;
  margin-top: 4rem;
  margin-bottom: .75rem
}
.footer-form .bottom {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.footer-form .submit {
  display: flex;
  align-items: center
}
.footer-form .icon-arrow {
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  margin-left: 1.25rem
}
.footer-form .icon-arrow svg {
  width: 100%;
  height: 100%
}
.footer-form .field-input-control {
  font-size: 1.25rem;
  padding: .75rem 0
}
.footer-form .field-input-control::placeholder {
  color: inherit
}
.field-input-wrapper {
  display: flex;
  align-items: center;
  border-bottom-width: 1px
}
.field-input-control {
  display: block;
  width: 100%;
  color: inherit
}
.field-input-control:is(textarea) {
  resize: none;
  box-sizing: content-box;
  min-height: 6rem
}
.field-input-wrapper .field-input-control {
  width: 0;
  flex: 1
}
.form-error {
  margin-top: .5rem;
  font-size: .75rem;
  color: #ff1a1a
}
.checkbox-wrapper {
  display: flex;
  appearance: none;
  align-items: flex-start
}
.checkbox-control {
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  border-width: 1px;
  margin-right: .5em;
  margin-top: .125em
}
.checkbox-control:checked {
  background: var(--svg-check-white) center/75% 75% no-repeat
}
@media screen and (max-width: 750px) {
  .checkbox-wrapper {
    font-size: .75rem
  }
  .footer-form .form {
    padding: 3rem 1.25rem
  }
  .footer-form .title {
    font-size: 1.5rem
  }
  .footer-form .subtitle {
    font-size: .75rem
  }
  .footer-form .row {
    --columns: 1;
    --row-gap: 0.25rem;
    margin-top: 1rem
  }
  .footer-form .bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1rem
  }
  .footer-form .submit {
    margin-top: 1rem
  }
  .footer-form .field-input-control {
    font-size: 1rem;
    padding: .5rem 0
  }
  .form-response {
    font-size: .75rem;
    padding: .75rem
  }
  .form-response .close {
    width: 1.25rem;
    height: 1.25rem
  }
  .form-response .close svg {
    width: 1rem;
    height: 1rem
  }
}
.fixed-form {
  position: fixed;
  inset: 0;
  z-index: 11;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: hsla(0, 0%, 100%, .1);
  padding: 0 var(--page-padding-x) var(--page-padding-x);
  display: none
}
.fixed-form .form {
  position: relative;
  background-color: #fff;
  border-radius: 1.25rem;
  z-index: 8;
  max-width: 25rem;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  margin-top: auto;
  margin-left: auto
}
.fixed-form .title {
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: .5rem
}
.fixed-form .row {
  --columns: 2;
  --column-gap: 1rem
}
.fixed-form .field-input-wrapper {
  border-bottom-color: #ddd9d4;
  transition: border-color var(--default-duration) var(--default-timing-function)
}
.fixed-form .field-input-wrapper:is(:hover, :focus-within) {
  border-color: currentColor
}
.fixed-form .field-input-control {
  padding-top: 1rem;
  padding-bottom: .5rem
}
.fixed-form .field-input-control::placeholder {
  color: #989898
}
.fixed-form .more {
  margin-top: 2rem
}
.fixed-form .loader {
  border-radius: 1.25rem
}
.fixed-form .checkbox-wrapper {
  margin-top: 1rem
}
.fixed-form .checkbox-control:checked {
  background-image: var(--svg-check-black)
}
.fixed-form .close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px
}
.fixed-form .close:hover {
  background-color: rgba(0, 0, 0, .05)
}
.fixed-form .close svg {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  inset: 0;
  margin: auto
}
.fixed-form-enter-active, .fixed-form-leave-active, .fixed-form-enter-active .form, .fixed-form-leave-active .form {
  transition-property: opacity, transform;
  transition-timing-function: var(--default-timing-function);
  transition-duration: var(--default-duration)
}
.fixed-form-enter-from, .fixed-form-leave-to {
  opacity: 0
}
.fixed-form-enter-from .form, .fixed-form-leave-to .form {
  transform: scale(0.98)
}
@media screen and (max-width: 750px) {
  .fixed-form .form {
    padding: 1.5rem
  }
  .fixed-form .field-input-control {
    padding-top: .75rem
  }
  .fixed-form .field-input-control:is(textarea) {
    min-height: 3rem
  }
  .fixed-form .more {
    margin-top: 1rem
  }
}
.icon-arrow {
  width: 2rem;
  height: 2rem;
  overflow: hidden
}
.icon-arrow svg {
  width: 100%;
  height: 100%
}
.more {
  display: inline-flex;
  align-items: center
}
.more .icon-arrow {
  margin-left: 1rem
}
.swiper-homepage {
  height: 60rem;
  max-height: 100vh;
  color: #fff
}
.swiper-homepage picture, .swiper-homepage .banner, .swiper-homepage .media {
  height: 100%;
  width: 100%;
  object-fit: cover
}
.swiper-homepage .overlay {
  position: absolute;
  inset: auto 0 0;
  background: url("../images/banner-overlay-bg.webp") 50% 0%/100% auto no-repeat
}
.swiper-homepage .heading {
  font-size: 6.75rem;
  line-height: 1.1
}
.swiper-homepage .metadata {
  margin-top: 2rem;
  margin-bottom: 5rem;
  display: flex
}
.swiper-homepage .subtitle {
  font-size: 1.25rem;
  width: 24rem;
  margin-right: 1rem
}
.swiper-homepage .title {
  font-size: 1.875rem;
  flex: 1 1 0%
}
.swiper-homepage .nav {
  position: absolute;
  z-index: 1;
  bottom: 5rem;
  right: var(--page-padding-x);
  display: flex;
  gap: 1rem
}
.swiper-homepage .nav-action-prev {
  transform: rotate(180deg)
}
.swiper-homepage .nav-action:disabled {
  cursor: not-allowed;
  color: hsla(0, 0%, 100%, .5)
}
.swiper-homepage .progress {
  height: 1px;
  background-color: hsla(0, 0%, 100%, .5);
  margin-top: 2rem
}
.swiper-homepage .progress::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--progress)*100%);
  background-color: #fff
}
@media screen and (max-width: 750px) {
  .swiper-homepage .heading {
    font-size: 2.5rem
  }
  .swiper-homepage .metadata {
    margin-bottom: 2rem
  }
  .swiper-homepage .nav {
    display: none
  }
  .swiper-homepage .subtitle {
    font-size: .6875rem;
    width: 8rem
  }
  .swiper-homepage .title {
    font-size: .875rem
  }
}
.menu {
  position: fixed;
  inset: 0;
  overflow: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 8rem 0;
  z-index: 8
}
.menu .nav {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 4rem
}
.menu .nav-item:last-child {
  margin-top: .5rem
}
.menu .nav-link {
  font-size: 1.5rem
}
.menu .nav-lang-link {
  font-size: .75rem;
  margin: 0 .5rem
}
.menu .bottom {
  position: fixed;
  inset: auto 0 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: .75rem;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 -20px 16px #fff
}
.menu .media a {
  margin: 0 .5rem;
  text-decoration: underline
}
.menu .copy {
  color: rgba(0, 0, 0, .25)
}
:lang(en) .nav-lang-link.en, :lang(zh) .nav-lang-link.ch, :lang(fr) .nav-lang-link.fr {
  text-decoration: underline
}
.menu-enter-active, .menu-leave-active {
  transition-property: opacity;
  transition-timing-function: var(--default-timing-function);
  transition-duration: var(--default-duration)
}
.menu-enter-from, .menu-leave-to {
  opacity: 0
}
.search-overlay {
  position: fixed;
  background-color: #fff;
  z-index: 9;
  inset: 0;
  margin: auto;
  display: none;
  padding: 20rem 1.5rem
}
.search-overlay .wrapper {
  max-width: 48rem;
  margin: auto
}
.search-overlay .field-input-wrapper {
  position: relative
}
.search-overlay .field-input-control {
  padding-top: .75rem;
  padding-bottom: .75rem;
  border-bottom-color: rgba(0, 0, 0, .25)
}
.search-overlay .field-input-control:focus {
  border-bottom-color: #000
}
.search-overlay .icon-search {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 2rem
}
.search-overlay .icon-search svg {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  inset: 0;
  margin: auto
}
.search-enter-active, .search-leave-active {
  transition-property: opacity, transform;
  transition-timing-function: var(--default-timing-function);
  transition-duration: var(--default-duration)
}
.search-enter-from, .search-leave-to {
  opacity: 0
}
@media screen and (max-width: 750px) {
  .search-overlay {
    padding: 8rem 1.25rem
  }
}
@keyframes st-fade {
  0% {
    filter: blur(5px);
    opacity: 0
  }
  100% {
    filter: none;
    opacity: 1
  }
}
@keyframes st-slide {
  0% {
    transform: translateY(32px);
    opacity: 0
  }
  100% {
    transform: none;
    opacity: 1
  }
}
.st-slide, .st-fade {
  opacity: 1
}
.st-fade.enter {
  animation-name: st-fade;
  animation-timing-function: linear;
  animation-duration: .5s;
  animation-fill-mode: both
}
.st-slide.enter {
  animation-name: st-slide;
  animation-timing-function: var(--default-timing-function);
  animation-duration: .75s;
  animation-delay: calc(var(--index, 0)*.25s);
  animation-fill-mode: both
}

.p-home .marquee-qualifications {
  padding-bottom: 4rem
}
.p-home .section-about {
  --columns: 2;
  --column-gap: 4rem;
  margin-top: 4rem
}
.p-home .section-about .richtext {
  font-size: 1.25rem;
  margin-top: .5rem
}
.p-home .section-about .col-right {
  display: flex;
  flex-direction: column
}
.p-home .section-about .about-stats {
  margin-top: auto
}
.p-home .section-about .more {
  margin-top: 4rem
}
.p-home .section-sustainability {
  overflow: hidden;
  background: url("../../images/sustainability-section-bg.jpg") content-box center/cover no-repeat;
  margin-top: 4rem
}
.p-home .section-sustainability .panel {
  margin: 12rem auto;
  max-width: 33rem
}
@media screen and (min-width: 750px) {
  .p-home .section-news {
    padding-left: 16rem;
    padding-right: 16rem
  }
}
@media screen and (max-width: 750px) {
  .p-home .section-about {
    --columns: 1;
    --gap: 2rem
  }
  .p-home .section-about .richtext {
    font-size: 1rem
  }
  .p-home .section-about .more {
    margin-top: 2rem
  }
  .p-home .section-about .about-stats {
    margin-top: 2rem
  }
  .p-home .section-sustainability .panel {
    margin: 4rem var(--page-padding-x);
    padding: 1.5rem 1rem
  }
}
@keyframes timeline-item-active {
  to {
    font-size: var(--active-font-size)
  }
}
@keyframes timeline-item-reset {
  from {
    font-size: var(--active-font-size)
  }
  to {
    font-size: var(--initial-font-size)
  }
}
.p-about .page-header .desc {
  max-width: 100%
}
.p-about .banner {
  width: 100%
}
.p-about :is(.client-grid, .client-item)::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px -1px;
  border-width: 1px;
  border-color: #ddd9d4
}
.p-about .client-grid {
  --columns: 4;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr)
}
.p-about .client-item {
  position: relative
}
.p-about .client-logo {
  height: 14.25rem;
  object-fit: cover;
  margin: auto
}
.p-about .section-story .row {
  --columns: 2;
  padding: 8rem 3rem;
  background-color: #f5f5f0
}
.p-about .section-story .section-title {
  margin-bottom: 4rem
}
.p-about .story {
  color: #937143;
  animation: fade-in .75s linear
}
.p-about .story:not(.active) {
  display: none
}
.p-about .story-image {
  width: 100%;
  aspect-ratio: 850/500;
  object-fit: cover
}
.p-about .story-title {
  font-size: 1.875rem;
  margin-top: 2rem;
  padding-bottom: 1rem;
  text-transform: uppercase
}
.p-about .story-desc {
  padding-top: 2rem;
  border-top-width: 1px;
  font-size: 1.25rem;
}
.p-about .timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}
.p-about .timeline-item {
  --initial-font-size: 1.25rem;
  --active-font-size: 6.75rem;
  font-size: var(--initial-font-size);
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  line-height: 1;
  cursor: pointer
}
.p-about .timeline-item::before {
  content: "";
  height: 1px;
  background-color: #937143;
  width: 1.25rem;
  margin-right: 1rem;
  transition-property: width;
  transition-duration: inherit;
  transition-timing-function: inherit
}
.p-about .timeline-item.prev {
  animation: timeline-item-reset .5s both
}
.p-about .timeline-item.active {
  color: #937143;
  animation: timeline-item-active .5s both
}
.p-about .timeline-item.active::before {
  width: 16rem
}
.p-about .timeline-item:hover {
  color: #937143
}
@media screen and (min-width: 750px) {
  .p-about .section-story .section-title {
    font-size: 3.75rem;
    padding-right: 16rem
  }
  .p-about .section-story .col-right .section-title {
    display: none
  }
}
@media screen and (max-width: 750px) {
  .p-about .client-grid {
    --columns: 2
  }
  .p-about .client-logo {
    height: 6rem
  }
  .p-about .section-story .row {
    --columns: 1;
    --gap: 2rem;
    padding: 2.5rem 1rem;
    flex-wrap: wrap-reverse
  }
  .p-about .section-story .section-title {
    margin-bottom: 1rem
  }
  .p-about .section-story .col-left .section-title {
    display: none
  }
  .p-about .timeline-item {
    --initial-font-size: 0.875rem;
    --active-font-size: 3rem;
    margin-top: 1rem
  }
  .p-about .timeline-item.active::before {
    width: 1.25rem
  }
  .p-about .story-title {
    font-size: 1.25rem
  }
  .p-about .story-desc {
    font-size: .875rem;
    padding-top: 1rem
  }
}
.p-sustainability .page-banner {
  position: relative;
  min-height: 60rem;
  max-height: 100vh;
  color: #fff;
  text-align: center;
  overflow: hidden
}
.p-sustainability .page-banner .image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1
}
.p-sustainability .page-banner .heading {
  font-size: 12rem;
  line-height: 1;
  margin-top: 22.5rem;
  background-image: linear-gradient(180deg, #ffffff -20%, transparent);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0)
}
.p-sustainability .page-banner .desc {
  max-width: 30rem;
  margin: 2rem auto;
  font-size: 1.25rem;
}
.p-sustainability .section-header {
  max-width: 74.75rem
}
.p-sustainability .section-desc {
  margin-top: 2rem
}
.p-sustainability .social-compliance {
  margin-top: 9rem;
  text-align: center
}
.p-sustainability .social-compliance .marquee-title {
  font-size: 1.25rem
}
.p-sustainability .marquee-qualifications {
  margin-top: 4rem
}
.p-sustainability .section-poster {
  margin-top: 3rem
}
.p-sustainability .poster-list {
  --columns: 2;
  --gap: 2rem
}
.p-sustainability :is(.poster-item, .poster-title, .poster-content, .poster-desc) {
  transition-timing-function: var(--default-timing-function);
  transition-duration: .5s
}
.p-sustainability .poster-item {
  position: relative;
  transition-property: color
}
.p-sustainability .poster-item.is-dark {
  color: #fff
}
.p-sustainability .poster-item:hover {
  color: #000
}
.p-sustainability .poster-item:hover .poster-content {
  background-color: #fff;
  transform: translateY(-2rem)
}
.p-sustainability .poster-item:hover .poster-title {
  border-bottom-color: #ddd9d4
}
.p-sustainability .poster-item:hover .poster-desc {
  height: calc(var(--scroll-height)*1px)
}
.p-sustainability .poster-image {
  display: block;
  width: 100%;
  aspect-ratio: 880/640;
  object-fit: cover
}
.p-sustainability .poster-content {
  position: absolute;
  inset: auto 0 0;
  margin: 0 2rem;
  padding: 2rem 2rem 3rem;
  background-color: #fff;
  color: #000;
  transition-property: background-color, transform
}
.p-sustainability .poster-title {
  font-size: 1.875rem;
  padding: .5rem 0;
  border-bottom-width: 1px;
  border-bottom-color: hsla(0, 0%, 100%, .25);
  transition-property: border-color
}
.p-sustainability .poster-desc {
  margin-top: 1rem;
  height: 1.5em;
  overflow: hidden;
  transition-property: height
}
.p-sustainability .material-list {
  --gap: 2rem;
  --columns: 6
}
.p-sustainability .material-item {
  background-color: rgba(245, 245, 240, .5);
  padding: 2rem;
  text-align: center;
  font-size: 1.25rem
}
.p-sustainability .material-image {
  width: 11.25rem;
  height: 11.25rem;
  object-fit: contain;
  margin: 4rem auto 0
}
.p-sustainability .section-sustainability {
  margin-top: 11.25rem;
  overflow: hidden;
  background: url("../images/sustainability-lab-bg.webp") content-box center/cover no-repeat
}
.p-sustainability .section-sustainability .panel {
  margin: 8.75rem auto 21.25rem;
  max-width: 40.625rem;
  padding: 2.5rem 2rem 3.5rem
}
.p-sustainability .footer-contact {
  margin-top: 0;
  position: relative
}
@media screen and (max-width: 750px) {
  .p-sustainability .page-banner {
    min-height: 100vh
  }
  .p-sustainability .page-banner .heading {
    font-size: 3rem;
    margin-top: 40vh
  }
  .p-sustainability .page-banner .desc {
    font-size: .875rem;
    margin: 1rem auto;
    width: 75%
  }
  .p-sustainability .section-desc {
    margin-top: 1rem
  }
  .p-sustainability .social-compliance {
    margin-top: 4rem
  }
  .p-sustainability .social-compliance .marquee-title {
    font-size: .875rem
  }
  .p-sustainability .marquee-qualifications {
    margin-top: 2rem
  }
  .p-sustainability .section-poster {
    margin-top: 4rem
  }
  .p-sustainability .poster-list {
    --columns: 1
  }
  .p-sustainability .poster-item:hover .poster-content {
    transform: none
  }
  .p-sustainability .poster-content {
    padding: .75rem;
    margin: .75rem
  }
  .p-sustainability .poster-title {
    font-size: 1rem
  }
  .p-sustainability .poster-desc {
    font-size: .75rem;
    margin-top: .5rem
  }
  .p-sustainability .material-list {
    --columns: 2;
    --gap: 0.5rem
  }
  .p-sustainability .material-item {
    padding: 1rem .5rem
  }
  .p-sustainability .material-title {
    font-size: .875rem
  }
  .p-sustainability .material-image {
    margin-top: 1rem;
    width: 7rem;
    height: 7rem
  }
  .p-sustainability .section-sustainability {
    margin-top: 4rem
  }
  .p-sustainability .section-sustainability .panel {
    margin: 4rem var(--page-padding-x) 12rem;
    padding: 2rem 1.25rem
  }
}
.p-news-list .page-header .desc {
  max-width: 90%
}
.p-news-list .banner-wrapper {
  position: relative
}
.p-news-list .banner-wrapper .news-item {
  position: absolute;
  inset: auto 8rem 2.5rem;
  background-color: #fff;
  padding: 3rem 4rem
}
.p-news-list .banner-wrapper .news-title {
  margin-top: .5rem
}
.p-news-list .banner-wrapper .news-view {
  margin-top: 1rem
}
.p-news-list .banner-wrapper .news-view .icon-arrow {
  margin-left: 1rem;
  overflow: hidden
}
.p-news-list .banner-wrapper ~ .news-list {
  margin-top: 10rem
}
.p-news-list .news-list {
  max-width: 87.5rem;
  margin-left: auto;
  margin-right: auto
}
@media screen and (max-width: 750px) {
  .p-news-list .banner-wrapper .news-item {
    inset: auto .5rem .75rem;
    padding: 1.25rem
  }
  .p-news-list .banner-wrapper .news-view .icon-arrow {
    width: 1.5rem;
    height: 1.25rem;
    margin-left: .5rem
  }
  .p-news-list .banner-wrapper ~ .news-list {
    margin-top: 3rem
  }
}
.p-business .page-header .desc {
  max-width: 80%
}
.p-business .video-wrapper {
  position: relative
}
.p-business .video-wrapper.played :is(.page-banner, .icon-play) {
  display: none
}
.p-business .poster-list {

  display: flex;
  flex-wrap: wrap;
  gap: 2rem
}
.p-business .poster-item {
  flex: 0 0 calc(50% - 1rem);
  --columns: 1;
  padding-top: 0;
  padding-bottom: 2rem;
  border-top-width: 0;
  position: static;
  background-color: transparent
}
.p-business .poster-item .richtext {
  font-size: 1.25rem;
  margin-top: 1rem
}
.p-business .poster-info {
  padding-right: 0
}
.p-business .poster-title {
  font-size: 3rem;
  text-transform: uppercase
}
.p-business .poster-image {
  width: 100%;
  aspect-ratio: 880/520;
  object-fit: cover;
  transition-property: filter;
  transition-timing-function: var(--default-timing-function);
  transition-duration: .5s;
  filter: grayscale(1)
}
.p-business .poster-item.active .poster-image {
  filter: none
}
@media screen and (max-width: 750px) {
  .p-business .poster-list {
    margin-top: 4rem;
    gap: 1rem
  }
  .p-business .poster-item {
    flex: 0 0 100%;
    --columns: 1;
    --gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem
  }
  .p-business .poster-info {
    padding-right: 0
  }
  .p-business .poster-info .richtext {
    font-size: .875rem;
    margin-top: auto
  }
  .p-business .poster-title {
    font-size: 1.5rem
  }
}
.lightbox-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(20, 20, 25, .94) 0%, rgba(8, 8, 12, .98) 100%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
  pointer-events: none;
  padding: 2rem
}
.lightbox-overlay::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(197, 154, 79, .04), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease
}
.lightbox-overlay.show::before {
  opacity: 1
}
.lightbox-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}
.lightbox-overlay .lightbox-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center
}
.lightbox-overlay .lightbox-title {
  color: rgba(255, 255, 255, .85);
  font-size: 1.25rem;
  text-align: center;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease .2s, transform .4s ease .2s;
  letter-spacing: .05em
}
.lightbox-overlay.show .lightbox-title {
  opacity: 1;
  transform: translateY(0)
}
.lightbox-overlay .lightbox-img-wrap {
  position: relative;
  display: inline-block
}
.lightbox-overlay .lightbox-img-wrap::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(197, 154, 79, .3), rgba(197, 154, 79, .05) 50%, rgba(197, 154, 79, .2));
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0
}
.lightbox-overlay.show .lightbox-img-wrap::after {
  opacity: 1;
  transition-delay: .2s
}
.lightbox-overlay .lightbox-img {
  max-width: 80vw;
  max-height: 65vh;
  object-fit: contain;
  cursor: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(197, 154, 79, .15), 0 30px 80px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .4);
  transform: scale(.88);
  opacity: 0;
  transition: transform .5s cubic-bezier(.25, .8, .25, 1.15), opacity .4s ease, box-shadow .5s ease;
  display: block;
  position: relative;
  z-index: 1
}
.lightbox-overlay.show .lightbox-img {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(197, 154, 79, .25), 0 40px 100px rgba(0, 0, 0, .65), 0 15px 40px rgba(0, 0, 0, .45)
}
.lightbox-overlay .lightbox-lens {
  display: none;
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(197, 154, 79, .5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5), inset 0 0 12px rgba(0, 0, 0, .2), 0 0 0 4px rgba(197, 154, 79, .12);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .15s
}
.lightbox-overlay .lightbox-close {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: color .3s, transform .4s cubic-bezier(.25, .8, .25, 1.2);
  z-index: 10
}
.lightbox-overlay .lightbox-close:hover {
  color: #c59a4f;
  transform: rotate(90deg) scale(1.2)
}
.lightbox-overlay .lightbox-thumbs {
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease .3s, transform .4s ease .3s
}
.lightbox-overlay.show .lightbox-thumbs {
  opacity: 1;
  transform: translateY(0)
}
.lightbox-overlay .lightbox-thumbs .thumb-item {
  width: 72px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .3s, opacity .3s, transform .2s;
  opacity: .45
}
.lightbox-overlay .lightbox-thumbs .thumb-item:hover {
  opacity: .85;
  transform: translateY(-2px)
}
.lightbox-overlay .lightbox-thumbs .thumb-item.active {
  border-color: #c59a4f;
  opacity: 1
}
.lightbox-overlay .lightbox-thumbs .thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
@keyframes share-media-show {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
.p-news-details .top {
  background-color: #f5f5f0;
  margin-top: -7.125rem
}
.p-news-details .top-row-1 {
  padding-top: 20rem;
  padding-bottom: 6rem
}
.p-news-details .top-row-2 {
  padding-top: 3rem;
  padding-bottom: 6rem;
  border-top-width: 1px;
  border-top-color: #ddd9d4;
  align-items: flex-start
}
.p-news-details .date-number {
  display: inline-block;
  font-size: 8.75rem;
  line-height: .75;
  vertical-align: top;
  margin-right: 2rem
}
.p-news-details .date {
  display: inline-block;
  font-size: 1.25rem
}
.p-news-details .col-left {
  --size: 4
}
.p-news-details .col-right {
  --size: 8
}
.p-news-details .page-content {
  margin-top: 4rem
}
.p-news-details .heading {
  font-size: 3rem;
  line-height: 4rem
}
.p-news-details .desc {
  position: relative;
  padding-left: 1rem;
  font-size: 1.25rem;
  font-weight: 500
}
.p-news-details .desc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 2px;
  height: 80%;
  background-color: #937143
}
.p-news-details .share-list {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem
}
.p-news-details .share {
  display: inline-flex;
  align-items: center
}
.p-news-details .icon-share {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .25rem
}
.p-news-details .icon-share svg {
  width: 100%;
  height: 100%
}
.p-news-details .share-media {
  display: none
}
.p-news-details .share.open ~ .share-media {
  display: block;
  animation: share-media-show .35s both
}
.p-news-details .share.open ~ .icon-facebook {
  animation-delay: .05s
}
.p-news-details .share.open ~ .icon-twitter {
  animation-delay: .1s
}
.p-news-details .share-media svg {
  width: 1.5rem;
  height: 1.5rem
}
.p-news-details .sidebar {
  padding-right: 16rem;
  position: sticky;
  top: 8rem
}
.p-news-details .news2 {
  display: block;
  position: relative;
  border-bottom-width: 1px;
  border-bottom-color: #ddd9d4;
  padding-bottom: 1.5rem
}
.p-news-details .news2 .icon-arrow {
  position: absolute;
  right: 0
}
.p-news-details .news2:not(:first-child) {
  padding-top: 1.5rem
}
.p-news-details .news2-number {
  font-size: 3rem;
  vertical-align: top;
  line-height: 1;
  margin-right: .5rem
}
.p-news-details .news2-title {
  margin-top: 1rem
}
.p-news-details .footer2 {
  display: flex;
  justify-content: space-between;
  border-top-width: 1px;
  border-top-color: #ddd9d4;
  margin-top: 6rem;
  padding: 2rem 0
}
.p-news-details .action {
  display: flex;
  align-items: center
}
.p-news-details .action svg {
  width: 100%;
  height: 100%
}
.p-news-details .action .icon {
  width: 1.5rem;
  height: 1.5rem
}
.p-news-details .action-next .icon {
  margin-left: .5rem
}
.p-news-details :is(.action-back, .action-prev) .icon {
  margin-right: .5rem
}
.p-news-details .action-prev .icon {
  transform: rotate(-180deg)
}
.p-news-details .action:hover {
  text-decoration: underline
}
@media screen and (max-width: 750px) {
  .p-news-details .col-left, .p-news-details .col-right {
    --size: 12
  }
  .p-news-details .top-row-1 {
    padding-top: 12rem;
    padding-bottom: 2rem
  }
  .p-news-details .top-row-2 {
    padding-top: 2rem;
    padding-bottom: 4rem
  }
  .p-news-details .date-number {
    font-size: 4rem;
    margin-right: .5rem
  }
  .p-news-details .heading {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-top: 2rem
  }
  .p-news-details .desc {
    font-size: .875rem;
    margin-top: .5rem
  }
  .p-news-details .desc::before {
    height: 90%;
    top: 5%
  }
  .p-news-details .sidebar {
    padding-right: 0
  }
  .p-news-details .footer2 {
    margin-top: 4rem;
    font-size: .75rem
  }
  .p-news-details .news2-title {
    font-size: .875rem
  }
  .p-news-details .news2-number {
    font-size: 2.5rem
  }
  .p-news-details .page-content {
    --row-gap: 4rem;
    flex-wrap: wrap-reverse
  }
}
.p-contact {
  padding-top: 0;
  background-color: #f5f5f0
}
.p-contact .contact-btn {
  display: none
}
.p-contact .footer-contact {
  display: none
}
.p-contact .map-container {
  position: relative
}
.p-contact .marker {
  position: absolute;
  top: 0;
  left: 0
}
@keyframes marker-point {
  100% {
    opacity: 0;
    transform: scale(3)
  }
}
.p-contact .marker-point {
  position: relative;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: #937143
}
.p-contact .marker-point::before, .p-contact .marker-point::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  inset: 0;
  margin: auto;
  background-color: inherit;
  border-radius: inherit
}
.p-contact .marker-point::before {
  transform: scale(1.625);
  opacity: .25
}
.p-contact .marker-point::after {
  opacity: .5;
  animation: marker-point 1s linear infinite
}
.p-contact .marker-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1.25rem;
  white-space: nowrap
}
.p-contact .marker-name-top {
  bottom: 100%;
  margin-bottom: .5rem
}
.p-contact .marker-name-bottom {
  top: 100%;
  margin-top: .5rem
}
.p-contact .marker-china {
  left: 74%;
  top: 36%
}
.p-contact .marker-china .marker-point {
  width: 1.5rem;
  height: 1.5rem
}
.p-contact .marker-usa {
  left: 28%;
  top: 33%
}
.p-contact .marker-europe {
  left: 49.5%;
  top: 31%
}
.p-contact .marker-russia {
  left: 57%;
  top: 25%
}
.p-contact .marker-korea {
  left: 80%;
  top: 34%
}
.p-contact .marker-japan {
  left: 85%;
  top: 32%
}
.p-contact .call-to-contact {
  position: relative;
  margin-top: -28rem;
  padding-bottom: 8rem;

}
.p-contact .call-to-contact .title {
  text-align: center;
  font-size: 3rem
}
.p-contact .arrow-btn {
  font-size: 1.875rem;
  width: 90%;
  display: block;
  margin: 2rem auto 0
}
@media screen and (max-width: 750px) {
  .p-contact .map-wrapper {
    overflow: auto
  }
  .p-contact .map-container {
    min-width: 75rem
  }
  .p-contact .marker-name {
    font-size: .625rem
  }
  .p-contact .marker-point {
    width: .5rem;
    height: .5rem
  }
  .p-contact .marker-china .marker-point {
    width: .625rem;
    height: .625rem
  }
  .p-contact .call-to-contact {
    margin-top: -16rem;
    padding-bottom: 6rem
  }
  .p-contact .call-to-contact .title {
    font-size: 1.5rem
  }
  .p-contact .arrow-btn {
    font-size: .75rem;
    width: 75%
  }
}
.p-product-list .category-banner {
  position: relative;


  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff
}
.p-product-list .category-banner .link {
  position: relative;
  font-size: 6.75rem;
  display: block;
  line-height: 1.25;
  text-align: center;

  transition-property: color;
  transition-timing-function: var(--default-timing-function);
  transition-duration: .5s
}
.p-product-list .category-banner .link.active {
  mix-blend-mode: difference;
  z-index: 2;
  color: #fff
}
.p-product-list .category-banner .link.inactive {
  color: rgba(0, 0, 0, .25)
}
.p-product-list .category-banner .number {
  display: inline-block;
  font-size: 1.25rem;
  vertical-align: top;
  margin-left: 1rem;
  margin-top: 1rem
}
@keyframes image-show {
  0% {
    filter: blur(5px);
    transform: scale(0.98);
    opacity: 0
  }
  100% {
    filter: none;
    transform: none;
    opacity: 1
  }
}
.p-product-list .category-banner .product {
  width: 25rem;
  position: absolute;
  top: calc(var(--top, 0)*1px);
  left: calc(var(--left, 0)*1px);
  display: none;
  pointer-events: none;
  animation-name: image-show;
  animation-duration: .75s;
  animation-timing-function: var(--default-timing-function);
  animation-fill-mode: both
}
.p-product-list .category-banner .product:nth-child(1) {
  animation-delay: .1s
}
.p-product-list .category-banner .product:nth-child(2) {
  animation-delay: .2s
}
.p-product-list .category-banner .product:nth-child(3) {
  animation-delay: .3s
}
.p-product-list .category-banner .product:nth-child(4) {
  animation-delay: .4s
}
.p-product-list .category-banner .product:nth-child(5) {
  animation-delay: .5s
}
.p-product-list .category-banner .product:nth-child(6) {
  animation-delay: .6s
}
.p-product-list .category-banner .product:nth-child(7) {
  animation-delay: .7s
}
.p-product-list .category-banner .product:nth-child(8) {
  animation-delay: .8s
}
.p-product-list .category-banner .product:nth-child(9) {
  animation-delay: .9s
}
.p-product-list .category-banner .product:nth-child(10) {
  animation-delay: 1s
}
.p-product-list .category-banner .product-large-a {
  z-index: 1;
  top: 8.59375vw;
  left: 26.0416666667vw
}
.p-product-list .category-banner .product-large-b {
  z-index: 1;
  top: 19.0104166667vw;
  left: 55.46875vw
}
.p-product-list .category-banner .product-medium-a {
  width: 17.1875rem;
  left: 6.25vw;
  top: 26.0416666667vw
}
.p-product-list .category-banner .product-medium-b {
  width: 17.1875rem;
  left: auto;
  right: 6.25vw;
  top: 10.4166666667vw
}
.p-product-list .category-banner .product-small {
  width: 11.25rem
}
.p-product-list .category-banner .desc {
  margin: 2rem auto 0;
  max-width: 80%;
  text-align: center;
  padding: 0 1.5rem;
	font-size: 16px;
}
.p-product-list .product .image-wrapper {
  overflow: hidden
}
.p-product-list .product .image {
  width: 100%;
  aspect-ratio: 400/500;
  object-fit: cover;
  transform: scale(1.01);
  transition-property: transform;
  transition-timing-function: var(--default-timing-function);
  transition-duration: .5s
}
.p-product-list .product .name {
  font-size: 1.25rem;
  margin-top: .5rem
}
.p-product-list .product:hover .image {
  transform: scale(1.15)
}
.p-product-list .tab {
  --columns: 4;
  --gap: 2rem;
  padding: 6rem 0
}
.p-product-list .tab-link {
  font-size: 1.25rem;
  text-align: center;

  padding: 2rem 0;
  border-bottom-width: 1px;
  transition-property: color, box-shadow;
  transition-timing-function: var(--default-timing-function);
  transition-duration: var(--default-duration)
}
.p-product-list .tab-link:not(:hover, .active) {
  color: rgba(0, 0, 0, .25)
}
.p-product-list .tab-link:is(:hover, .active) {
  box-shadow: 0 1px 0 0 currentColor
}
@media screen and (max-width: 750px) {
  .p-product-list .category-banner {
    min-height: 100vh
  }
  .p-product-list .category-banner .link {
    font-size: 2.25rem
  }
  .p-product-list .category-banner .number {
    font-size: .75rem;
    margin-left: 1rem;
    margin-top: 0
  }
  .p-product-list .category-banner .product {
    width: 9.375rem
  }
  .p-product-list .category-banner .product-large-a {
    left: 1.25rem;
    top: 5rem
  }
  .p-product-list .category-banner .product-large-b {
    left: 11.25rem;
    top: 25rem
  }
  .p-product-list .category-banner .product-medium-a {
    width: 6.25rem;
    left: 2.5rem;
    top: 31.25rem
  }
  .p-product-list .category-banner .product-medium-b {
    width: 6.25rem;
    top: 8rem;
    right: 2.5rem
  }
  .p-product-list .category-banner .product-small {
    width: 4.6875rem
  }
  .p-product-list .category-banner .desc {
    font-size: .75rem;
    margin-top: 1rem
  }
  .p-product-list .tab {
    --columns: 2;
    --gap: 0.5rem;
    padding: 2rem 0
  }
  .p-product-list .tab-link {
    font-size: .75rem;
    padding: .75rem .5rem
  }
  .p-product-list .product .name {
    font-size: .75rem
  }
}
.p-product-details .page-header .desc {
  max-width: 48rem
}
.p-product-details .splide .splide__list {
  align-items: center
}
.p-product-details .splide .splide__slide {
  position: relative;
  width: 30rem;
  margin-right: 1rem;
  transition-property: transform, opacity;
  transition-duration: .25s;
  transition-timing-function: ease-in-out;
  opacity: .5
}
.p-product-details .splide .splide__slide.is-active:not(.splide__slide--clone) {
  width: 40rem
}
.p-product-details .splide .splide__slide.is-active:not(.splide__slide--clone)::after {
  content: "";
  display: block;
  padding-top: 125%
}
.p-product-details .splide .splide__slide.is-active:not(.splide__slide--clone) .image {
  position: absolute;
  margin: auto;
  width: 30rem;
  inset: 0;
  transform: scale(1.333)
}
.p-product-details .splide .splide__slide:is(.is-active, .is-prev, .is-next) {
  opacity: 1
}
.p-product-details .splide .image {
  width: 100%;
  aspect-ratio: 4/5;
  transition: transform .25s ease-in-out
}
.p-product-details .splide .splide__arrow {
  position: absolute;
  z-index: 1;
  width: 4rem;
  height: 4rem;
  top: 50%;
  margin-top: -2rem;
  border-radius: 9999px;
  border-width: 2px;
  border-color: #c59a4f;
  color: #fff;
  background-color: rgba(197, 154, 79, .85);
  transition-property: background-color, color;
  transition-timing-function: var(--default-timing-function);
  transition-duration: var(--default-duration);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}
.p-product-details .splide .splide__arrow svg {
  width: 1.5rem;
  height: 1.5rem
}
.p-product-details .splide .splide__arrow:hover {
  background-color: #c59a4f;
  border-color: #c59a4f;
  color: #fff
}
.p-product-details .splide .splide__arrow--prev {
  left: 4rem
}
.p-product-details .splide .splide__arrow--prev svg {
  transform: rotate(180deg)
}
.p-product-details .splide .splide__arrow--next {
  right: 4rem
}
.p-product-details .more-products {
  width: 40rem;
  margin: 6rem auto 0;
  display: flex;
  gap: .75rem
}
.p-product-details .more-products .image {
  width: 6rem;
  height: 6rem;
  aspect-ratio: 1;
  object-fit: cover
}
.p-product-details .more-products .btn {
  background-color: #f5f5f0;
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: .5rem
}
@media screen and (max-width: 750px) {
  .p-product-details .splide .splide__slide {
    width: 12rem
  }
  .p-product-details .splide .splide__slide.is-active:not(.splide__slide--clone) {
    width: 15rem
  }
  .p-product-details .splide .splide__slide.is-active:not(.splide__slide--clone) .image {
    width: 12rem;
    transform: scale(1.25)
  }
  .p-product-details .splide .splide__arrow {
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem
  }
  .p-product-details .splide .splide__arrow svg {
    width: 1rem;
    height: 1rem
  }
  .p-product-details .splide .splide__arrow--prev {
    left: var(--page-padding-x)
  }
  .p-product-details .splide .splide__arrow--next {
    right: var(--page-padding-x)
  }
  .p-product-details .more-products {
    width: auto;
    flex-wrap: wrap;
    margin-top: 2rem
  }
  .p-product-details .more-products a:not(.btn) {
    width: 0;
    height: auto;
    flex: 1 1 0%
  }
  .p-product-details .more-products .image {
    width: 100%;
    height: auto
  }
  .p-product-details .more-products .btn {
    width: 100%;
    height: 6rem
  }
}