
/* Shared CosmicWebTech logo styling */
.brand { display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; }
.brand-logo { display:block; width:300px; max-width:100%; height:100px; object-fit:contain; object-position:left center; }
@media (max-width:1000px) { .brand-logo { width:300px; height:100px; } }

/* Footer styles extracted from the original index.html */

    #nx-agency-footer {
      --nf-bg: #19172d;
      --nf-purple: #8b78ff;
      --nf-text: #f7f6ff;
      --nf-muted: #aaa7c2;
      background: var(--nf-bg);
      color: var(--nf-text);
      padding: 68px 22px 0;
      font-family: Inter, Arial, sans-serif;
      overflow: hidden;
      box-sizing: border-box;
    }

    #nx-agency-footer *,
    #nx-agency-footer *::before,
    #nx-agency-footer *::after {
      box-sizing: border-box;
    }

    #nx-agency-footer a {
      color: inherit;
      text-decoration: none;
    }

    #nx-agency-footer .nf-container {
      max-width: 1180px;
      margin: 0 auto;
    }

    #nx-agency-footer .nf-top {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 50px;
      align-items: center;
      padding-bottom: 44px;
      border-bottom: 1px solid #ffffff18;
    }

    #nx-agency-footer .nf-eyebrow {
      color: var(--nf-purple);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    #nx-agency-footer .nf-cta-title {
      max-width: 550px;
      margin: 15px 0 13px;
      font-size: clamp(31px, 4.3vw, 49px);
      line-height: 1.1;
      letter-spacing: -1.8px;
      font-weight: 800;
    }

    #nx-agency-footer .nf-cta-title span {
      color: var(--nf-purple);
    }

    #nx-agency-footer .nf-cta-copy {
      max-width: 460px;
      margin: 0;
      color: var(--nf-muted);
      font-size: 14px;
      line-height: 1.8;
    }

    #nx-agency-footer .nf-cta-action {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    #nx-agency-footer .nf-main-button {
      min-height: 52px;
      padding: 0 21px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 17px;
      background: var(--nf-purple);
      color: #fff;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 800;
      transition: transform .2s, background .2s;
    }

    #nx-agency-footer .nf-main-button:hover {
      background: #7560f2;
      transform: translateY(-3px);
    }

    #nx-agency-footer .nf-main-button span {
      font-size: 19px;
    }

    #nx-agency-footer .nf-columns {
      display: grid;
      grid-template-columns: 1.45fr .85fr .95fr 1.15fr;
      gap: 35px;
      padding: 43px 0;
    }

    #nx-agency-footer .nf-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 19px;
    }

    #nx-agency-footer .nf-brand-mark {
      width: 43px;
      height: 43px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: linear-gradient(135deg, #9b88ff, #7057f5);
      color: #fff;
      font-size: 22px;
      font-weight: 900;
    }

    #nx-agency-footer .nf-brand-name {
      display: block;
      font-size: 19px;
      font-weight: 850;
      letter-spacing: -.6px;
    }

    #nx-agency-footer .nf-brand-sub {
      display: block;
      color: var(--nf-muted);
      font-size: 10px;
      margin-top: 4px;
      letter-spacing: 1.1px;
      text-transform: uppercase;
    }

    #nx-agency-footer .nf-brand-copy {
      max-width: 275px;
      color: var(--nf-muted);
      font-size: 13px;
      line-height: 1.9;
      margin: 0 0 22px;
    }

    #nx-agency-footer .nf-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    #nx-agency-footer .nf-social {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ffffff20;
      background: #ffffff08;
      color: #fff;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 800;
      transition: background .2s, border-color .2s, transform .2s;
    }

    #nx-agency-footer .nf-social:hover {
      background: var(--nf-purple);
      border-color: var(--nf-purple);
      transform: translateY(-3px);
    }

    #nx-agency-footer .nf-col-title {
      margin: 6px 0 20px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .2px;
    }

    #nx-agency-footer .nf-link-list {
      list-style: none;
      display: grid;
      gap: 14px;
      padding: 0;
      margin: 0;
    }

    #nx-agency-footer .nf-link-list a {
      display: inline-block;
      color: var(--nf-muted);
      font-size: 12px;
      line-height: 1.6;
      transition: color .2s, transform .2s;
    }

    #nx-agency-footer .nf-link-list a:hover {
      color: #fff;
      transform: translateX(3px);
    }

    #nx-agency-footer .nf-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin-bottom: 17px;
      min-width: 0;
    }

    #nx-agency-footer .nf-contact-icon {
      flex: 0 0 32px;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      color: var(--nf-purple);
      background: #8b78ff19;
      border-radius: 9px;
      font-size: 15px;
    }

    #nx-agency-footer .nf-contact-label {
      display: block;
      color: var(--nf-muted);
      font-size: 10px;
      margin-bottom: 5px;
    }

    #nx-agency-footer .nf-contact-value {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.7;
      overflow-wrap: anywhere;
    }

    #nx-agency-footer .nf-newsletter {
      padding: 23px;
      border: 1px solid #ffffff15;
      border-radius: 17px;
      background: #ffffff08;
      margin-bottom: 28px;
    }

    #nx-agency-footer .nf-newsletter-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 17px;
    }

    #nx-agency-footer .nf-newsletter h3 {
      font-size: 16px;
      margin: 0 0 7px;
      font-weight: 800;
    }

    #nx-agency-footer .nf-newsletter p {
      margin: 0;
      color: var(--nf-muted);
      font-size: 12px;
      line-height: 1.7;
    }

    #nx-agency-footer .nf-form {
      display: flex;
      gap: 9px;
      width: 100%;
      max-width: 440px;
    }

    #nx-agency-footer .nf-form input {
      min-width: 0;
      flex: 1;
      height: 46px;
      border-radius: 10px;
      border: 1px solid #ffffff20;
      background: #ffffff09;
      color: #fff;
      padding: 0 13px;
      font: inherit;
      font-size: 12px;
      outline: none;
    }

    #nx-agency-footer .nf-form input::placeholder {
      color: #aaa7c2;
    }

    #nx-agency-footer .nf-form input:focus {
      border-color: var(--nf-purple);
      box-shadow: 0 0 0 3px #8b78ff22;
    }

    #nx-agency-footer .nf-form button {
      flex-shrink: 0;
      min-width: 49px;
      height: 46px;
      padding: 0 15px;
      border: 0;
      border-radius: 10px;
      background: var(--nf-purple);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: background .2s;
    }

    #nx-agency-footer .nf-form button:hover {
      background: #7560f2;
    }

    #nx-agency-footer .nf-newsletter-status {
      display: none;
      margin-top: 12px;
      color: #e0d9ff;
      font-size: 12px;
      line-height: 1.6;
    }

    #nx-agency-footer .nf-newsletter-status.nf-visible {
      display: block;
    }

    #nx-agency-footer .nf-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
      padding: 21px 0;
      border-top: 1px solid #ffffff18;
    }

    #nx-agency-footer .nf-copyright {
      color: var(--nf-muted);
      font-size: 11px;
      line-height: 1.7;
    }

    #nx-agency-footer .nf-bottom-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    #nx-agency-footer .nf-bottom-links a {
      color: var(--nf-muted);
      font-size: 11px;
      transition: color .2s;
    }

    #nx-agency-footer .nf-bottom-links a:hover {
      color: #fff;
    }

    #nx-agency-footer .nf-back-top {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      border: 1px solid #ffffff25;
      color: #fff;
      transition: background .2s;
    }

    #nx-agency-footer .nf-back-top:hover {
      background: var(--nf-purple);
    }

    @media (max-width: 950px) {
      #nx-agency-footer .nf-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 28px;
      }

      #nx-agency-footer .nf-top {
        gap: 28px;
      }
    }

    @media (max-width: 600px) {
      #nx-agency-footer {
        padding: 47px 17px 0;
      }

      #nx-agency-footer .nf-top {
        grid-template-columns: 1fr;
        gap: 23px;
        padding-bottom: 32px;
      }

      #nx-agency-footer .nf-cta-title {
        font-size: 37px;
        letter-spacing: -1.4px;
      }

      #nx-agency-footer .nf-cta-copy {
        font-size: 13px;
      }

      #nx-agency-footer .nf-cta-action {
        justify-content: flex-start;
      }

      #nx-agency-footer .nf-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 18px;
        padding: 32px 0;
      }

      #nx-agency-footer .nf-brand-column {
        grid-column: 1 / -1;
      }

      #nx-agency-footer .nf-brand-copy {
        max-width: 100%;
      }

      #nx-agency-footer .nf-newsletter {
        padding: 19px 15px;
      }

      #nx-agency-footer .nf-form {
        max-width: none;
      }

      #nx-agency-footer .nf-bottom {
        align-items: flex-start;
      }

      #nx-agency-footer .nf-bottom-links {
        gap: 13px;
      }
    }

    @media (max-width: 360px) {
      #nx-agency-footer .nf-columns {
        grid-template-columns: 1fr;
      }

      #nx-agency-footer .nf-brand-column {
        grid-column: auto;
      }

      #nx-agency-footer .nf-form button {
        padding: 0 11px;
      }
    }

/* Sticky shared header: stays at the top while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(248, 248, 246, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #e8e8e3;
}

/* Keep navigation dropdowns above page content */
.site-header .mega-menu {
  z-index: 1001;
}



/* Sticky shared header fix:
   The announcement bar is moved before #site-header by header-footer.js.
   The placeholder wrapper, not the inner header, must be sticky so it can
   remain fixed in the viewport throughout the page scroll. */
#site-header.shared-sticky-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  align-self: start;
}
#site-header.shared-sticky-header > .site-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  width: 100%;
}
