:root {
  color-scheme: dark;
  --source-width: 941;
  --source-height: 1672;
  --ink: #fff8eb;
  --accent: #e5b25d;
  --shadow: #160d08;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--shadow);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--shadow);
  color: var(--ink);
  font-family: Tahoma, Arial, sans-serif;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
  background: var(--shadow);
}

.hero__visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

.hero__stage {
  position: absolute;
  isolation: isolate;
  top: 50%;
  left: 50%;
  width: max(100vw, calc(100svh * 941 / 1672));
  aspect-ratio: 941 / 1672;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
}

.motion-haze,
.motion-rays {
  mix-blend-mode: screen;
}

.motion-dust-far,
.motion-dust-mid,
.motion-dust-near,
.motion-bokeh-far,
.motion-bokeh-mid,
.motion-bokeh-near {
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}

.hero__base,
.hero__base-picture,
.hero__base-picture > img,
.motion-layer,
.motion-layer > picture,
.motion-layer > picture > img,
.motion-layer > img,
.leaf-primary,
.leaf-secondary,
.leaf-secondary > picture,
.leaf-secondary > picture > img,
.leaf-secondary > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__base,
.hero__base-picture,
.hero__base-picture > img,
.motion-layer > picture,
.motion-layer > picture > img,
.motion-layer > img,
.leaf-secondary > picture,
.leaf-secondary > picture > img,
.leaf-secondary > img {
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.hero__base-picture,
.motion-layer > picture,
.leaf-secondary > picture { display: block; }

.motion-layer,
.leaf-primary,
.leaf-secondary {
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.leaf-primary--top,
.leaf-secondary--top {
  transform-origin: 8.7141% 12.2608%;
}

.leaf-primary--bottom,
.leaf-secondary--bottom {
  transform-origin: 91.9235% 74.701%;
}

.motion-capable .motion-layer,
.motion-capable .leaf-primary,
.motion-capable .leaf-secondary {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.motion-capable .motion-haze { animation: haze 19.6s ease-in-out -3.2s infinite alternate; }
.motion-capable .motion-rays { animation: rays 14.8s ease-in-out -1.7s infinite alternate; }
.motion-capable .motion-dust-far { animation: dust-far 19.3s ease-in-out -4.1s infinite alternate; }
.motion-capable .motion-bokeh-far { animation: bokeh-far 22.3s ease-in-out -5.2s infinite alternate; }
.motion-capable .motion-dust-mid { animation: dust-mid 15.7s ease-in-out -1.9s infinite alternate; }
.motion-capable .motion-bokeh-mid { animation: bokeh-mid 18.1s ease-in-out -2.8s infinite alternate; }
.motion-capable .motion-dust-near { animation: dust-near 12.9s ease-in-out -.8s infinite alternate; }
.motion-capable .motion-bokeh-near { animation: bokeh-near 15.7s ease-in-out -.4s infinite alternate; }
.motion-capable .leaf-primary--top { animation: leaf-top-primary 10.8s ease-in-out 0s infinite alternate; }
.motion-capable .leaf-secondary--top { animation: leaf-top-secondary 6.7s ease-in-out -1.3s infinite alternate; }
.motion-capable .leaf-primary--bottom { animation: leaf-bottom-primary 12.4s ease-in-out -2.6s infinite alternate; }
.motion-capable .leaf-secondary--bottom { animation: leaf-bottom-secondary 7.9s ease-in-out -2.1s infinite alternate; }

.motion-capable .motion-rays,
.motion-capable .motion-dust-near,
.motion-capable .motion-bokeh-near,
.motion-capable .leaf-primary,
.motion-capable .leaf-secondary {
  will-change: transform, opacity;
}

.is-paused .motion-layer,
.is-paused .leaf-primary,
.is-paused .leaf-secondary {
  animation-play-state: paused !important;
}

@keyframes haze {
  from { transform: translate3d(-2.5px, -3px, 0); opacity: .965; }
  to { transform: translate3d(3px, 2px, 0); opacity: 1; }
}

@keyframes rays {
  from { transform: translate3d(-.8px, -.8px, 0) rotate(-.16deg); opacity: .95; }
  to { transform: translate3d(1.5px, 1px, 0) rotate(.2deg); opacity: 1; }
}

@keyframes dust-far {
  from { transform: translate3d(-.7px, -1.2px, 0); opacity: .95; }
  to { transform: translate3d(.9px, .8px, 0); opacity: 1; }
}

@keyframes dust-mid {
  from { transform: translate3d(-1.4px, -2.4px, 0); opacity: .92; }
  to { transform: translate3d(1.7px, 1.2px, 0); opacity: 1; }
}

@keyframes dust-near {
  from { transform: translate3d(-2.2px, -3.8px, 0); opacity: .89; }
  to { transform: translate3d(2.8px, 1.7px, 0); opacity: 1; }
}

@keyframes bokeh-far {
  from { transform: translate3d(-.6px, -.8px, 0); opacity: .96; }
  to { transform: translate3d(.8px, .6px, 0); opacity: 1; }
}

@keyframes bokeh-mid {
  from { transform: translate3d(-1px, -1.5px, 0); opacity: .94; }
  to { transform: translate3d(1.3px, .9px, 0); opacity: 1; }
}

@keyframes bokeh-near {
  from { transform: translate3d(-1.7px, -2.2px, 0); opacity: .92; }
  to { transform: translate3d(2px, 1.1px, 0); opacity: 1; }
}

@keyframes leaf-top-primary {
  from { transform: translate3d(-1.5px, -1px, 0) rotate(-.85deg); }
  to { transform: translate3d(2px, 1.8px, 0) rotate(.95deg); }
}

@keyframes leaf-top-secondary {
  from { transform: translate3d(-.6px, -.5px, 0) rotate(-.18deg); }
  to { transform: translate3d(.8px, .6px, 0) rotate(.22deg); }
}

@keyframes leaf-bottom-primary {
  from { transform: translate3d(-2px, -1.4px, 0) rotate(-.95deg); }
  to { transform: translate3d(1.2px, 1px, 0) rotate(.75deg); }
}

@keyframes leaf-bottom-secondary {
  from { transform: translate3d(-.7px, -.4px, 0) rotate(-.16deg); }
  to { transform: translate3d(.5px, .6px, 0) rotate(.14deg); }
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  width: min(100% - 40px, 1120px);
  min-height: 100svh;
  margin-inline: auto;
  padding-block: max(48px, env(safe-area-inset-top)) max(48px, env(safe-area-inset-bottom));
  text-shadow: 0 2px 18px rgb(0 0 0 / .56);
}

.hero__content h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 6rem);
  line-height: 1.05;
}

.hero__content p {
  max-width: 38ch;
  margin: 1rem 0 1.6rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.85;
}

.page-placeholder {
  min-height: 1px;
}

@media (max-width: 600px) {
  .hero__content {
    align-content: end;
    width: min(100% - 32px, 430px);
    padding-bottom: max(64px, env(safe-area-inset-bottom));
  }

  .motion-capable .motion-dust-far,
.motion-capable .motion-bokeh-far {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html:not(.motion-forced) .motion-layer,
html:not(.motion-forced) .leaf-primary,
html:not(.motion-forced) .leaf-secondary {
    animation: none !important;
    transform: translate3d(0, 0, 0) rotate(0deg) !important;
    opacity: 1 !important;
  }
}

/* Query-driven QA states used by local checks; never active in normal navigation. */
.qa-neutral .motion-layer,
.qa-neutral .leaf-primary,
.qa-neutral .leaf-secondary {
  animation: none !important;
  transform: translate3d(0, 0, 0) rotate(0deg) !important;
  opacity: 1 !important;
}

.qa-neutral .hero__content {
  display: none;
}

.qa-top-max .leaf-primary--top { animation: none !important; transform: translate3d(2px, 1.8px, 0) rotate(.95deg); }
.qa-top-max .leaf-secondary--top { animation: none !important; transform: translate3d(.8px, .6px, 0) rotate(.22deg); }
.qa-top-min .leaf-primary--top { animation: none !important; transform: translate3d(-1.5px, -1px, 0) rotate(-.85deg); }
.qa-top-min .leaf-secondary--top { animation: none !important; transform: translate3d(-.6px, -.5px, 0) rotate(-.18deg); }
.qa-bottom-min .leaf-primary--bottom { animation: none !important; transform: translate3d(-2px, -1.4px, 0) rotate(-.95deg); }
.qa-bottom-min .leaf-secondary--bottom { animation: none !important; transform: translate3d(-.7px, -.4px, 0) rotate(-.16deg); }
.qa-bottom-max .leaf-primary--bottom { animation: none !important; transform: translate3d(1.2px, 1px, 0) rotate(.75deg); }
.qa-bottom-max .leaf-secondary--bottom { animation: none !important; transform: translate3d(.5px, .6px, 0) rotate(.14deg); }