.hero-banner {
      position: relative;
      width: 100vw;
      height: 120vh;
      min-height: 520px;
      background: url('YOUR-BANNER-IMAGE.jpg') center center / cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.55); /* darken for readability */
      z-index: 1;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
      margin-top: -60px; /* Adjust as needed */
    }
    .hero-top {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 2rem;
      font-weight: 400;
      letter-spacing: 0.02em;
      margin-bottom: 24px;
      margin-top: 0;
    }
    .hero-title {
      font-family: 'Sacramento', cursive;
      font-size: 5.2rem;
      font-weight: 400;
      line-height: 1.1;
      margin: 0 0 22px 0;
      letter-spacing: 0.04em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(0,0,0,0.14);
    }
    .hero-bottom {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 2rem;
      font-weight: 400;
      margin: 0;
      letter-spacing: 0.03em;
    }
    /* Contact button (vertical right) */
    .contact-btn-vertical {
      position: fixed;
      right: 0;
      top: 38%;
      transform: translateY(-50%);
      width: 48px;
      height: 140px;
      background: #4a6364;
      color: #fff;
      font-size: 1.05rem;
      letter-spacing: 0.18em;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      text-align: center;
      border-radius: 6px 0 0 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      user-select: none;
      transition: background 0.18s;
      font-family: 'Montserrat', Arial, sans-serif;
      box-shadow: 0 2px 16px 0 rgba(0,0,0,0.09);
    }
    .contact-btn-vertical:hover {
      background: #2a3535;
    }

    /* Down arrow (bouncing) */
    .hero-down-arrow {
      position: absolute;
      left: 50%;
      bottom: 44px;
      transform: translateX(-50%);
      z-index: 3;
      animation: bounce 1.55s infinite;
      opacity: 0.88;
    }
    .hero-down-arrow svg {
      width: 28px;
      height: 32px;
      stroke: #fff;
      stroke-width: 2;
      fill: none;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
      display: block;
      margin: 0 auto;
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
      40% { transform: translateX(-50%) translateY(16px);}
      60% { transform: translateX(-50%) translateY(9px);}
    }
    /* Responsive */
    @media (max-width: 800px) {
      .hero-title { font-size: 3rem; }
      .hero-top, .hero-bottom { font-size: 1.1rem; }
      .contact-btn-vertical { width: 36px; height: 90px; font-size: .9rem; }
    }
    @media (max-width: 480px) {
      .hero-title { font-size: 2rem; }
      .hero-top, .hero-bottom { font-size: .92rem; }
      .contact-btn-vertical { font-size: .75rem; }
    }