/* SX AGENCY — Services layout parity patch (28 October 2026)
   Purpose: match the shared navigation and Solutions content grid.
   Scope: Services page only. Other website files remain unchanged.
*/

/* Desktop: override the miniature header used by the Services mockup.
   Match the original shared desktop navigation's glass capsule and sizing. */
@media (min-width:1181px) {
  body.sx-services-reimagined > .site-header {
    position:absolute !important;
    inset:0 0 auto !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    transform:none !important;
    width:min(1540px, calc(100% - 44px)) !important;
    max-width:none !important;
    height:86px !important;
    margin:14px auto 0 !important;
    padding:0 18px 0 16px !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:22px !important;
    align-items:center !important;
    justify-content:normal !important;
    border:1px solid rgba(232,236,247,.17);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(20,21,26,.80),rgba(8,8,10,.90) 68%,rgba(6,6,8,.93));
    box-shadow:0 14px 54px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.03);
    overflow:hidden;
  }
  body.sx-services-reimagined .site-header .brand {
    position:relative;
    z-index:2;
    flex:0 0 auto;
    gap:18px !important;
    padding-left:10px;
  }
  body.sx-services-reimagined .site-header .brand-mark {
    font-size:36px !important;
    letter-spacing:-4.8px !important;
  }
  body.sx-services-reimagined .site-header .brand-name {
    font-size:12px !important;
    letter-spacing:5px !important;
  }
  body.sx-services-reimagined .site-header .brand-rule {
    display:block;
    width:54px !important;
    margin-left:2px;
    opacity:1;
  }
  body.sx-services-reimagined .site-header .nav,
  body.sx-services-reimagined .site-header .nav.sx-nav-single-bubble {
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
    flex-direction:row !important;
    gap:6px !important;
    padding:0 !important;
    margin:0 !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    isolation:isolate;
  }
  body.sx-services-reimagined .site-header .nav > a:not(.button) {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px !important;
    font-weight:500;
    line-height:1.2;
    min-height:54px;
    padding:0 20px !important;
    border-radius:999px;
    letter-spacing:.12px;
  }
  body.sx-services-reimagined .site-header .nav > a.nav-current,
  body.sx-services-reimagined .site-header .nav > a[aria-current="page"] {
    background:transparent;
    border-color:transparent;
    box-shadow:none;
  }
  body.sx-services-reimagined .site-header .header-cta.sx-glass-cta {
    display:inline-flex;
    height:44px !important;
    min-height:44px !important;
    min-width:198px !important;
    padding:5px 6px 5px 17px !important;
    gap:19px;
    font-size:12px !important;
    align-items:center;
    justify-content:space-between;
    margin:0;
  }
  body.sx-services-reimagined .site-header .header-cta .sx-cta-arrow {
    width:29px !important;
    height:29px !important;
    min-width:29px;
    min-height:29px;
  }
  body.sx-services-reimagined .site-header .menu-toggle {display:none !important}
}

@media (min-width:1181px) and (max-width:1380px) {
  body.sx-services-reimagined .site-header {gap:12px !important}
  body.sx-services-reimagined .site-header .brand-rule {display:none}
  body.sx-services-reimagined .site-header .nav > a:not(.button) {
    font-size:12px !important;
    padding:0 11px !important;
  }
  body.sx-services-reimagined .site-header .header-cta.sx-glass-cta {min-width:158px !important}
}

/* Identical desktop content gutter as the approved Solutions page.
   Solutions uses calc(100% - 11.7vw) between 1060 and 1671px. */
@media (min-width:1060px) {
  body.sx-services-reimagined .sxs-hero-inner,
  body.sx-services-reimagined .sxs-service-grid,
  body.sx-services-reimagined .sxs-cta-panel,
  body.sx-services-reimagined .footer .section-wrap {
    width:calc(100% - 11.7vw) !important;
    max-width:1452px !important;
    margin-left:auto;
    margin-right:auto;
  }
  body.sx-services-reimagined .sxs-service-grid {column-gap:20px;row-gap:20px}
}
@media (min-width:1650px) {
  body.sx-services-reimagined .sxs-hero-inner,
  body.sx-services-reimagined .sxs-service-grid,
  body.sx-services-reimagined .sxs-cta-panel,
  body.sx-services-reimagined .footer .section-wrap {
    width:1452px !important;
    max-width:1452px !important;
    margin-left:calc((100% - 1476px)/2) !important;
    margin-right:0 !important;
  }
}

/* The Services cards were visually smaller than the rest of the site because
   their desktop height was capped at 410px; use a proportionate hero-card size. */
@media (min-width:1250px) {
  body.sx-services-reimagined .sxs-service-card {
    height:clamp(390px,28vw,460px) !important;
  }
  body.sx-services-reimagined .sxs-card-copy {
    padding:30px 0 28px 32px;
  }
  body.sx-services-reimagined .sxs-card-copy p {
    font-size:clamp(13px, .92vw, 15px);
    line-height:1.55;
    max-width:290px;
  }
  body.sx-services-reimagined .sxs-card-copy li {font-size:clamp(11.5px,.8vw,13px)}
  body.sx-services-reimagined .sxs-card-illustration {width:51%;}
}

/* <=1180px follows the same mobile navigation break used on Solutions.
   This explicitly supersedes the old Services-only 901-1180 desktop-nav hack. */
@media (max-width:1180px) {
  body.sx-services-reimagined > .site-header {
    position:absolute !important;
    inset:0 0 auto !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    height:72px !important;
    margin:0 !important;
    padding:0 20px !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    border-radius:0 !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    overflow:visible !important;
    background:linear-gradient(180deg,rgba(2,3,5,.90),rgba(2,3,5,.08)) !important;
  }
  body.sx-services-reimagined .site-header .brand-mark {font-size:31px !important;letter-spacing:-4px}
  body.sx-services-reimagined .site-header .brand-name {font-size:10px !important;letter-spacing:3px !important}
  body.sx-services-reimagined .site-header .brand-rule {display:none !important}
  body.sx-services-reimagined .site-header .header-cta.sx-glass-cta {display:none !important}
  body.sx-services-reimagined .site-header .menu-toggle {display:flex !important;position:relative;z-index:35}
  body.sx-services-reimagined .site-header .nav:not(.open) {display:none !important}
  body.sx-services-reimagined .site-header .nav.open {
    position:fixed !important;
    inset:0 0 0 auto !important;
    top:0 !important;
    left:auto !important;
    right:0 !important;
    bottom:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:min(440px,90vw) !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    padding:clamp(98px,15vh,142px) clamp(30px,7vw,50px) 32px !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.12) !important;
    border-radius:0 !important;
    background:linear-gradient(156deg,#18181c,#0e0e11 52%,#080809) !important;
    box-shadow:-24px 0 80px rgba(0,0,0,.38) !important;
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:32 !important;
    gap:0 !important;
  }
  body.sx-services-reimagined .site-header .nav.open > a:not(.button) {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:clamp(28px,7.5vw,37px) !important;
    line-height:1.15;
    letter-spacing:-1.25px;
    padding:17px 0 21px !important;
    min-height:auto;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.10);
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  body.sx-services-reimagined .site-header .nav.open .nav-intro,
  body.sx-services-reimagined .site-header .nav.open .nav-footer {display:block !important}
  body.sx-services-reimagined .site-header .nav.open .sx-nav-indicator {display:none !important}
  body.sx-services-reimagined .sxs-hero-inner {width:calc(100% - 70px)}
  body.sx-services-reimagined .sxs-service-grid {width:calc(100% - 70px)}
  body.sx-services-reimagined .sxs-cta-panel {width:calc(100% - 70px)}
  body.sx-services-reimagined .footer .section-wrap {width:calc(100% - 70px)}
}
@media (max-width:750px) {
  body.sx-services-reimagined .sxs-hero-inner,
  body.sx-services-reimagined .sxs-service-grid,
  body.sx-services-reimagined .sxs-cta-panel,
  body.sx-services-reimagined .footer .section-wrap {width:calc(100% - 38px) !important}
  body.sx-services-reimagined .site-header .brand-mark {font-size:30px !important}
}

/* Solutions keeps an 86px shared header through tablet width; mirror it. */
@media (min-width:751px) and (max-width:1180px) {
  body.sx-services-reimagined > .site-header {
    height:86px !important;
    padding:0 26px !important;
  }
  body.sx-services-reimagined .site-header .brand {gap:17px !important}
  body.sx-services-reimagined .site-header .brand-mark {
    font-size:36px !important;
    letter-spacing:-5px !important;
  }
  body.sx-services-reimagined .site-header .brand-name {
    font-size:12px !important;
    letter-spacing:3px !important;
  }
}
@media (max-width:750px) {
  body.sx-services-reimagined > .site-header {padding:0 26px !important}
  body.sx-services-reimagined .site-header .brand-mark {font-size:31px !important}
  body.sx-services-reimagined .site-header .brand-name {font-size:10px !important;letter-spacing:3px !important}
}