/* SonoXR THEME (owner 31 Oct 2026: "use old mbb for new sono site … switch logo, get rid of Cyberpunk vibe and use SONO
   branding/theme"). Loaded after style.css on every page: chrome, silver and graphite on near-black, one face (Space Grotesk),
   no neon glow, no custom cursor. Colors and fonts were swapped at the source; this layer settles what a swap can't. */
:root { --sxr-ease:cubic-bezier(.22,1,.36,1); --sxr-chrome:linear-gradient(180deg,#f4f7fa,#a9b2bc); --sxr-silver:#cbd2d9; --sxr-line:rgba(232,237,244,.14); --sxr-line-strong:rgba(232,237,244,.3); }
html, body { background:#0a0a0a; }
body { font-family:'SXR Space Grotesk','Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; }

/* no custom cursor */
#custom-cursor, #custom-cursor-ring, .custom-cursor, .cursor-dot, .cursor-ring { display:none !important; }
html, body { cursor:auto !important; }
a, button, [role="button"], label, select, .hoverable { cursor:pointer !important; }

/* no neon: headings and accents read as chrome, not glow */
h1, h2, h3, h4, .sec-h2, .section-title, .hero-title { text-shadow:none !important; letter-spacing:-.02em; }
.shimmer, .text-green, .section-title span, .ecosystem-title span, .video-expand-title span, .wwd-title span, .tech-stack-title span, .sec-h2 span {
  color:transparent !important; background:var(--sxr-chrome) !important; -webkit-background-clip:text !important; background-clip:text !important;
  text-shadow:none !important; animation:none !important; filter:none !important; }
[class*="glow"] { text-shadow:none !important; }

/* buttons: the SonoXR solid chrome pill and the outline pill */
.btn-primary { background:linear-gradient(180deg,#f4f7fa,#c3cbd3) !important; color:#0a0a0a !important; border-color:transparent !important; box-shadow:none !important; text-shadow:none !important; font-family:'SXR Space Grotesk',sans-serif; letter-spacing:.08em; }
.btn-primary:hover { background:linear-gradient(180deg,#ffffff,#d5dbe1) !important; box-shadow:0 10px 30px rgba(203,210,217,.18) !important; }
.btn-secondary { border-color:var(--sxr-line-strong) !important; color:#f4f7fa !important; box-shadow:none !important; text-shadow:none !important; }
.btn-secondary:hover { border-color:#f4f7fa !important; background:rgba(244,247,250,.06) !important; }

/* the header logo: the SonoXR wordmark */
/* same size and crop as sonoxr.media's header (owner 31 Oct 2026: "make logo same size as current"): the PNG's canvas padding is
   cropped away, 250px wide on desktop, 160px to 820px, 112–140px on phones */
.mbb-logo { display:inline-flex; align-items:center; }
.mbb-logo .sonoxr-wordmark { position:relative; display:block; width:250px; aspect-ratio:2056 / 280; overflow:hidden; }
.mbb-logo .sonoxr-wordmark img { position:absolute !important; display:block; width:105.642% !important; max-width:none !important; height:auto !important; left:-2.529%; top:-82.857%; filter:none !important; }
@media (max-width:820px) { .mbb-logo .sonoxr-wordmark { width:160px; } }
@media (max-width:540px) { .mbb-logo .sonoxr-wordmark { width:clamp(112px,30vw,140px); } }

/* HOME: SEE IT LIVE — SonoXR's own Showcase in the scroll-expand frame (owner 31 Oct 2026) */
.sxr-live { gap:18px; }
.sxr-live .sxr-anchor { position:relative; top:-90px; }
.sxr-live-eyebrow { margin:0; color:#cbd2d9; font:600 12px/1.4 'SXR Space Grotesk',sans-serif; letter-spacing:.22em; }
.sxr-live-lede { max-width:620px; margin:0 auto 10px; padding:0 20px; color:#a9b2bc; font-size:17px; line-height:1.6; text-align:center; }
.sxr-live-frame { position:relative; aspect-ratio:16/9; background:#05070a; border:1px solid rgba(232,237,244,.18); box-shadow:0 40px 120px rgba(0,0,0,.55); }
.sxr-live-still, .sxr-live-still img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.sxr-live-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity .8s cubic-bezier(.22,1,.36,1); }
.sxr-live-frame.is-loaded iframe { opacity:1; }
.sxr-live-shield { position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:center; padding:0 0 22px; border:0; background:transparent; cursor:pointer; }
.sxr-live-shield span { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:1px solid rgba(232,237,244,.3); border-radius:999px; background:rgba(10,10,10,.6); color:#f4f7fa; font:500 12px/1 'SXR Space Grotesk',sans-serif; letter-spacing:.14em; text-transform:uppercase; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:opacity .4s; }
.sxr-live-frame.is-full .sxr-live-shield, .sxr-live-frame.is-live .sxr-live-shield { pointer-events:none; }
.sxr-live-frame.is-full .sxr-live-shield span, .sxr-live-frame.is-live .sxr-live-shield span { opacity:0; }
.sxr-live-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 24px; margin-top:12px; }
.sxr-live-actions .video-expand-cta { margin-top:0; }
.sxr-live-open { display:inline-flex; align-items:center; min-height:44px; color:#cbd2d9; font-size:14px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(203,210,217,.4); }
@media (max-width:768px) { .sxr-live-frame { aspect-ratio:9/14; max-height:78vh; } }

/* GET QUOTE: the budget range from the SonoXR quote form (owner 31 Oct 2026: "more hybrid between new budget slider feature") */
.qw-budget { margin-top:6px; }
.cq-range { position:relative; height:36px; margin-top:12px; }
.cq-track { position:absolute; left:0; right:0; top:50%; height:34px; transform:translateY(-50%); border-radius:999px; background:rgba(238,242,246,.08); border:1px solid rgba(232,237,244,.14); }
.cq-track i { position:absolute; top:-1px; bottom:-1px; left:calc(15px + (100% - 30px) * var(--lo, 0) - 17px); right:calc(100% - 15px - (100% - 30px) * var(--hi, .17) - 17px); border-radius:999px; background:linear-gradient(180deg,#f4f7fa,#a9b2bc); box-shadow:0 0 18px rgba(238,242,246,.25); }
.cq-range input { position:absolute; inset:0; width:100%; height:100%; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; outline:none; }
.cq-range input::-webkit-slider-runnable-track { background:none; border:0; }
.cq-range input::-moz-range-track { background:none; border:0; }
.cq-range input::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; width:30px; height:30px; border:3px solid #0b0d10; border-radius:50%; background:#f4f7fa; box-shadow:0 2px 10px rgba(0,0,0,.5); cursor:grab; }
.cq-range input::-moz-range-thumb { pointer-events:auto; width:30px; height:30px; box-sizing:border-box; border:3px solid #0b0d10; border-radius:50%; background:#f4f7fa; box-shadow:0 2px 10px rgba(0,0,0,.5); cursor:grab; }
.cq-range input:focus-visible::-webkit-slider-thumb { outline:2px solid #cbd2d9; outline-offset:3px; }
.cq-budget { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:420px; margin:16px 0 0; color:#a9b2bc; }
.cq-budget b { color:#fff; font:600 clamp(20px,2vw,26px)/1 'SXR Space Grotesk',sans-serif; letter-spacing:-.01em; }
.sxr-live-still { transition:opacity .6s cubic-bezier(.22,1,.36,1) .3s; }
.sxr-live-frame.is-loaded .sxr-live-still { opacity:0; }

/* PHONES (mobile check, 31 Oct 2026): the old site ran past the screen edge at 320–375 px in four places */
@media (max-width:480px) {
  .mbb-nav-right .mbb-login { display:none !important; }   /* LOGIN stays in the footer (Client Login) */
  .mbb-getquote { padding:0 14px !important; min-height:44px; display:inline-flex !important; align-items:center; }
}
@media (max-width:700px) {
  .fus-card { aspect-ratio:auto !important; min-height:380px; }
  .pipeline-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pipeline-nav::-webkit-scrollbar { display:none; }
  .pipeline-nav-item { flex:0 0 auto; }
  .footer-cta-content { padding-left:16px !important; padding-right:16px !important; }
  .footer-cta-content h2 { font-size:clamp(1.7rem,8.4vw,2.4rem) !important; overflow-wrap:anywhere; }
}
@media (max-width:400px) {
  .mbb-nav-inner { padding-left:16px !important; padding-right:16px !important; gap:10px; }
  .mbb-toggle-label { display:none !important; }
  .mbb-getquote { padding:0 12px !important; font-size:10.5px !important; letter-spacing:.06em !important; white-space:nowrap; }
}

/* THE CLOSE (owner 31 Oct 2026: no video behind READY TO START — "something more like this", sonoxr.media's silver card):
   the material-silver card with two clipped corners and faint rings, the question on the left, the line, GET QUOTE (dark pill)
   and the Showcase link on the right, the cities along the bottom */
.sxr-cta-band { padding:clamp(72px,9vw,128px) 0; background:#0a0a0a; border-top:1px solid rgba(232,237,244,.08); }
.sxr-cta { position:relative; overflow:hidden; width:min(1320px, calc(100% - 48px)); margin-inline:auto; padding:clamp(40px,6vw,82px); display:grid; grid-template-columns:1.4fr 1fr; gap:24px 60px; align-items:end;
  color:#0c0d0d; background:linear-gradient(135deg,#f0f3f6 0%,#c5cdd5 52%,#929da8 100%);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px)); }
.sxr-cta::before { content:"SonoXR / GET A QUOTE"; position:absolute; right:34px; top:26px; color:rgba(10,11,11,.5); font:600 9px/1 'SXR Space Grotesk',sans-serif; letter-spacing:.17em; }
.sxr-cta::after { content:""; position:absolute; right:-100px; bottom:-190px; width:420px; height:420px; border:1px solid rgba(10,11,11,.12); border-radius:50%; box-shadow:0 0 0 60px rgba(10,11,11,.04),0 0 0 120px rgba(10,11,11,.025); pointer-events:none; }
.sxr-cta > * { position:relative; z-index:1; }
.sxr-cta h2 { margin:0; color:#0c0d0d; font:620 clamp(40px,5vw,76px)/.95 'SXR Space Grotesk',sans-serif; letter-spacing:-.05em; text-transform:none; text-shadow:none !important; }
.sxr-cta h2 span { color:#3b434b; }
.sxr-cta-side > p:first-child { margin:0; color:#1b1f23; font-size:clamp(17px,1.4vw,21px); line-height:1.6; }
.sxr-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:24px; }
.sxr-cta-btn { display:inline-flex; align-items:center; gap:22px; min-height:56px; padding:0 30px; border-radius:999px; background:#0b0d10; color:#fff !important; font:600 13px/1 'SXR Space Grotesk',sans-serif; letter-spacing:.14em; text-decoration:none; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.sxr-cta-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,11,11,.28); }
.sxr-cta-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; border-bottom:1px solid rgba(10,11,11,.35); color:#0b0d10 !important; font:700 11px/1 'SXR Space Grotesk',sans-serif; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
.sxr-cta-link:hover { border-color:#0b0d10; }
.sxr-cta-contact { display:flex; flex-wrap:wrap; gap:6px 12px; margin:20px 0 0; color:#3b434b; font-size:14px; }
.sxr-cta-contact a { display:inline-flex; align-items:center; min-height:44px; color:#0b0d10; text-decoration:underline; text-decoration-color:rgba(10,11,11,.3); text-underline-offset:4px; }
.sxr-cta-contact span { display:inline-flex; align-items:center; }
.sxr-cta-cities { grid-column:1 / -1; margin:8px 0 0; padding-top:18px; border-top:1px solid rgba(10,11,11,.14); color:rgba(10,11,11,.55); font:600 10px/1.6 'SXR Space Grotesk',sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.sxr-cta-btn:focus-visible, .sxr-cta-link:focus-visible, .sxr-cta-contact a:focus-visible { outline:2px solid #0b0d10; outline-offset:3px; }
@media (max-width:900px) { .sxr-cta { grid-template-columns:1fr; padding:40px 26px; } }
@media (max-width:600px) { .sxr-cta { width:calc(100% - 32px); clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); } .sxr-cta::before { right:22px; top:18px; } }
@media (prefers-reduced-motion: reduce) { .sxr-cta-btn { transition:none; } }

/* PHONES, BUTTONS (owner 31 Oct 2026: "buttons on mobile ???"): a pair of buttons that wraps on a phone stacks as equal,
   full-width buttons instead of two different widths; the industry/service pills become one swipeable row instead of a ragged
   column of eight */
@media (max-width:600px) {
  .hero-overlay .hero-cta-row, .cs-hero-ctas, .sm-hero-actions, .ava-buttons { display:grid !important; grid-template-columns:1fr; gap:12px !important; width:100%; }
  .hero-overlay .hero-cta-row > a, .cs-hero-ctas > a, .sm-hero-actions > a, .ava-buttons > a { width:100%; display:flex !important; align-items:center; justify-content:center; text-align:center; min-height:52px; margin:0 !important; }
  .sxr-live-actions { flex-direction:column; width:calc(100% - 32px); }
  .sxr-live-actions .video-expand-cta { width:100%; display:flex; justify-content:center; text-align:center; }
  .hb-pills, .hb-pills--rows { flex-direction:row !important; flex-wrap:nowrap !important; justify-content:flex-start !important; align-items:center; gap:10px; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 6px;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
  .hb-pills::-webkit-scrollbar { display:none; }
  .hb-pill-row { display:contents !important; }
  .hb-pill { flex:0 0 auto; white-space:nowrap; scroll-snap-align:start; min-height:44px; padding:0 18px !important; font-size:.8rem !important; }
}

/* PHONES, THE FIRST SCREEN (owner 31 Oct 2026: "gotta fix this. first thing someone sees … ALSO: get quote button big too"):
   the headline keeps "TO LIFE" together (index.html), the two hero buttons sit side by side at a normal height, and the header's
   GET QUOTE is a compact pill whose tap area still reaches 44px */
@media (max-width:600px) {
  .hero-overlay .hero-cta-row { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .hero-overlay .hero-cta-row > a { min-height:48px !important; padding:0 10px !important; font-size:12px !important; letter-spacing:.06em !important; white-space:nowrap; }
  .mbb-getquote { position:relative; min-height:38px !important; height:38px; padding:0 14px !important; font-size:11px !important; letter-spacing:.08em !important; }
  .mbb-getquote::after { content:""; position:absolute; inset:-4px -2px; }
}
@media (max-width:360px) {
  .hero-overlay .hero-cta-row > a { font-size:11px !important; letter-spacing:.03em !important; padding:0 6px !important; }
  .mbb-getquote { padding:0 11px !important; font-size:10.5px !important; letter-spacing:.05em !important; }
}

/* HOME HERO IN PLOY'S MEASURE (owner 31 Oct 2026: "more like this", ploy.ai on a phone): a huge condensed headline — Anton,
   self-hosted (SIL OFL), the face of the Showcase page's story hero — two or three words a line, one plain sentence under it,
   and two Title Case pills side by side at their natural width */
@font-face { font-family:"Anton"; src:url("fonts/anton-latin.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
.hero-overlay .hero-title { font-family:"Anton",Impact,"Arial Narrow",sans-serif !important; font-weight:400 !important; font-size:clamp(64px,7.6vw,124px) !important; line-height:.9 !important; letter-spacing:0 !important; text-transform:uppercase; text-wrap:balance; }
.hero-overlay .hero-title .hero-title-sub { display:block; max-width:30em; margin-top:clamp(18px,2vw,28px); font:400 clamp(17px,1.35vw,21px)/1.5 'SXR Space Grotesk',sans-serif; letter-spacing:0; text-transform:none; text-wrap:pretty; color:rgba(244,247,250,.86); }
.hero-overlay .hero-cta-row { display:flex !important; flex-wrap:nowrap; gap:12px !important; margin-top:28px; width:auto !important; }
.hero-overlay .hero-cta-row > a { width:auto !important; min-height:54px !important; padding:0 28px !important; display:inline-flex !important; align-items:center; justify-content:center; border-radius:999px; font:600 16px/1 'SXR Space Grotesk',sans-serif !important; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap; }
.hero-overlay .hero-cta-row > .btn-secondary { background:rgba(10,10,10,.28) !important; border:1.5px solid rgba(244,247,250,.75) !important; }
@media (max-width:600px) {
  .hero-overlay .hero-title { font-size:clamp(56px,17.5vw,84px) !important; }
  .hero-overlay .hero-cta-row > a { min-height:50px !important; padding:0 20px !important; font-size:15px !important; }
}
@media (max-width:360px) { .hero-overlay .hero-cta-row > a { padding:0 14px !important; font-size:14px !important; } }

/* PHONES, THE NUMBERS BAND (owner 31 Oct 2026: "they are stacked on top of each other, any way to spread out?"): 2 × 2 with
   hairlines between, instead of four rows */
@media (max-width:600px) {
  .about-stats-container { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:0 !important; padding:6px 0 !important; }
  .about-stat-box { padding:20px 8px; gap:8px; }
  .about-stat-box:nth-child(odd)::after { display:block !important; content:""; position:absolute; right:0; top:18%; height:64%; width:1px; background:rgba(238,242,246,.15); }
  .about-stat-box:nth-child(n+3) { border-top:1px solid rgba(238,242,246,.12); }
  .about-stat-box .stat-value { font-size:clamp(1.7rem,8vw,2.2rem) !important; }
  .about-stat-box .stat-desc { font-size:10.5px !important; letter-spacing:.14em !important; line-height:1.4; }
}
