/* The brand artwork gently dissolves into the Mena landscape instead of ending on a hard line. */
.brand-hero-logo {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.brand-hero-logo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: clamp(-110px, -8vw, -78px);
  left: 0;
  height: clamp(78px, 8vw, 110px);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 21, 34, .96) 0%, rgba(7, 21, 34, .7) 36%, rgba(31, 39, 48, .3) 68%, rgba(31, 39, 48, 0) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 44%, 84% 55%, 61% 76%, 37% 68%, 16% 51%, 0 31%);
}

.hero {
  position: relative;
  z-index: 1;
  margin-top: -1px;
}

.hero::after {
  background: linear-gradient(to bottom, rgba(7, 21, 34, .64) 0%, rgba(7, 21, 34, .26) 42%, rgba(7, 21, 34, 0) 100px), linear-gradient(90deg, #071522ed 0%, #071522bc 35%, #0715223d 70%, #07152263 100%), linear-gradient(0deg, #071522dc 0%, transparent 48%);
}

[data-theme="light"] .brand-hero-logo::after {
  background: linear-gradient(to bottom, rgba(255, 250, 243, .94) 0%, rgba(247, 240, 230, .64) 36%, rgba(241, 201, 173, .26) 68%, rgba(241, 201, 173, 0) 100%);
}

[data-theme="light"] .hero::after {
  background: linear-gradient(to bottom, rgba(255, 250, 243, .5) 0%, rgba(246, 220, 196, .18) 43%, rgba(246, 220, 196, 0) 100px), linear-gradient(90deg, #071522ed 0%, #071522bc 35%, #0715223d 70%, #07152263 100%), linear-gradient(0deg, #071522dc 0%, transparent 48%);
}

/* Give the Mena golden-hour landscape a stronger, more cinematic role above the footer. */
.mountain-ridge {
  position: relative;
  height: clamp(300px, 38vw, 520px);
  background-position: center 50%;
}

.mountain-ridge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 21, 34, .28), transparent 24%, transparent 70%, rgba(4, 16, 27, .62));
}

/* The brand artwork and Mena hero read as one uninterrupted, full-bleed introduction. */
@media (min-width: 701px) {
  .brand-hero-logo {
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 0 !important;
  }

  .brand-hero-art {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .brand-hero-art img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 700px) {
  html,
  body { overflow-x: clip; }

  .brand-hero-logo {
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 0;
    background: transparent;
  }

  .brand-hero-art {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .brand-hero-art img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .hero {
    width: 100%;
    min-height: clamp(600px, 170vw, 730px);
    margin: 0;
  }

  .hero .gh-container { padding-top: 88px; }
}

@media (max-width: 580px) {
  .mountain-ridge { height: 280px; }
  .theme-toggle { right: 10px; bottom: calc(62px + env(safe-area-inset-bottom)); }
  .calendly-float { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
}