/* SX AGENCY / MOBILE VISUAL AUDIT — 2026-11-01
   Mobile/tablet-only background composition, image sharpness and safe spacing.
   All marketing copy, CTA links, animations and desktop geometry are retained.
   Loaded last on all seven pages to prevent per-page breakpoint collisions. */
@media (max-width: 900px) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
  /* The header stays readable in front of the artwork, without clipping the SX mark. */
  .site-header .brand { min-width: 0; }
  .site-header .brand-mark { flex-shrink: 0; }
  /* Homepage: prevent the planet's bright rim from washing out the headline. */
  body.page-home .hero::before {
    background-position: 68% top;
    background-size: auto 100%;
  }
  body.page-home .hero::after {
    background:linear-gradient(90deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.75) 40%,rgba(0,0,0,.40) 76%,rgba(0,0,0,.18) 100%),
               linear-gradient(0deg,rgba(0,0,0,.46),transparent 34%);
  }
  body.page-home .hero-copy { text-shadow: 0 2px 15px rgba(0,0,0,.36); }
  body.page-home .home-closer {
    background-position: 53% bottom;
    background-size: cover;
    background-color: #000;
  }
  /* Solutions: lower banner and service cards remain distinguishable over a busy star field. */
  body.sx-reference-page .sxref-scene-art { background-position: 63% top; }
  body.sx-reference-page .sxref-scene-tone {
    background:linear-gradient(180deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.36) 38%,rgba(0,0,0,.48) 100%);
  }
  body.sx-reference-page .sxref-explore-banner {
    background:linear-gradient(105deg,rgba(4,5,8,.83),rgba(4,5,8,.72) 52%,rgba(4,5,8,.65));
    -webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);
  }
  /* Services: maintain source aspect ratio; full-bleed stage stays behind live text. */
  body.sx-services-reimagined .sxs-hero-art {
    background-size:auto 100%;background-position:50% top;
  }
  body.sx-services-reimagined .sxs-space-shade {
    background:linear-gradient(180deg,rgba(0,0,0,.60) 0%,rgba(0,0,0,.46) 40%,rgba(0,0,0,.23) 70%,rgba(0,0,0,.05) 100%);
  }
  /* CRM lower pages: preserve scenic subject rather than blowing up landscape horizontally. */
  body.page-crm .sxcrm-showcase-scene {
    background-size:cover,auto 100%;
    background-position:center center,center center;
  }
  /* Work: image art uses its portrait source, not distorted sizing. */
  body.sxw-page .sxw-project-art img { object-fit:cover; width:100%;height:100%; }
  body.sxw-page .sx-work-final-cta .sxw-final-scene { background-position: 58% 72%; }
  /* About: readable hero and scenic CTA without an overbright patch under headlines. */
  body.page-about .sx-about-hero-cosmos {background-position:center,left 36% top 7%;}
  body.page-about .sx-about-hero::after {pointer-events:none;}
  /* Contact: original horizon has a 5.33:1 ratio; scale by HEIGHT to avoid squashing.
     The faded layer lives inside the contact section, never a second rectangular strip. */
  body.page-contact .sx-contact-experience::after {
    background-size:100% 100%,auto 100%;
    background-position:center bottom,center bottom;
  }
}
@media (max-width: 600px) {
  body.page-home .hero::before {background-position:69% top;}
  body.page-home .hero::after {
    background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.76) 60%,rgba(0,0,0,.48)),
               linear-gradient(0deg,rgba(0,0,0,.53),transparent 43%);
  }
  body.page-home .home-closer {background-position:52% bottom;background-size:auto 100%;}
  body.sx-reference-page .sxref-scene-tone {
    background:linear-gradient(180deg,rgba(0,0,0,.43),rgba(0,0,0,.36) 38%,rgba(0,0,0,.46));
  }
  body.sx-services-reimagined .sxs-hero-art {background-size:auto 100%;background-position:50% top;}
  body.sx-services-reimagined .sxs-hero-copy {max-width:calc(100vw - 38px);}
  body.sx-services-reimagined .sxs-service-card .sxs-card-illustration {
    max-width:100%;overflow:hidden!important;
  }
  body.sx-services-reimagined .sxs-service-card .sxs-card-illustration img {
    object-fit:contain!important;object-position:center;
  }
  body.sx-services-reimagined .sxs-cta-panel {
    background-position:center,center 68%;
  }
  body.page-crm .sxcrm-star-layer {
    background-size:cover,auto 38%;
    background-position:center,center top;
  }
  body.page-crm .sxcrm-showcase-scene {
    background-image:linear-gradient(180deg,#020305 0%,rgba(2,3,5,.60) 20%,rgba(2,3,5,.44) 55%,rgba(2,3,5,.25) 75%,#020305 100%),url('images/sx-crm-alpine-lake-monochrome.webp');
    background-position:center,center bottom;
    background-size:cover,auto 100%;
  }
  body.sxw-page .sxw-hero-bg {background-position:58% center;}
  body.sxw-page .sxw-project-art img {filter:contrast(1.05) brightness(.90);}
  body.sxw-page .sxw-project:nth-child(3) .sxw-project-art img {object-position:50% 50%;}
  body.sxw-page .sx-work-final-cta .sxw-final-scene {background-position:55% 75%;}
  body.page-about .sx-about-hero-cosmos {background-position:center,left 25% top 6%;}
  body.page-contact .sx-contact-hero-art {background-position:61% top;}
  body.page-contact .sx-contact-experience::after {
    height:208px;
    background-size:100% 100%,auto 100%;
    background-position:center bottom,51% bottom;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.13) 15%,rgba(0,0,0,.86) 36%,#000 57%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.13) 15%,rgba(0,0,0,.86) 36%,#000 57%,#000 86%,transparent 100%);
  }
}
@media (max-width: 380px) {
  body.page-home .hero::before {background-position:70% top;}
  body.page-home .hero-copy {width:calc(100% - 32px);}
  body.sx-services-reimagined .sxs-hero-copy h1 {font-size:31px;}
  body.sx-services-reimagined .sxs-hero-actions {column-gap:7px;}
  body.sxw-page .sx-work-final-cta .sxw-final-scene {background-position:57% 73%;}
}
@media (prefers-reduced-motion:reduce) {
  body.page-home .hero::before,
  body.page-contact .sx-contact-experience::after,
  body.page-crm .sxcrm-showcase-scene {transition:none!important;}
}
/* Portfolio visuals must paint above the card background; otherwise on some
   mobile GPU compositors a negative stacking layer vanishes entirely. */
@media(max-width:900px){
  body.sxw-page .sxw-project-art{z-index:0}
  body.sxw-page .sxw-project-shade{z-index:1}
  body.sxw-page .sxw-project-copy,
  body.sxw-page .sxw-project-category,
  body.sxw-page .sxw-project-open{z-index:2}
}