#hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 64px 0;
  overflow: hidden;
}

#hero-media { position: absolute; inset: 0; z-index: 0; }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
#hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
#hero-slideshow { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease;
  animation: ken-burns 12s ease-in-out infinite alternate;
}
.slide.active { opacity: 1; }

#hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(8,6,10,0.72) 100%),
    linear-gradient(to top,  rgba(8,6,10,1) 0%, rgba(8,6,10,0.72) 30%, rgba(8,6,10,0.2) 65%, transparent 100%),
    linear-gradient(to right, rgba(8,6,10,0.75) 0%, rgba(8,6,10,0.2) 55%, transparent 100%);
}

#embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ember {
  position: absolute;
  background: var(--gold-bright);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: ember-rise linear infinite;
}

.hero-orn {
  position: absolute;
  top: 50%; right: 52px;
  transform: translateY(-50%);
  width: 1px; height: 180px;
  background: linear-gradient(to bottom, transparent, rgba(200,134,10,0.7), transparent);
  z-index: 4;
}
.hero-orn::before, .hero-orn::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px;
  border: 0.5px solid var(--gold); border-radius: 50%;
}
.hero-orn::before { top: -3px; }
.hero-orn::after  { bottom: -3px; }
.scroll-hint {
  position: absolute;
  right: 30px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 8px; font-weight: 300;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(200,134,10,0.55);
  z-index: 4;
}

.hero-content {
  position: relative; z-index: 5;
  max-width: 780px;
  padding-bottom: 150px;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  opacity: 0; transform: translateX(-16px);
  animation: fade-in-left .8s .2s forwards;
}
.hero-eyebrow-text {
  font-family: var(--sans);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold);
}
h1.hero-h1 {
  font-family: var(--serif);
  text-transform: uppercase;
  line-height: 1.0; letter-spacing: 0.04em;
  margin-bottom: 4px;
  opacity: 0;
  animation: fade-in-up .9s .45s forwards;
}
h1.hero-h1 .gold-italic {
  display: block;
  font-family: var(--italic); font-style: italic;
  font-size: 46px; font-weight: 300;
  color: var(--gold-pale); letter-spacing: 0.1em;
  margin-bottom: 2px;
}
h1.hero-h1 .main-line {
  display: block;
  font-size: 76px; font-weight: 700;
  color: var(--cream); line-height: 0.95;
}
h1.hero-h1 .sub-line {
  display: block;
  font-size: 56px; font-weight: 400;
  color: var(--cream); opacity: 0.85; line-height: 1.05;
}
.hero-tagline {
  font-family: var(--italic); font-size: 22px; font-weight: 300; font-style: italic;
  color: var(--sub); margin: 22px 0 36px;
  line-height: 1.7; max-width: 520px;
  opacity: 0; animation: fade-in-up .9s .7s forwards;
}
.hero-actions {
  display: flex; align-items: center; gap: 20px;
  opacity: 0; animation: fade-in-up .9s .9s forwards;
}

.hero-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  border-top: 0.5px solid rgba(200,134,10,0.2);
  z-index: 5;
  background: rgba(8,6,10,0.45);
  backdrop-filter: blur(6px);
}
.hero-stat {
  flex: 1;
  padding: 18px 28px;
  border-right: 0.5px solid rgba(200,134,10,0.12);
  display: flex; align-items: center; gap: 12px;
}
.hero-stat:last-child { border-right: none; }
.hs-num { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--gold-bright); white-space: nowrap; }
.hs-lbl {
  font-family: var(--sans); font-size: 12px; font-weight: 300;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
  #hero { padding: 0 32px 0; }
  h1.hero-h1 .main-line { font-size: 56px; }
  h1.hero-h1 .sub-line  { font-size: 40px; }
  h1.hero-h1 .gold-italic { font-size: 34px; }
}
@media (max-width: 640px) {
  h1.hero-h1 .main-line  { font-size: 38px; }
  h1.hero-h1 .sub-line   { font-size: 28px; }
  h1.hero-h1 .gold-italic{ font-size: 24px; }
  .hero-stat .hs-lbl { display: none; }
}

/* Light theme */
body.light-theme #hero { background: #F8EED7; }
body.light-theme h1.hero-h1 .main-line,
body.light-theme h1.hero-h1 .sub-line { color: #1F0A02; }
body.light-theme h1.hero-h1 .gold-italic { color: #A4111B; }
body.light-theme .hero-tagline { color: rgba(31,10,2,0.78); }
body.light-theme .hs-num { color: #B85C00; }
body.light-theme .hero-eyebrow-text { color: #8C5908; }
body.light-theme #hero-overlay {
  background:
    linear-gradient(to top,    rgba(248,238,215,1) 0%, rgba(248,238,215,0.96) 30%, rgba(248,238,215,0.82) 65%, rgba(248,238,215,0.6) 100%),
    linear-gradient(to right,  rgba(248,238,215,0.95) 0%, rgba(248,238,215,0.7) 55%, rgba(248,238,215,0.45) 100%);
}
body.light-theme #hero canvas#heroCanvas { filter: invert(0.95) hue-rotate(180deg) brightness(1.1) saturate(1.2); }
body.light-theme .hero-stats { background: rgba(255,255,255,0.85); border-top: 0.5px solid rgba(140,89,8,0.35); }
body.light-theme .hero-stat { border-right-color: rgba(140,89,8,0.18); }
body.light-theme .hs-lbl { color: rgba(31,10,2,0.6); }
body.light-theme .ember { background: #B85C00; box-shadow: 0 0 8px rgba(184,92,0,0.6); }