.story-home-page {
  background: #1d1d1d;
  background-image: none;
  background-attachment: scroll;
  color: #e9e6e0;
}

.story-home-page ::selection {
  background: rgba(86, 136, 176, 0.4);
  color: #e9e6e0;
}

@keyframes hm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(95, 215, 128, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(95, 215, 128, 0); } }
@keyframes hm-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hm-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes hm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes hm-meter { from { width: 14%; } to { width: 88%; } }
@keyframes hm-meter2 { from { width: 0; } to { width: 15%; } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.story-home-page [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.2, .6, .3, 1), transform 1s cubic-bezier(.2, .6, .3, 1);
}

.story-home-page [data-reveal].in {
  opacity: 1;
  transform: none;
}

#hm-nav {
  background: rgba(29, 29, 29, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: background .3s ease, border-color .3s ease;
}

#hm-nav.scrolled {
  background: rgba(29, 29, 29, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

a[data-rail] {
  opacity: .45;
  transition: opacity .3s ease;
}

a[data-rail].on,
a[data-rail].is-active {
  opacity: 1;
}

a[data-rail] .rdot {
  background: #6f706c;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

a[data-rail].on .rdot,
a[data-rail].is-active .rdot {
  background: #8fb4d4;
  box-shadow: 0 0 0 4px rgba(86, 136, 176, 0.16);
  transform: scale(1.15);
}

a[data-rail] .rlbl {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}

a[data-rail]:hover .rlbl,
a[data-rail].on .rlbl,
a[data-rail].is-active .rlbl {
  opacity: 1;
  transform: translateX(0);
}

.story-home-page .hm-scrollcue {
  animation: hm-bob 2.4s ease-in-out infinite;
}

.story-home-page image-slot {
  display: block;
}

.hn:hover { background: rgba(255, 255, 255, 0.06) !important; }
.hs:hover { color: #cdddec !important; }
.hl:hover { transform: translateY(-1px) !important; background: #e2dfd9 !important; }
.hg:hover { transform: translateY(-1px) !important; background: rgba(255, 255, 255, 0.1) !important; }
.hp:hover { transform: rotate(0deg) translateY(-5px) !important; }
.hc:hover { background: #303030 !important; }
.hf:hover { color: #e9e6e0 !important; }
.hx:hover { background: rgba(255, 255, 255, 0.1) !important; color: #e9e6e0 !important; }
.ho:hover { background: rgba(255, 255, 255, 0.06) !important; transform: translateY(-1px) !important; border-color: rgba(168, 195, 218, 0.4) !important; }

/* On desktop the mobile-menu wrapper stays out of the layout entirely, so
   the nav keeps its logo / links / actions three-item flex row untouched. */
#hm-nav .hm-navmenu { display: contents; }

@media (max-width: 1100px) {
  #hm-rail { display: none !important; }
}

@media (max-width: 900px) {
  #hm-nav .hm-navmenu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: #1f1f1f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 20px 22px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  }
  #hm-nav .hm-navmenu.is-open { display: flex; }
  #hm-nav .hm-navlinks { flex-direction: column !important; align-items: stretch !important; gap: 2px !important; }
  #hm-nav .hm-navlinks > a, #hm-nav .hm-navlinks .nav__trigger { width: 100%; }
  #hm-nav .hm-navactions { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
}

@media (max-width: 860px) {
  .hm-pad { padding-left: 22px !important; padding-right: 22px !important; }
  .hm-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hm-loopgrid { grid-template-columns: 1fr !important; }
  .hm-big { font-size: 2.4rem !important; }
  .hm-models { grid-template-columns: 1fr !important; }
}