/* SX Agency — reference-matched homepage repair (31 October 2026).
   Additive homepage-only overrides. All existing copy and live hrefs are preserved.
   Original concept artwork supplies only a CLEANED decorative space plate:
   interface, navigation, labels and buttons are separate, semantic HTML. */
body.page-home{overflow-x:clip;background:#020407}
@media (min-width:1181px){
  body.page-home .site-header{
    width:70.0vw;max-width:none;height:3.8vw;min-height:65px;
    margin:.91vw auto 0;padding:0 1.13vw;gap:.7vw;
    grid-template-columns:1fr auto 1fr;
    border:1px solid rgba(207,218,237,.28);
    border-radius:99px;
    box-shadow:0 16px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(238,246,255,.15);
    background:linear-gradient(180deg,rgba(44,49,60,.86),rgba(6,8,12,.91) 62%,rgba(3,5,8,.89))
  }
  body.page-home .site-header .brand{gap:.87vw;padding-left:.1vw}
  body.page-home .site-header .brand-mark{font-size:1.95vw;letter-spacing:-.21vw}
  body.page-home .site-header .brand-name{font-size:.51vw;letter-spacing:.20vw}
  body.page-home .site-header .brand-rule{width:2.6vw;margin-left:0}
  body.page-home .site-header .nav{gap:.05vw}
  body.page-home .site-header .nav>a:not(.button){font-size:.64vw;padding:0 .80vw;min-height:2.49vw;white-space:nowrap}
  body.page-home .site-header .nav.sx-nav-single-bubble>.sx-nav-indicator{height:2.49vw}
  body.page-home .site-header .header-cta{height:2.52vw;min-height:2.52vw;min-width:9.7vw;font-size:.64vw}
  body.page-home .site-header .header-cta .sx-cta-arrow{width:1.55vw;height:1.55vw;min-width:1.55vw;min-height:1.55vw}
  body.page-home .hero{
    min-height:28.27vw;height:28.27vw;max-height:none;
    margin-top:-4.71vw;padding-top:0;display:block;
    background:#020408;overflow:hidden
  }
  body.page-home .hero::before{
    background-image:url('images/sx-home-hero-reference-2x.webp');
    background-repeat:no-repeat;background-size:100% 100%;background-position:50% 50%;
    filter:none;opacity:1
  }
  body.page-home .hero::after{display:none}
  body.page-home .hero-copy{
    position:absolute;left:17.51vw;top:7.96vw;right:auto;
    width:42.8vw;max-width:none;margin:0;padding:0;transform:none;
    text-align:left;z-index:3
  }
  body.page-home .hero-copy .eyebrow{font-size:.62vw;line-height:1.4;letter-spacing:.24vw;color:#e2e5eb}
  body.page-home .hero-copy .eyebrow i{padding:0 .48vw}
  body.page-home .hero h1{
    font-size:3.45vw;line-height:.98;letter-spacing:-.17vw;
    font-weight:500;margin:1.23vw 0 .83vw;white-space:normal
  }
  body.page-home .hero h1 span{color:#a6a9b4!important;-webkit-text-fill-color:#a6a9b4}
  body.page-home .hero-intro{max-width:28.4vw;font-size:.97vw;line-height:1.52;margin:0;color:#d8dbe1}
  body.page-home .hero-actions{justify-content:flex-start;gap:1.28vw;margin-top:1.61vw}
  body.page-home .hero-actions>.sx-glass-cta{height:2.70vw;min-height:2.70vw;padding:0 .7vw 0 1.0vw;gap:1.05vw;font-size:.70vw;white-space:nowrap;transform:none}
  body.page-home .hero-actions>.sx-glass-cta .sx-cta-arrow{width:1.90vw;height:1.90vw;min-width:1.9vw;min-height:1.9vw}
  body.page-home .hero-services{
    bottom:2.0vw;left:17.51vw;transform:none;
    width:47.5vw;max-width:none;gap:2.0vw;
    font-size:.54vw;letter-spacing:.17vw;justify-content:center
  }
  body.page-home .hero-services i{height:1.20vw;width:1px}
  body.page-home .home-directory{
    width:68.47vw;max-width:none;padding:1.31vw 0 2.55vw;
    background:transparent;position:relative
  }
  body.page-home .home-directory::before{
    background:linear-gradient(180deg,rgba(1,3,6,.05),rgba(1,3,6,.18)),url('images/sx-home-discover-space.webp') right top/100% 100% no-repeat;
  }
  body.page-home .home-directory-heading{
    padding:0 2.47vw;gap:.74vw 3.2vw;
    margin-bottom:.82vw;align-items:end
  }
  body.page-home .home-directory-heading .eyebrow{font-size:.50vw;letter-spacing:.22vw}
  body.page-home .home-directory-heading .eyebrow-line{width:2.45vw;margin-right:.7vw}
  body.page-home .home-directory-heading h2{font-size:2.58vw;letter-spacing:-.12vw;line-height:1.03}
  body.page-home .home-directory-heading>p:last-child{max-width:18.3vw;font-size:.73vw;line-height:1.65;margin:0 0 1.00vw}
  body.page-home .home-directory-grid{gap:1.35vw}
  body.page-home .home-directory .directory-card{
    min-height:18.2vw;height:18.2vw;padding:1.17vw 1.45vw 3.0vw;
    border-radius:.96vw;border:1px solid rgba(218,224,237,.40);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 26px rgba(0,0,0,.25)
  }
  body.page-home .home-directory .directory-card::before{
    background:radial-gradient(ellipse 68% 20% at 93% 0%,rgba(251,253,255,.56),transparent 94%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 24%);
    opacity:.84
  }
  body.page-home .home-directory .directory-card>span:first-child{font-size:.51vw;letter-spacing:.19vw}
  body.page-home .home-directory .directory-card>h3{font-size:1.41vw;line-height:1.1;letter-spacing:-.06vw;margin:.91vw 0 .42vw}
  body.page-home .home-directory .directory-card>p{font-size:.76vw;line-height:1.44;max-width:17.5vw}
  body.page-home .home-directory .directory-card>.sx-discovery-art,
  body.page-home .home-directory .directory-card>.sx-art-interfaces{
    height:78%;background-position:center bottom;background-size:cover;
    -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.28) 13%,black 36%);
    mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.28) 13%,black 36%);
  }
  body.page-home .home-directory .directory-card>b{width:2.40vw;height:2.40vw;right:.89vw;bottom:.89vw}
}
/* At tablet/mobile widths preserve a semantic stacked layout with readable buttons.
   Use the clean reference sky/planet, not the old grainy procedural background. */
@media (max-width:1180px){
 body.page-home .hero::before{background-image:url('images/sx-home-hero-reference-clean.webp');background-position:63% center;background-size:auto 100%}
 body.page-home .hero::after{display:block;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.54) 60%,rgba(0,0,0,.12)),linear-gradient(to top,rgba(1,3,6,.55),transparent 35%)}
 body.page-home .home-directory::before{background:linear-gradient(180deg,#030508,#020407)}
 body.page-home .home-directory .directory-card::before{opacity:.75}
}
@media (max-width:760px){
 body.page-home .hero::before{background-position:68% center;opacity:.84}
 body.page-home .hero-copy{z-index:4}
 body.page-home .hero h1{white-space:normal}
 body.page-home .home-directory .directory-card>.sx-discovery-art{background-size:cover}
}
/* Final reference-difference pass: hero spacing and left optical alignment. */
@media(min-width:1181px){
 body.page-home .hero-copy{top:7.84vw}
 body.page-home .hero h1{margin-top:.80vw}
 body.page-home .hero-actions{margin-top:1.00vw}
 body.page-home .hero-actions>.sx-glass-cta{min-width:12.35vw;font-size:.76vw}
 body.page-home .hero-services{bottom:1.60vw}
 body.page-home .home-directory{transform:translateX(-.67vw)}
}