/* =========================================================
   TSOL DESKTOP STABILITY FIX
   Loaded LAST. Desktop only (761px+).
   Fixes:
   1) old global sticky/floating header overlay
   2) missing architectural header layout
   3) missing Vamp seal desktop presentation
   4) Contact Vamp mini/coda circle enforcement
   ========================================================= */

@media (min-width: 761px) {

  /* -------------------------------------------------------
     INDEX / ARCHITECTURAL HEADER
     The old .topbar rule in tsol.css is globally sticky.
     On desktop this header becomes normal document flow.
     ------------------------------------------------------- */
  .topbar.topbar-architectural {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 10 !important;
    height: auto !important;
    min-height: 154px;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 22px 38px 0 !important;
    background: linear-gradient(180deg, rgba(1,6,12,.94), rgba(1,6,12,.72)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(151,185,214,.24) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .topbar-architectural .identity-row {
    width: 100%;
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 36px;
  }

  .topbar-architectural .wordmark {
    flex: 0 1 auto;
    min-width: 0;
  }

  .topbar-architectural .nav-row {
    width: 100%;
    min-width: 0;
    display: block !important;
    border-top: 1px solid rgba(151,185,214,.16);
    padding: 12px 0 14px;
  }

  .topbar-architectural .nav-row .nav {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 18px 30px;
  }

  .topbar-architectural .menu {
    display: none !important;
  }

  /* Give the hero its own breathing room now that the header is not overlaying it. */
  .topbar-architectural + .mobile-nav + main,
  .topbar-architectural ~ main {
    scroll-margin-top: 20px;
  }

  /* -------------------------------------------------------
     INDEX / VAMP ID SEAL — DESKTOP
     These rules previously existed only in mobile CSS.
     ------------------------------------------------------- */
  .tsol-vamp-seal {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    text-decoration: none !important;
    z-index: 2;
  }

  .tsol-vamp-ring {
    position: relative !important;
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 72px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(120,205,255,.78) !important;
    background: #030b15 !important;
    box-shadow:
      0 0 0 4px rgba(40,130,210,.05),
      0 0 24px rgba(45,150,255,.20),
      inset 0 0 18px rgba(60,160,255,.10) !important;
  }

  .tsol-vamp-ring img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
  }

  .tsol-vamp-ring::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3028;
    box-shadow: 0 0 6px #ff3028, 0 0 15px rgba(255,48,40,.68);
    pointer-events: none;
  }

  .tsol-vamp-id {
    display: grid !important;
    gap: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1;
    letter-spacing: .15em;
    color: rgba(220,238,255,.84);
  }

  .tsol-vamp-id small {
    font-size: 7px;
    color: rgba(100,180,235,.68);
  }

  .tsol-vamp-id strong {
    font-size: 9px;
    font-weight: 500;
  }

  .tsol-vamp-seal:hover .tsol-vamp-ring {
    border-color: rgba(180,230,255,.96) !important;
    box-shadow:
      0 0 0 5px rgba(50,145,220,.07),
      0 0 30px rgba(50,165,255,.28),
      inset 0 0 22px rgba(70,175,255,.13) !important;
  }

  /* -------------------------------------------------------
     CONTACT / VAMP CIRCLES — DESKTOP HARD ENFORCEMENT
     ------------------------------------------------------- */
  .contact-vamp-mini-ring {
    display: block !important;
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    min-height: 118px !important;
    max-width: 118px !important;
    max-height: 118px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(105,171,255,.76) !important;
    background: #030b15 !important;
    box-shadow: 0 0 0 5px rgba(40,130,210,.04), 0 0 38px rgba(28,126,255,.18) !important;
  }

  .contact-vamp-mini-ring img,
  .contact-vamp-coda-ring img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
  }

  .contact-vamp-coda-seal {
    width: clamp(270px, 29vw, 360px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    display: grid !important;
    place-items: center !important;
  }

  .contact-vamp-coda-ring {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 9px !important;
    border: 2px solid rgba(59,155,255,.94) !important;
    background: #020914 !important;
    box-shadow:
      0 0 0 1px rgba(172,222,255,.20),
      0 0 0 8px rgba(31,118,214,.05),
      0 0 44px rgba(24,130,255,.32),
      0 0 100px rgba(16,94,203,.18) !important;
  }

  /* Inner pages should not inherit an accidental floating header either. */
  .inner-page .inner-topbar {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* Slightly tighter wide-tablet / small-desktop proportions. */
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar.topbar-architectural {
    padding-inline: 24px !important;
  }
  .topbar-architectural .nav-row .nav {
    gap: 14px 20px;
  }
  .tsol-vamp-ring {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    flex-basis: 64px !important;
  }
  .tsol-vamp-id { display:none !important; }
}