/* 2026-07-16: reference-led home hero spacing and hierarchy. */
.cjsr-home {
  width: 100% !important;
  margin-left: 0 !important;
  background: #ffffff !important;
}

@media (min-width: 781px) {
  .cjsr-wide {
    width: min(100%, 1440px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: clamp(72px, 7.6vw, 118px) !important;
    padding-left: clamp(72px, 7.6vw, 118px) !important;
  }

  .cjsr-nav {
    height: 76px !important;
    border-bottom-color: rgba(24, 61, 112, 0.1) !important;
    background: rgba(249, 252, 255, 0.78) !important;
    backdrop-filter: blur(16px) !important;
  }

  .cjsr-brand {
    gap: 13px !important;
  }

  .cjsr-brand-logo {
    width: 42px !important;
    height: 42px !important;
    border-color: rgba(21, 85, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 24px rgba(38, 78, 137, 0.08) !important;
  }

  .cjsr-brand-logo img {
    width: 35px !important;
    height: 35px !important;
  }

  .cjsr-nav-links {
    gap: 30px !important;
    color: #53637b !important;
    font-size: 14px !important;
  }

  .cjsr-nav-links .cjsr-btn {
    min-height: 42px !important;
    padding-right: 19px !important;
    padding-left: 19px !important;
  }

  .cjsr-hero {
    height: min(780px, calc(100svh - 80px)) !important;
    min-height: 680px !important;
    overflow: hidden !important;
    background: #f6faff !important;
  }

  .cjsr-hero::before {
    content: "" !important;
    z-index: 1 !important;
    inset: 0 !important;
    color: transparent !important;
    background:
      linear-gradient(90deg, rgba(248, 251, 255, 0.99) 0%, rgba(248, 251, 255, 0.97) 26%, rgba(248, 251, 255, 0.86) 39%, rgba(248, 251, 255, 0.36) 55%, rgba(248, 251, 255, 0.04) 72%),
      linear-gradient(180deg, rgba(247, 251, 255, 0.28), rgba(230, 240, 252, 0.08)) !important;
    font-size: 0 !important;
  }

  .cjsr-hero-image {
    object-position: 69% center !important;
    filter: saturate(0.9) brightness(1.055) contrast(0.98) !important;
    animation-duration: 16s !important;
  }

  .cjsr-hero-main {
    align-items: center !important;
    padding-top: 76px !important;
    padding-bottom: 98px !important;
  }

  .cjsr-hero-copy {
    width: min(500px, 41%) !important;
    transform: translateY(-4px) !important;
  }

  .cjsr-kicker {
    gap: 11px !important;
    font-size: 13px !important;
  }

  .cjsr-kicker::before {
    width: 34px !important;
    height: 2px !important;
  }

  .cjsr-hero h1 {
    margin-top: 18px !important;
    font-size: clamp(58px, 4.55vw, 66px) !important;
    line-height: 1.02 !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9), 0 14px 34px rgba(36, 72, 125, 0.1) !important;
  }

  .cjsr-color-line {
    width: 112px !important;
    height: 4px !important;
    margin-top: 21px !important;
  }

  .cjsr-hero-statement {
    max-width: 470px !important;
    margin-top: 22px !important;
    color: #16345d !important;
    font-size: clamp(22px, 1.75vw, 25px) !important;
    line-height: 1.5 !important;
  }

  .cjsr-hero-lead {
    max-width: 470px !important;
    margin-top: 10px !important;
    color: #586a83 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .cjsr-hero-actions {
    gap: 11px !important;
    margin-top: 25px !important;
  }

  .cjsr-hero-actions .cjsr-btn {
    min-height: 43px !important;
    padding-right: 17px !important;
    padding-left: 17px !important;
  }

  .cjsr-status-rail {
    right: auto !important;
    left: 50% !important;
    width: min(100%, 1280px) !important;
    height: 94px !important;
    transform: translateX(-50%) !important;
    border-right: 1px solid rgba(20, 58, 109, 0.11) !important;
    border-left: 1px solid rgba(20, 58, 109, 0.11) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 -10px 34px rgba(37, 73, 124, 0.045) !important;
  }

  .cjsr-status {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 16px 22px !important;
  }

  .cjsr-status .cjsr-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .cjsr-status-copy small {
    font-size: 12px !important;
  }

  .cjsr-status-copy strong {
    margin-top: 3px !important;
    font-size: 15px !important;
  }

  .cjsr-capabilities .cjsr-section-head {
    padding-top: 54px !important;
  }
}

@media (min-width: 781px) and (max-width: 1120px) {
  .cjsr-wide {
    padding-right: 48px !important;
    padding-left: 48px !important;
  }

  .cjsr-hero-copy {
    width: 44% !important;
  }

  .cjsr-hero h1 {
    font-size: 56px !important;
  }

  .cjsr-hero-statement {
    font-size: 21px !important;
  }

  .cjsr-status {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

@media (max-width: 780px) {
  .cjsr-nav {
    background: rgba(249, 252, 255, 0.88) !important;
    backdrop-filter: blur(14px) !important;
  }

  .cjsr-hero::before {
    content: none !important;
  }

  .cjsr-hero-image {
    filter: saturate(0.92) brightness(1.04) !important;
  }
}