@font-face {
    font-family: SMHeebo;
    src: url('heebo-hebrew.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F
  }

  @font-face {
    font-family: SMManrope;
    src: url('manrope-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap
  }

  .dp-hero {
    --dp-ink: #121914;
    --dp-lime: #eaf499;
    position: relative;
    width: 100%;
    background: var(--dp-ink);
    color: #fff9e9;
    font-family: SMHeebo, SMManrope, Arial, sans-serif;
    isolation: isolate;
    line-height: 1.3;
    text-align: right
  }

  .dp-hero *,
  .dp-hero *::before,
  .dp-hero *::after {
    box-sizing: border-box
  }

  .dp-hero :is(h1, h2, p) {
    margin: 0;
    color: inherit;
    font-family: inherit
  }

  .dp-hero a {
    color: inherit;
    text-decoration: none
  }

  .dp-hero button {
    font: inherit
  }

  .dp-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    max-width: none
  }

  .dp-hero a:focus-visible,
  .dp-hero button:focus-visible {
    outline: 2px solid var(--dp-lime);
    outline-offset: 6px
  }

  .dp-track {
    height: 100svh;
    min-height: 700px
  }

  .dp-stage {
    position: relative;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    background: #111810
  }

  .dp-atmosphere {
    position: absolute;
    inset: -8%;
    opacity: .48
  }

  .dp-atmosphere img {
    position: absolute;
    inset: 0;
    filter: saturate(.85) brightness(.48);
    transform: scale(1.1)
  }

  .dp-atmosphere img:not(:first-child) {
    opacity: 0
  }

  .dp-space {
    position: absolute;
    inset: 0;
    perspective: 850px;
    perspective-origin: 50% 47%;
    overflow: hidden
  }

  .dp-camera {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform
  }

  .dp-photo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64vw;
    height: 42vw;
    max-width: 800px;
    max-height: 560px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    box-shadow: 0 18px 90px #0008;
    overflow: hidden;
    background: #273025;
    visibility: hidden
  }

  .dp-photo picture {
    display: block;
    width: 100%;
    height: 100%
  }

  .dp-photo img {
    transform: scale(1.02)
  }

  .dp-photo.dp-portrait {
    width: 45vw;
    height: 62vw;
    max-width: 530px;
    max-height: 750px
  }

  .dp-photo.dp-anchor {
    width: 128vw;
    height: 125svh;
    max-width: none;
    max-height: none
  }

  .dp-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #0002, transparent 20%, #0001 60%, #07110a99), radial-gradient(ellipse at 50% 48%, transparent 10%, #0005 100%);
    z-index: 1
  }

  .dp-title {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    pointer-events: none;
    transform-origin: 50% 48%
  }

  .dp-overline {
    font-family: SMManrope, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    display: block;
    margin-bottom: 26px
  }

  .dp-title h1,
  .dp-title h2 {
    font-size: clamp(57px, 16.5vw, 180px);
    line-height: .98;
    font-weight: 600;
    letter-spacing: -.065em;
    text-shadow: 0 2px 32px #0003
  }

  .dp-title h1 span {
    display: block
  }

  .dp-title h1 span:last-child {
    color: var(--dp-lime)
  }

  .dp-title p {
    font-size: 15px;
    margin-top: 28px
  }

  .dp-title em,
  .dp-finale em {
    font-style: normal;
    color: var(--dp-lime)
  }

  .dp-title-venue {
    display: none;
    opacity: 0
  }

  .dp-title-venue h2 {
    font-size: clamp(52px, 13.4vw, 140px)
  }

  .dp-finale {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0
  }

  .dp-finale .dp-overline {
    font-size: 8px;
    letter-spacing: .12em;
    margin-bottom: 24px
  }

  .dp-finale h2 {
    font-size: clamp(41px, 10.5vw, 100px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.055em
  }

  .dp-finale>p {
    font-size: 13px;
    line-height: 1.7;
    max-width: 260px;
    margin-top: 24px
  }

  .dp-cta {
    display: flex;
    gap: 25px;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #fff9e9aa;
    padding: 16px 0 10px;
    margin-top: 26px;
    min-height: 48px
  }

  .dp-cta span {
    font-size: 26px
  }

  .dp-venues {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin-top: 45px;
    font-family: SMManrope, sans-serif;
    direction: ltr;
    font-size: 9px;
    letter-spacing: .06em
  }

  .dp-venues a {
    padding: 12px 0;
    border-bottom: 1px solid transparent;
    min-height: 44px;
    display: flex;
    align-items: center
  }

  .dp-venues a:hover {
    border-color: var(--dp-lime)
  }

  .dp-bottom {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 10px;
    direction: rtl
  }

  .dp-scroll {
    display: flex;
    align-items: center;
    gap: 16px
  }

  .dp-scroll b {
    font-size: 25px;
    font-weight: 400;
    display: inline-block;
    animation: dp-cue 2.5s ease-in-out infinite
  }

  .dp-coordinate {
    font-family: SMManrope, sans-serif;
    font-size: 8px;
    letter-spacing: .09em
  }

  .dp-skip {
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    padding: 8px 0 !important;
    min-height: 44px;
    font-size: 10px !important;
    border-radius: 0 !important;
    cursor: pointer
  }

  .dp-line {
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--dp-lime)
  }

  .dp-hero.dp-running .dp-track {
    height: 450svh;
    min-height: 0
  }

  .dp-hero.dp-running .dp-stage {
    position: sticky;
    top: 0;
    min-height: 0
  }

  .dp-hero.dp-running .dp-title-venue {
    display: flex
  }

  .dp-hero:not(.dp-running) .dp-title-intro {
    justify-content: flex-start;
    padding-top: 85px;
    bottom: auto
  }

  .dp-hero:not(.dp-running) .dp-title-intro .dp-overline {
    margin-bottom: 20px
  }

  .dp-hero:not(.dp-running) .dp-title-intro h1 {
    font-size: clamp(40px, 11vw, 76px)
  }

  .dp-hero:not(.dp-running) .dp-title-intro p {
    margin-top: 18px
  }

  .dp-hero:not(.dp-running) .dp-finale {
    visibility: visible;
    opacity: 1;
    top: auto;
    bottom: 70px;
    display: flex
  }

  .dp-hero:not(.dp-running) .dp-finale :is(.dp-overline, h2, p) {
    display: none
  }

  .dp-hero:not(.dp-running) .dp-venues {
    margin-top: 15px
  }

  .dp-hero:not(.dp-running) .dp-bottom .dp-skip {
    display: none
  }

  .dp-hero:not(.dp-running) .dp-scroll {
    visibility: hidden
  }

  @keyframes dp-cue {

    0%,
    100% {
      transform: translateY(-3px)
    }

    50% {
      transform: translateY(5px)
    }
  }

  @media(min-width:768px) {
    .dp-title {
      padding: 50px 6vw
    }

    .dp-title h1 {
      font-size: clamp(80px, 11.5vw, 190px)
    }

    .dp-title-venue h2 {
      font-size: clamp(75px, 9vw, 150px)
    }

    .dp-overline {
      font-size: 13px;
      margin-bottom: 30px
    }

    .dp-title p {
      font-size: 18px
    }

    .dp-photo {
      width: 48vw;
      height: 34vw
    }

    .dp-photo.dp-portrait {
      width: 31vw;
      height: 40vw
    }

    .dp-photo.dp-anchor {
      width: 125vw;
      height: 126svh
    }

    .dp-finale h2 {
      font-size: clamp(64px, 7.5vw, 116px)
    }

    .dp-finale>p {
      font-size: 16px;
      max-width: none
    }

    .dp-finale .dp-overline {
      font-size: 11px
    }

    .dp-venues {
      font-size: 12px;
      gap: 40px
    }

    .dp-cta {
      font-size: 18px
    }

    .dp-bottom {
      left: 5vw;
      right: 5vw;
      bottom: 25px;
      font-size: 12px
    }

    .dp-coordinate {
      font-size: 10px
    }

    .dp-skip {
      font-size: 12px !important
    }
  }

  @media(max-width:350px) {
    .dp-title h1 {
      font-size: 54px
    }

    .dp-title-venue h2 {
      font-size: 47px
    }

    .dp-finale h2 {
      font-size: 35px
    }

    .dp-coordinate {
      display: none
    }

    .dp-venues {
      gap: 10px;
      font-size: 8px
    }
  }

  @media(max-height:650px) {
    .dp-finale .dp-overline {
      margin-bottom: 15px
    }

    .dp-finale h2 {
      font-size: 38px
    }

    .dp-finale>p {
      margin-top: 16px
    }

    .dp-cta {
      margin-top: 16px
    }

    .dp-venues {
      margin-top: 18px
    }

    .dp-title .dp-overline {
      margin-bottom: 18px
    }
  }

  @media(prefers-reduced-motion:reduce) {
    .dp-hero * {
      animation: none !important;
      transition: none !important
    }
  }