/* Shared utility classes: intentionally UNSCOPED (not "home-page .foo"). Homepage keeps
   a shadow root for its below-the-fold content-image-row sections, which still use these
   same class names — adoptedStyleSheets only matches selectors that can resolve inside
   the shadow tree itself, where "home-page" (the host) isn't a reachable ancestor. See
   frameworkCSS.js / homepage.js's addFrameworkCSS(shadowRoot, [...]) call. */
.text-blue {
  color: var(--color-primary-600);
}

.text-cyan {
  color: var(--color-accent-cyan);
}

.uppercase {
  text-transform: uppercase;
}

.bg-blue {
  background-color: var(--color-primary-600) !important;
}

.top-gap {
  padding-top: 6rem;
}

/* !important because .x-gap must win over Bootstrap's own .container-fluid
   padding rule: both are single-class selectors of equal specificity, and
   stylesheet load order between the two isn't guaranteed across every page. */
.x-gap {
  padding-left: 10% !important;
  padding-right: 10% !important;
}

.mini-height {
  min-height: 50vh;
}

/* ---------- Hero background + floating orbs ---------- */
home-page .background-image {
  background-image:
    linear-gradient(to top, rgba(0, 43, 137, 0.6) 0%, rgba(0, 43, 137, 0) 50%),
    url('/V1/img/homepage-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

home-page .hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  animation: home-float 14s ease-in-out infinite;
}

home-page .hero-orb-1 {
  width: 380px;
  height: 380px;
  background: rgba(80, 130, 220, 0.35);
  top: -120px;
  right: -80px;
}

home-page .hero-orb-2 {
  width: 260px;
  height: 260px;
  background: var(--color-accent-cyan);
  opacity: 0.18;
  bottom: -80px;
  left: 12%;
  animation-delay: -7s;
}

@keyframes home-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -30px) scale(1.08); }
}

/* ---------- Hero content card ---------- */
home-page a {
  text-decoration: none;
  color: var(--color-primary-600);
}

home-page .hero-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

home-page .hero-eyebrow {
  display: inline-block;
  color: var(--color-accent-cyan);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

home-page .hero-title {
  /* Deliberately smaller max than --text-3xl (which clamps up to 3.2rem):
     this heading runs several words longer than the token was tuned for, so
     at the full 3.2rem it wrapped to 5-6 lines and pushed .hero-card well
     past one viewport height, forcing a scroll just to see the CTA buttons. */
  font-size: clamp(1.9rem, 2vw + 1rem, 2.6rem);
  line-height: 1.15;
}

home-page .hero-sub {
  color: var(--color-neutral-800);
}

home-page .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

home-page .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo);
  border: 1px solid transparent;
}
home-page .btn-cta i { transition: transform var(--duration-fast) var(--ease-out-expo); }
home-page .btn-cta:hover i { transform: translateX(4px); }

home-page .btn-cta.primary {
  background: var(--color-primary-600);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
home-page .btn-cta.primary:hover {
  background: var(--color-primary-700);
  transform: translateY(-2px);
}

home-page .btn-cta.ghost {
  color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}
home-page .btn-cta.ghost:hover {
  background: var(--color-primary-100);
  transform: translateY(-2px);
}

/* ---------- Brand logo row (back in its original spot, above the hero content) ---------- */
home-page .brand-marquee {
  overflow: visible;
}

home-page .brand-track {
  display: flex;
}

home-page .brand-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

/* Duplicate set: only needed to give the mobile marquee a seamless loop. */
home-page .brand-group[aria-hidden="true"] {
  display: none;
}

home-page .brand-box {
  width: 8rem;
  margin: 0.5rem;
  padding: 0.5rem;
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: homepageHeroSlideDown 0.6s ease-out forwards;
  opacity: 0;
  cursor: pointer;
}

home-page .brand-box img {
  transition: transform var(--duration-base) ease;
}

home-page .brand-box img:hover {
  transform: scale(1.05);
}

@keyframes homepageHeroSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

home-page .brand-box:nth-child(1) { animation-delay: 0.2s; }
home-page .brand-box:nth-child(2) { animation-delay: 0.4s; }
home-page .brand-box:nth-child(3) { animation-delay: 0.6s; }
home-page .brand-box:nth-child(4) { animation-delay: 0.8s; }
home-page .brand-box:nth-child(5) { animation-delay: 1.0s; }
home-page .brand-box:nth-child(6) { animation-delay: 1.2s; }

@media (max-width: 1200px) {
  .x-gap {
    padding-left: 6% !important;
    padding-right: 6% !important;
  }
}

@media (max-width: 768px) {
  .x-gap {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }

  /* Single scrolling row instead of a wrapped multi-row grid: the two brand
     groups sit side by side (track = 2x one group's width) and the track
     animates from 0 to -50%, which is exactly one group's width — so the
     loop point is seamless and reads as an endless right-to-left marquee. */
  home-page .brand-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  home-page .brand-track {
    width: max-content;
    animation: brand-marquee 22s linear infinite;
  }

  home-page .brand-group {
    flex-wrap: nowrap;
    justify-content: space-evenly;
    flex: 0 0 auto;
  }

  home-page .brand-group[aria-hidden="true"] {
    display: flex;
  }

  home-page .brand-box {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 443px) {
  home-page .brand-box {
    width: 8rem;
  }
}

/* Tighten everything above the CTA buttons so the hero card's key content —
   title, intro, and the two CTAs — fits in the first viewport on a phone
   without scrolling. Only .top-gap/.mini-height are used on the homepage
   today, so narrowing them here is safe. */
@media (max-width: 576px) {
  .top-gap {
    padding-top: 4.5rem;
  }

  .mini-height {
    min-height: 0;
  }

  home-page .container-fluid.top-gap {
    padding-bottom: 1rem !important;
  }

  home-page .brand-box {
    width: 6rem;
    margin: 0.35rem;
    padding: 0.5rem;
  }

  home-page .hero-card {
    padding: 1.1rem !important;
  }

  home-page .hero-eyebrow {
    margin-bottom: 0.4rem;
  }

  home-page .hero-title {
    font-size: 1.5rem;
    margin-bottom: 0.6rem !important;
  }

  home-page .hero-sub {
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 0 0.5rem;
  }

  /* The second paragraph (passionContent) is the long, detailed one — drop it
     on phones so the card doesn't push the CTAs below the fold. Still fully
     visible on tablet/desktop and to crawlers reading the raw HTML. */
  home-page .hero-card p.hero-sub:nth-of-type(2) {
    display: none;
  }

  home-page .hero-cta {
    margin-top: 0.75rem;
    gap: 0.6rem;
  }

  home-page .btn-cta {
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
  }
}

@keyframes brand-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  home-page .hero-orb { animation: none; }
  home-page .brand-track { animation: none; }
}