@font-face {
  font-family: DrukHeavy;
  src: url("fonts/Druk-Heavy.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: DrukMedium;
  src: url("fonts/Druk-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Clarion;
  src: url("fonts/Clarion.woff2") format("woff2");
  font-display: swap;
}
.scout-hero,
.scout-hero * {
  box-sizing: border-box;
}
.scout-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  --glass-object-scale: 0.72;
  color: #231f20;
  font-family: Clarion, Georgia, serif;
}
.scout-hero[data-take="final"] {
  --glass-object-scale: 0.8;
}
.scout-hero button,
.scout-hero input {
  font: inherit;
}
.scout-hero button {
  cursor: pointer;
}
.scout-hero [hidden] {
  display: none !important;
}
.scout-hero button:focus-visible,
.scout-hero a:focus-visible,
.scout-hero input:focus-visible {
  outline: 2px solid #b71d32;
  outline-offset: 5px;
}
.scout-hero .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;
}
.scout-hero {
  height: calc(
    100svh - var(--scout-header-height, var(--scout-theme-header-height, 0px))
  );
  --scout-header-offset: var(
    --scout-header-height,
    var(--scout-theme-header-height, 0px)
  );
  min-height: 0;
  position: relative;
  overflow: clip;
  background: #514534;
  isolation: isolate;
}
.scout-hero--visual {
  height: clamp(430px, 75vw, 760px);
  min-height: 0;
  overflow: clip;
  background: transparent;
}
.scout-hero--visual .mountain-background,
.scout-hero--visual .atmosphere,
.scout-hero--visual .hero-copy,
.scout-hero--visual .hero-controls {
  display: none;
}
.scout-hero .mountain-background {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,18,23,.67) 0%, rgba(8,18,23,.49) 43%, rgba(8,18,23,.22) 78%),
    url("assets/background-seedream.webp") center center/cover no-repeat;
}
.scout-hero .artboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}
.scout-hero:not(.layout-ready) .artboard {
  visibility: hidden;
}
.scout-hero .scene {
  position: absolute;
  inset: 0;
}
.scout-hero .product {
  position: absolute;
  left: var(--product-left, 795px);
  top: var(--product-top, 20px);
  width: calc(4098px * var(--product-scale, 0.33));
  height: calc(3362px * var(--product-scale, 0.33));
}
.scout-hero .product-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.scout-hero .horse-stage {
  position: absolute;
  left: calc(2160px * var(--product-scale, 0.33));
  top: calc(1535px * var(--product-scale, 0.33));
  width: calc(590px * var(--product-scale, 0.33));
  height: calc(590px * var(--product-scale, 0.33));
  pointer-events: none;
}
.scout-hero .horse-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scout-hero .horse-stage > video {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0 !important;
  pointer-events: none;
}
.scout-hero.motion-disabled .horse-canvas {
  visibility: hidden;
}
.scout-hero .glass-stage {
  position: absolute;
  left: calc(1340px * var(--product-scale, 0.33));
  top: calc(2030px * var(--product-scale, 0.33));
  width: calc(750px * var(--product-scale, 0.33));
  height: calc(990px * var(--product-scale, 0.33));
  transform: scale(var(--glass-object-scale, 0.72));
  transform-origin: 50% 98.384%;
}
.scout-hero .glass-canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.scout-hero .glass-control {
  position: absolute;
  left: 1237.2px;
  top: 689.9px;
  width: 247.5px;
  height: 326.7px;
  border: 0;
  background: none;
  border-radius: 17% 17% 12% 12%;
  padding: 0;
  cursor: grab;
  transform: translate(var(--glass-shift-x, 0px), calc(-1 * var(--glass-lift, 0px))) rotate(var(--glass-rotation, 0deg)) scale(var(--glass-object-scale, 0.72));
  transform-origin: 50% 98.384%;
  touch-action: pan-y;
}
.scout-hero .glass-control:active {
  cursor: grabbing;
}
.scout-hero .glass-control:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 7px;
  box-shadow: 0 0 0 10px #231f2055;
}
.scout-hero .glass-control:disabled {
  cursor: default;
}
.scout-hero .cliff-ledge {
  position: absolute;
  left: calc(var(--product-left) + 100px * var(--product-scale));
  top: calc(var(--product-top) + 2200px * var(--product-scale));
  width: calc(4200px * var(--product-scale));
  height: calc(1900px * var(--product-scale));
  pointer-events: none;
}
.scout-hero .cliff-ledge img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.scout-hero .contact-shadow {
  position: absolute;
  width: calc(760px * var(--product-scale));
  height: calc(95px * var(--product-scale));
  margin-left: calc(-380px * var(--product-scale));
  margin-top: calc(-43px * var(--product-scale));
  background:
    radial-gradient(ellipse, #18140e8c 0%, #18140e45 28%, transparent 69%);
  pointer-events: none;
}
.scout-hero .contact-shadow::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 42%;
  height: 12%;
  background: radial-gradient(ellipse, #15110ab3 12%, #15110a66 42%, transparent 72%);
}
.scout-hero .bottle-contact {
  left: var(--bottle-contact-x);
  top: var(--bottle-contact-y);
}
.scout-hero .glass-contact {
  left: var(--glass-contact-x);
  top: var(--glass-contact-y);
}
.scout-hero .glass-illumination {
  position: absolute;
  inset: -12%;
  background: radial-gradient(ellipse at 50% 68%, #ffd88a85 0%, #ffe5b945 38%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.scout-hero .hero-copy {
  position: absolute;
  left: var(--copy-left, 4%);
  top: var(--copy-top, 80px);
  width: var(--copy-width, 58%);
  text-align: center;
  color: #fff;
}
.scout-hero .headline,
.scout-hero .hero-description {
  color: #fff !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .48);
}
.scout-hero .headline {
  font:
    400 var(--heading-size, 100px) / 1.03 DrukHeavy,
    Impact,
    sans-serif;
  letter-spacing: 0.008em;
  margin: 0;
}
.scout-hero .headline > span {
  display: block;
  white-space: nowrap;
}
.scout-hero .hero-description {
  font:
    400 var(--body-size, 24px) / 1.18 Clarion,
    Georgia,
    serif;
  margin: var(--description-gap, 20px) 0;
  text-wrap: balance;
}
.scout-hero .hero-cta {
  display: inline-flex;
  width: var(--cta-width, 190px);
  height: var(--cta-height, 65px);
  text-decoration: none;
}
.scout-hero .hero-cta svg {
  display: block;
  width: 100%;
  height: 100%;
}
.scout-hero .hero-cta .cta-fill {
  transition: fill 0.18s ease;
}
.scout-hero .hero-cta:hover .cta-fill,
.scout-hero .hero-cta:focus-visible .cta-fill {
  fill: #e4d5b9;
}
.scout-hero .hero-cta:focus-visible {
  outline-color: #fff;
}
.scout-hero .hero-controls {
  position: absolute;
  bottom: 17px;
  left: 24px;
  z-index: 5;
}
.scout-hero .motion-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 13px;
  border: 0;
  background: transparent;
  color: #fff;
  font:
    14px/1.2 Clarion,
    Georgia,
    serif;
  cursor: pointer;
  user-select: none;
}
.scout-hero .motion-toggle:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -16px;
  background: radial-gradient(
    ellipse,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.48) 52%,
    transparent 100%
  );
  filter: blur(7px);
  pointer-events: none;
}
.scout-hero .motion-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.scout-hero .motion-toggle input:focus-visible ~ .motion-track {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.scout-hero .motion-track {
  position: relative;
  display: block;
  flex: none;
  width: 32px;
  height: 18px;
  border: 1px solid #a39c91;
  border-radius: 20px;
  background: #666057;
}
.scout-hero .motion-track:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px #0003;
}
.scout-hero .motion-toggle input:checked ~ .motion-track {
  background: #e4d5b9;
  border-color: #e4d5b9;
}
.scout-hero .motion-toggle input:checked ~ .motion-track:after {
  left: 16px;
  background: #231f20;
}
.scout-hero .motion-state {
  width: 20px;
  font-size: 11px;
}
.scout-hero .atmosphere {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
.scout-hero .ground-fog {
  position: absolute;
  left: -18%;
  bottom: -4%;
  width: 80%;
  height: 52%;
  opacity: 0.67;
  filter: blur(24px);
  background:
    radial-gradient(
      ellipse at 18% 66%,
      rgba(231, 226, 210, 0.23),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 45% 80%,
      rgba(236, 229, 215, 0.17),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 8% 40%,
      rgba(226, 224, 211, 0.14),
      transparent 42%
    );
  mask-image: linear-gradient(to right, #000 28%, transparent 97%);
  animation: scout-fog-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
.scout-hero.atmosphere-paused .ground-fog,
.scout-hero.motion-disabled .ground-fog {
  animation-play-state: paused;
}
@keyframes scout-fog-drift {
  from {
    transform: translateX(-2%) translateY(1%);
  }
  to {
    transform: translateX(3%) translateY(-1%);
  }
}
.scout-hero .scene-entrance {
  position: absolute;
  inset: 0;
  transform: none;
}
@keyframes scout-scene-rise {
  from {
    transform: translateY(var(--product-rise));
    opacity: 0;
  }
  22% { opacity: 1; }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes scout-horse-cue {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scout-hero .ground-fog {
    animation: none;
  }
  .scout-hero .hero-cta .cta-fill {
    transition: none;
  }
}
.scout-hero .mobile-copy-break {
  display: none;
}
.scout-hero.stacked-layout {
  min-height: 0;
}
.scout-hero.stacked-layout .hero-description {
  line-height: 1.16;
  margin: var(--description-gap) 0 0;
}
.scout-hero.stacked-layout .hero-description br {
  display: none;
}
.scout-hero.stacked-layout .hero-cta {
  position: absolute;
  left: 50%;
  top: calc(var(--cta-top) - var(--copy-top));
  transform: translateX(-50%);
  background: #2b2825;
}
.scout-hero.stacked-layout .hero-controls {
  left: 6px;
  right: auto;
  top: var(--mobile-motion-top);
  bottom: auto;
}
.scout-hero.stacked-layout .mountain-background {
  background-image:
    linear-gradient(
      to bottom,
      rgba(8, 18, 23, 0.68),
      rgba(8, 18, 23, 0.53) 37%,
      rgba(8, 18, 23, 0.22) 74%
    ),
    url("assets/background-seedream.webp");
  background-position: center center;
}
.scout-hero.stacked-layout .ground-fog {
  height: 26%;
  opacity: 0.4;
}
.scout-hero.stacked-layout .headline,
.scout-hero.stacked-layout .hero-description {
  text-shadow: 0 1px 6px rgba(0, 0, 0, .48);
}

/* The reviewed dry-rock scene shares the product photograph's source map. */
.scout-hero .cliff-ledge {
  left: calc(var(--product-left) - 4208px * var(--product-scale));
  top: calc(var(--product-top) - 872px * var(--product-scale));
  width: calc(8192px * var(--product-scale));
  height: calc(4608px * var(--product-scale));
}
.scout-hero .product-shadows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scout-hero .contact-shadow {
  background: radial-gradient(ellipse, #17120ec4 0%, #17120e70 30%, #17120e22 53%, transparent 72%);
}
.scout-hero .contact-shadow::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 24%;
  width: 132%;
  height: 140%;
  transform: rotate(7deg);
  background: radial-gradient(ellipse, #19150f60 0%, #19150f2c 38%, transparent 70%);
}
.scout-hero .contact-shadow::after {
  top: 39%;
  height: 20%;
  background: radial-gradient(ellipse, #110e0bd9 5%, #110e0b9c 44%, transparent 72%);
}
.scout-hero .glass-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mask-image: url("assets/glass-outline.png");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.scout-hero:not(.runtime-ready) .glass-canvas {
  visibility: hidden;
}
.scout-hero.runtime-ready .glass-poster {
  display: none;
}
.scout-hero .motion-toggle > span {
  pointer-events: none;
}
.scout-hero .scout-scroll-continue {
  position: fixed;
  z-index: 20;
  right: 24px;
  bottom: 22px;
  padding: 11px 16px;
  border: 1px solid #e4d5b9;
  border-radius: 2px;
  background: rgba(10, 12, 10, .86);
  color: #f6efdf;
  font: 16px Clarion, Georgia, serif;
}
.scout-hero .scout-scroll-continue[hidden] {
  display: none;
}
.scout-hero .scout-scroll-continue:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
@media (max-width: 759px) {
  .scout-hero .scout-scroll-continue {
    right: 16px;
    bottom: 16px;
    padding: 10px 12px;
    font-size: 14px;
  }
}