/* Slider Revolution export: slotfade-horizontal (*east* Gradient).
   The incoming image reveals eastward over the stationary outgoing image. */ .hero.container {
  --hero-gutter:max(56px,calc((100% - 1384px)/2));
  position:relative;
  isolation:isolate;
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  min-height:620px;
  background:#383d32;
  touch-action:pan-y
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(16,22,17,.68) 0%,rgba(16,22,17,.60) 38%,rgba(16,22,17,.18) 70%,rgba(16,22,17,.04) 100%)
}
.hero .hero-visual {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  isolation:isolate;
  z-index:0;
  overflow:hidden
}
.hero .hero-copy {
  position:relative;
  z-index:2;
  width:calc(100% - 112px);
  max-width:1384px;
  min-height:620px;
  margin-inline:auto;
  padding:78px 0 76px;
  background:none;
  color:#fffaf1;
  pointer-events:none;
  justify-content:center
}
.hero-copy>*,.hero-copy button {
  pointer-events:auto
}
.hero-copy .eyebrow {
  color:#f0e8d9;
  font-size:10px;
  letter-spacing:2px;
  max-width:520px
}
.hero-copy h1 {
  max-width:560px;
  font-size:clamp(52px,5.4vw,78px);
  line-height:1.06;
  letter-spacing:-2.2px;
  color:#fffaf1;
  text-shadow:0 2px 24px #10161124
}
.hero-copy h1 em {
  color:#ead8b8
}
.hero-copy .hero-description {
  max-width:390px;
  font-size:14px;
  line-height:1.85;
  color:#f3eee4;
  text-shadow:0 1px 12px #10161130
}
.hero-copy .hero-buttons {
  flex-wrap:wrap;
  gap:28px;
  margin-top:30px
}
.hero-copy .hero-buttons .button {
  min-height:48px;
  padding:13px 23px;
  font-size:12px;
  gap:28px
}
.hero-copy .text-button {
  font-size:12px;
  color:#fffaf1
}
.hero-copy .text-button:hover {
  color:#ead8b8
}
.hero-copy .hero-colors {
  flex-direction:row;
  align-items:center;
  gap:12px;
  margin-top:38px;
  padding-top:0;
  color:#eee4d3;
  font-size:10px
}
.hero-copy .mini-swatches button {
  border-color:#e5ddcfb3
}
.hero-copy :focus-visible {
  outline-color:#fffaf1
}
.hero-visual>img#hero-photo {
  z-index:0;
  transition:none;
  transform:none;
  object-position:50% 50%
}
.hero-visual:hover>img#hero-photo {
  transform:none
}
.hero-visual>.hero-slide-incoming {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:250% 100%;
  mask-size:250% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:100% 0%;
  mask-position:100% 0%;
  will-change:mask-position
}
.hero-slide-incoming>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  max-width:none
}
.hero-visual .photo-label,.hero-visual .material-hotspot,.hero-visual .hero-pagination {
  z-index:2
}
.hero .photo-label {
  right:var(--hero-gutter);
  top:24px
}
.hero .material-hotspot {
  left:auto;
  right:18%;
  top:57%
}
.hero .hero-pagination {
  left:var(--hero-gutter);
  right:var(--hero-gutter);
  bottom:30px;
  justify-content:flex-end
}
.hero-pagination .page-line {
  overflow:hidden;
  direction:ltr
}
.hero-pagination .page-line:before {
  width:var(--slide-progress,33.333%);
  transition:width .3s ease
}
.hero-slide-status {
  position:absolute;
  overflow:hidden;
  clip:rect(0,0,0,0);
  width:1px;
  height:1px;
  white-space:nowrap
}
.hero-slider-error {
  position:absolute;
  bottom:65px;
  left:20px;
  right:20px;
  z-index:3;
  padding:10px 15px;
  background:#faf9f6;
  color:#302d28;
  font-size:12px;
  text-align:center;
  box-shadow:0 4px 20px #0002
}
.hero-slider-error[hidden] {
  display:none
}
[dir=rtl] .hero::before {
  background:linear-gradient(270deg,rgba(16,22,17,.68) 0%,rgba(16,22,17,.60) 38%,rgba(16,22,17,.18) 70%,rgba(16,22,17,.04) 100%)
}
[dir=rtl] .hero .material-hotspot {
  right:auto;
  left:18%
}
@media(max-width:1100px) {
  .hero.container {
    --hero-gutter:32px
  }
  .hero .hero-copy {
    width:calc(100% - 64px)
  }
  .hero-copy h1 {
    max-width:500px;
    font-size:60px
  }
  .hero .material-hotspot {
    right:9%
  }
  [dir=rtl] .hero .material-hotspot {
    left:9%;
    right:auto
  }
}
@media(max-width:700px) {
  .hero.container {
    --hero-gutter:24px;
    min-height:590px
  }
  .hero::before,[dir=rtl] .hero::before {
    background:linear-gradient(180deg,rgba(16,22,17,.59) 0%,rgba(16,22,17,.64) 72%,rgba(16,22,17,.25) 100%)
  }
  .hero .hero-copy {
    width:calc(100% - 48px);
    min-height:590px;
    padding:68px 0 110px;
    justify-content:center
  }
  .hero-copy .eyebrow {
    font-size:9px;
    letter-spacing:1.4px;
    margin-bottom:20px
  }
  .hero-copy h1 {
    font-size:clamp(42px,10vw,56px);
    line-height:1.08;
    letter-spacing:-1.3px;
    margin-bottom:20px
  }
  .hero-copy .hero-description {
    font-size:13px;
    max-width:350px;
    line-height:1.85
  }
  .hero-copy .hero-buttons {
    gap:24px;
    margin-top:27px
  }
  .hero-copy .hero-buttons .button {
    min-height:46px;
    padding:12px 18px;
    font-size:11px;
    gap:22px
  }
  .hero-copy .hero-buttons .text-button {
    font-size:11px
  }
  .hero-copy .hero-colors {
    display:none
  }
  .hero-visual>img#hero-photo,.hero-slide-incoming>img {
    object-position:58% 50%
  }
  .hero .photo-label {
    top:20px;
    font-size:7px
  }
  .hero .hero-pagination {
    left:24px;
    right:auto;
    bottom:30px
  }
  .hero .material-hotspot,[dir=rtl] .hero .material-hotspot {
    left:auto;
    right:20px;
    top:auto;
    bottom:20px;
    width:44px;
    height:44px;
    justify-content:center
  }
  .hero .material-hotspot .hotspot-label {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-slide-incoming {
    will-change:auto
  }
  .hero-pagination .page-line:before {
    transition:none
  }
}