/* ---------------------------------------------------------
     HERO
  --------------------------------------------------------- */
  .hero{
    position:relative;
    width:100%;
    min-height: 100svh;
    overflow:hidden;
    display:flex;
  }

  .content-wrapper{
    position:relative;
    z-index: 2;
    width:100%;
    max-width: var(--content-max);
    margin: 0 auto;
    display:flex;
    flex-direction:column;
  }

  .hero-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit: cover;
    object-position: 56% 64%;
  }

  .hero-scrim{
    position:absolute; inset:0;
    background: linear-gradient(90deg,
      rgba(11,10,7,0.86) 0%,
      rgba(11,10,7,0.78) 14%,
      rgba(11,10,7,0.64) 28%,
      rgba(11,10,7,0.46) 42%,
      rgba(11,10,7,0.28) 56%,
      rgba(11,10,7,0.14) 68%,
      rgba(11,10,7,0.05) 80%,
      rgba(11,10,7,0) 94%
    );
  }
  .hero-scrim::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg,
      rgba(11,10,7,0.40) 0%,
      rgba(11,10,7,0.22) 22%,
      rgba(11,10,7,0.08) 42%,
      rgba(11,10,7,0) 62%
    );
  }

  .hero-inner{
    flex: 1;
    width:100%;
    max-width: 840px;
    padding: 120px clamp(20px, 5vw, 64px) 64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .eyebrow{
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-soft);
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  }
  .eyebrow-rule{
    display:block;
    width: 34px; height: 2px;
    background: var(--brass);
    margin-top: 16px;
  }

  .hero-title{
    font-family: var(--font-display);
    font-weight:400;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--parchment);
    text-shadow: 0 4px 28px rgba(0,0,0,0.35);
    margin-top: 20px;
  }
  .hero-title .accent{ color: var(--brass-soft); }

  .hero-copy{
    max-width: 46ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--parchment-dim);
    font-weight: 400;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
    margin-top: 28px;
  }

  /*==========================================================
WATCH WALKTHROUGH
==========================================================*/

.btn-video{

  display:inline-flex;

  align-items:center;

  gap:12px;

  background:transparent;

  border:none;

  color:#fff;

  font-weight:600;

  cursor:pointer;

  transition:.3s;

}

.play-circle{

  width:46px;

  height:46px;

  border-radius:50%;

  background:rgba(182,149,92,.12);

  border:1px solid rgba(182,149,92,.35);

  display:flex;

  align-items:center;

  justify-content:center;

  color:#B6955C;

  transition:.35s;

}

.play-circle i{

  margin-left:2px;

  font-size:13px;

}

.btn-video:hover{

  color:#B6955C;

}

.btn-video:hover .play-circle{
  background:#B6955C;
  color:#111;
  transform:scale(1.08);
  box-shadow:0 12px 30px rgba(182,149,92,.30);
}
  .hero-actions{ display:flex; align-items:center; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

  /* ---------------------------------------------------------
     FEATURE STRIP
  --------------------------------------------------------- */
  .feature-strip{
    display:flex;
    flex-wrap: wrap;
    margin-top: 44px;
  }
  .feature-strip li{
    display:flex;
    align-items:center;
    gap: 14px;
    padding-right: 32px;
    margin-right: 32px;
    border-right: 1px solid var(--line);
  }
  .feature-strip li:last-child{ border-right:none; margin-right:0; padding-right:0; }

  .feature-icon{
    display:flex; align-items:center; justify-content:center;
    flex:none;
    width: 46px; height:46px;
    border: 1.5px solid var(--brass);
    border-radius: 6px;
  }
  .feature-icon svg{
    width: 21px; height:21px;
    stroke: var(--brass-soft);
    fill:none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .feature-label{
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--parchment-dim);
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    white-space: nowrap;
  }

  /* ---------------------------------------------------------
     SCROLL CUE
  --------------------------------------------------------- */
  .scroll-cue{
    flex: none;
    align-self: flex-start;
    margin: 28px 0 36px clamp(20px, 5vw, 64px);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 14px;
  }
  .scroll-cue svg{ width:22px; height:36px; stroke: var(--brass-soft); }
  .scroll-cue__text{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--parchment-dim);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }
  .scroll-cue__line{ width:1px; height:34px; background: var(--line-strong); }

  /* ---------------------------------------------------------
     MOTION