/* Top bar — links out to pages that live outside the one-page (client request). */
.sf-top-bar {
  align-items: center;
  background: rgba(11, 44, 77, 0.72);
  backdrop-filter: blur(10px);
  color: #fff;
  direction: rtl;
  display: flex;
  height: 64px;
  justify-content: space-between;
  left: 176px;
  padding: 0 32px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1010;
}

.sf-top-bar__brand {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
}

.sf-top-bar__brand span:first-child {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: flex;
  font-size: 15px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.sf-top-bar__nav {
  display: flex;
  font-size: 13px;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-top-bar__nav a {
  color: #fff;
  position: relative;
}

.sf-top-bar__nav a::after {
  background: #fff;
  bottom: -6px;
  content: "";
  height: 1px;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  width: 100%;
}

.sf-top-bar__nav a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  /* sf-mobile-nav already owns the top of the screen on mobile for in-page navigation;
     the cross-page top bar is desktop-only until we design how the two coexist. */
  .sf-top-bar {
    display: none;
  }
}

/* ---------- Typography pass on the hero + section titles ----------
   Matches the sizing/letter-spacing from the original design contract
   (reference/current-globals.css: .hero-copy h1 / .section-title h2),
   applied here via the stable section IDs/classes rather than guessing
   Elementor's internal widget style-control keys. */

#top h6.elementor-heading-title {
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0.9;
}

#top h1.elementor-heading-title {
  font-size: clamp(50px, 6.2vw, 102px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.92 !important;
}

#top .elementor-button {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 0 0 8px !important;
}

#top .elementor-button:hover {
  background: transparent !important;
  opacity: 0.8;
}

.sf-scroll-section h2.elementor-heading-title {
  font-size: clamp(30px, 3.5vw, 58px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}