/* SonoXR (31 Oct 2026): the SonoXR face, self-hosted, replaces Inter, Barlow Condensed and Syne */
@font-face { font-family:'SXR Space Grotesk'; src:url('assets/sonoxr/fonts/space-grotesk-latin-variable.woff2') format('woff2'); font-style:normal; font-weight:300 700; font-display:swap; }

:root {
  /* Futuristic Dark Color Palette */
  --bg-black: #030304;
  --bg-dark: #07090e;
  --bg-darker: #0b0f19;

  /* Neon Green Branding Colors (Logo Matched) */
  --primary-green: #cbd2d9; /* SonoXR silver (31 Oct 2026; was emerald #2bb34b) */
  /* ⚠️ AN ALIAS, NOT A VALUE (2026-08-11). This was #cbd2d9 — a SECOND green,
     distinct from --green #cbd2d9, and the one actually painting most of the
     site: 184 var() consumers, 205 raw rgba(0, 255, 136), 25 literals. DESIGN.md
     §2 has only ever sanctioned ONE green. Both are bright greens a hue apart,
     so nothing looked wrong — which is exactly how a palette drifts.
     NEVER give this its own value again; that is how the second green appeared. */
  --neon-green: var(--green);
  --accent-green: #cbd2d9;  /* electric laser green */
  --glow-green: rgba(203,210,217,0.45);

  /* Text and Accents */
  --text-white: #ffffff;
  --text-gray: #a1a1aa;
  --text-dark-gray: #52525b;
  --white-glow: rgba(255, 255, 255, 0.1);

  /* Layout Spacing & Glassmorphism Details */
  --glass-bg: rgba(7, 9, 14, 0.7);
  --glass-border: rgba(203,210,217,0.15);
  --glass-border-hover: rgba(203,210,217,0.5);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7);

  /* ── MBB 3D Design System tokens ───────────────────────────────────────── */
  --bg:              #0a0a0a;
  --surface:         #101214;
  --surface-2:       #16191d;
  --green:           #cbd2d9;
  --cyan:            #eef2f6;
  --text:            #f0f2f5;
  --text-muted:      #a1a1aa;
  --border:          rgba(255,255,255,0.08);
  --border-strong:   rgba(255,255,255,0.14);
  --grad-cta:        linear-gradient(180deg,#f4f7fa,#c3cbd3);
  --font-display:    'SXR Space Grotesk', sans-serif;
  --font-body:       'SXR Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-mono:       'SXR Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --maxw:         1200px;
  --gutter:       clamp(20px, 5vw, 32px);
  --section-py:   clamp(64px, 10vw, 120px);
  --header-gap:   clamp(32px, 5vw, 48px);
  --radius:       12px;
  --radius-pill:  999px;
}

/* Global Reset & Base Styling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Native bold white cursor with green glow (zero-lag CSS implementation) */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='10' fill='none' stroke='%2300ff66' stroke-width='4' stroke-opacity='0.25'/><circle cx='16' cy='16' r='8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.8'/><circle cx='16' cy='16' r='4' fill='%23ffffff'/></svg>") 16 16, auto;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-black);
  color: var(--text-white);
  font-family: 'SXR Space Grotesk', sans-serif;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(4, 120, 87, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(203,210,217,0.03) 0%, transparent 50%);
}

/* Modern Typography */
h1, h2, h3, .heading-futuristic {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.font-tech {
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Scrollbar Design */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-black);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-darker);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--glow-green);
}

/* CUSTOM HOLOGRAM CURSOR (Deactivated in favor of native CSS cursor) */
#custom-cursor, #custom-cursor-ring {
  display: none !important;
}

/* Interactive Cursor States */
a, button, input, select, textarea, .hoverable, .demo-select-btn, .radar-node {
  /* Dynamic scaled cursor on hover */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><circle cx='24' cy='24' r='16' fill='none' stroke='%2300ff66' stroke-width='6' stroke-opacity='0.3'/><circle cx='24' cy='24' r='12' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-opacity='0.9'/><circle cx='24' cy='24' r='6' fill='%23ffffff'/></svg>") 24 24, pointer !important;
}

@keyframes cursorPulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1.15); }
}

/* GLASSMORPHISM UTILITIES */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 32px 0 rgba(203,210,217,0.08), var(--glass-shadow);
}

/* NEON GLOW STYLES */
.glow-text-green {
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(203,210,217,0.4), 0 0 20px rgba(203,210,217,0.2);
}

.glow-border-green {
  border-color: var(--neon-green);
  box-shadow: 0 0 15px rgba(203,210,217,0.3);
}

/* GLOW BUTTONS */
.btn-futuristic {
  font-family: 'SXR Space Grotesk', sans-serif;
  background: transparent;
  color: var(--text-white);
  border: 1px solid var(--neon-green);
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(203,210,217,0.1);
}

.btn-futuristic::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(203,210,217,0.2), 
    transparent
  );
  transition: all 0.5s ease;
}

.btn-futuristic:hover::before {
  left: 100%;
}

.btn-futuristic:hover {
  background: rgba(203,210,217,0.1);
  box-shadow: 0 0 20px var(--glow-green), inset 0 0 5px var(--glow-green);
  color: var(--neon-green);
  border-color: var(--accent-green);
}

.btn-solid-green {
  background: var(--primary-green);
  color: var(--bg-black);
  border: 1px solid var(--neon-green);
  font-weight: 700;
  box-shadow: 0 0 15px var(--glow-green);
}

.btn-solid-green:hover {
  background: var(--neon-green);
  color: var(--bg-black);
  box-shadow: 0 0 25px var(--accent-green);
}

/* HEADER / NAVIGATION */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled {
  background: rgba(3, 3, 4, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Drop the dark text-shadow once the solid backdrop takes over */
header.scrolled .nav-links a {
  text-shadow: none;
}

/* Invert logo to white in transparent nav state (bright video pages) */
header:not(.scrolled) .logo-container img {
  filter: brightness(0) invert(1);
}

.navbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-container {
  height: 50px;
  width: auto;
}

.logo-container img {
  height: 100%;
  display: block;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: 'SXR Space Grotesk', sans-serif;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.3s, text-shadow 0.3s;
  position: relative;
  padding: 8px 0;
  /* punches through bright video (BHH pool/palms); invisible over dark backgrounds */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--neon-green);
  transition: width 0.3s ease;
  box-shadow: 0 0 8px var(--neon-green);
}

.nav-links a:hover {
  color: var(--text-white);
  text-shadow: 0 0 8px rgba(203,210,217,0.4);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Plain cyan text link — no box. Leaves GET QUOTE as the only boxed header button. */
.btn-nav-secondary {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cyan);
  background: transparent;
  border: none;
  padding: 12px 8px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.btn-nav-secondary:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.btn-nav-primary {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--green);
  border: none;
  border-radius: 50px;
  padding: 12px 32px;
  transition: opacity 0.2s ease;
}

.btn-nav-primary:hover {
  opacity: 0.88;
}

#hero {
  position: relative;
  height: calc(100dvh - 150px);
  min-height: 540px;
  width: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  z-index: 1;
  background: #0a0a0a;
}

.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

/* Light overall darken over the OG video — keep the visuals bright; the
   left-side gradient on .hero-overlay::before carries text legibility. */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 8, 16, 0.10);
  pointer-events: none;
}

/* ==========================================================================
   VILLA DASHBOARD — SONOXR-family spatial dashboard frame
   ========================================================================== */

/* Outer frame: top sits flush below the ~75px fixed nav (no dead gap); the model's
   own sky provides separation. Bottom clears the scroll cue. */
.villa-dashboard {
  position: absolute;
  top: 75px;
  left: clamp(16px, 3vw, 48px);
  right: clamp(16px, 3vw, 48px);
  bottom: 52px;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  z-index: 2;
}

/* ── CORNER CARD VARIANT ───────────────────────────────────────────────────
   Docks the interactive villa as a compact "live" card bottom-right, floating
   over the OG video. The canvas auto-fits via villa-demo.js's ResizeObserver. */
.villa-dashboard--corner {
  top: auto;
  left: auto;
  right: clamp(16px, 3vw, 40px);
  bottom: 64px;
  width: clamp(340px, 34vw, 460px);
  height: clamp(300px, 44vh, 400px);
  border: 1px solid rgba(238,242,246,0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  z-index: 3;
}
/* Keep the OG controls; only the tour banner is hidden in the card */
.villa-dashboard--corner .tour-status-hud { display: none; }
/* Let the full tab row stay usable in the narrower card via horizontal scroll */
.villa-dashboard--corner .vd-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}
.villa-dashboard--corner .vd-tabs::-webkit-scrollbar { display: none; }
.villa-dashboard--corner .vd-tab { white-space: nowrap; flex-shrink: 0; }
/* Top bar ported from OG — shrink to fit the narrower card */
.villa-dashboard--corner .viewport-header { padding: 12px 14px; gap: 10px; }
.villa-dashboard--corner .viewport-title { font-size: 0.58rem; }
.villa-dashboard--corner .viewport-btn { padding: 6px 9px; font-size: 0.6rem; }
.villa-dashboard--corner .viewport-btn i { width: 12px; height: 12px; }
.villa-dashboard--corner .viewport-status { font-size: 0.55rem; padding: 3px 6px; }
/* 3D TWIN ONLINE now lives in the top bar — drop the duplicate in the bottom chrome */
.villa-dashboard--corner .vd-chrome-status { display: none; }
@media (max-width: 768px) {
  /* Drop the villa on mobile — perf win + no room; video + copy carry it */
  .villa-dashboard--corner { display: none; }
}

/* Browser chrome bar — now at the bottom of the frame */
.vd-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 44px;
  background: rgba(5, 8, 16, 0.98);
  border-top: 1px solid rgba(238,242,246,0.14);
  flex-shrink: 0;
  gap: 12px;
}

/* Traffic-light dots */
.vd-chrome-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.vd-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.vd-dot--red    { background: #ff5f57; }
.vd-dot--yellow { background: #febc2e; }
.vd-dot--green-mac { background: #28c840; }

/* Centered URL pill */
.vd-chrome-url {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.vd-url-text {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50px;
  padding: 4px 18px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right-side diagnostics status */
.vd-chrome-status {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.vd-measure-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid rgba(238,242,246,0.2);
  background: transparent;
  color: rgba(238,242,246,0.55);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.vd-measure-btn:hover,
.vd-measure-btn.active {
  border-color: #eef2f6;
  color: #eef2f6;
  background: rgba(238,242,246,0.06);
  box-shadow: 0 0 8px rgba(238,242,246,0.15);
}
.vd-measure-btn i { width: 11px; height: 11px; color: inherit; }

.vd-status-badge {
  display: flex;
  align-items: center;
  gap: 7px;
}
.vd-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #eef2f6;
  box-shadow: 0 0 8px #eef2f6;
  animation: vdStatusPulse 2s ease-in-out infinite;
}
@keyframes vdStatusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #eef2f6; }
  50%       { opacity: 0.35; box-shadow: 0 0 2px #eef2f6; }
}
.vd-status-label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(238,242,246,0.55);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Consolidated tab row — pill-group container matching Portfolio toggle bar */
.vd-tabs {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(5, 8, 16, 0.98);
  border-top: 1px solid rgba(238,242,246,0.08);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
}
.vd-tabs::-webkit-scrollbar { display: none; }

.vd-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: var(--text-gray);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.vd-tab i { width: 11px; height: 11px; color: inherit; }
.vd-tab:hover { color: var(--text-white); background: rgba(255, 255, 255, 0.04); }
.vd-tab.active {
  background: var(--neon-green);
  color: var(--bg-black);
  box-shadow: 0 0 12px rgba(203,210,217,0.3);
}

/* Thin divider between mode group and hotspot group */
.vd-tabs-divider {
  width: 1px;
  align-self: center;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Canvas area — fills remaining height inside dashboard */
.vd-canvas-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: #0a0a0a;
}

/* Canvas fills its containing area */
.vd-canvas-area #mansion-canvas-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: grab;
}
.vd-canvas-area #mansion-canvas-container:active { cursor: grabbing; }

/* Measurement HUD inside canvas area */
.vd-canvas-area .measurement-hud-panel { top: 16px; }

/* Secondary controls — inline pill-group in bottom chrome bar, right-aligned */
.vd-secondary-controls {
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 50px;
  background: rgba(7, 9, 14, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  margin-left: auto;
  flex-shrink: 0;
}
.vd-sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: var(--text-gray);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.vd-sec-btn i { width: 11px; height: 11px; color: inherit; }
.vd-sec-btn:hover { color: var(--text-white); background: rgba(255,255,255,0.05); }
.vd-sec-btn.active {
  background: var(--neon-green);
  color: var(--bg-black);
  box-shadow: 0 0 10px rgba(203,210,217,0.3);
}

/* ── HERO VALUE-PROP OVERLAY ──────────────────────────────────────────────
   Sits over the villa canvas, left-aligned & vertically centered. Container is
   click-through so the canvas stays draggable; only the CTA row re-enables
   pointer events. A left-to-right scrim keeps copy legible without hiding the
   3D scene on the right. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(5, 8, 16, 0.88) 0%,
    rgba(5, 8, 16, 0.55) 34%,
    rgba(5, 8, 16, 0.12) 60%,
    transparent 80%);
  pointer-events: none;
}
.hero-overlay .hero-copy {
  position: relative;
  max-width: 880px;
  padding: 0 clamp(24px, 2.5vw, 40px);
  padding-bottom: clamp(48px, 10vh, 110px);
}
/* Staggered fade-up entrance for each line */
.hero-overlay .hero-copy > * {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-overlay .hero-eyebrow { animation-delay: 0.15s; }
.hero-overlay .hero-title   { animation-delay: 0.30s; }
.hero-overlay .hero-sub     { animation-delay: 0.50s; }
.hero-overlay .hero-cta-row { animation-delay: 0.68s; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-overlay .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--neon-green);
  margin-bottom: 20px;
}
.hero-overlay .hero-title {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 18px;
  white-space: normal;
}
.hero-overlay .hero-title span {
  color: var(--neon-green);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  display: block;
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}
.hero-overlay .hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 30px;
  max-width: 30em;
}
.hero-overlay .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .hero-overlay { align-items: flex-end; }
  .hero-overlay::before {
    background: linear-gradient(180deg,
      rgba(5, 8, 16, 0.25) 0%,
      rgba(5, 8, 16, 0.2) 42%,
      rgba(5, 8, 16, 0.88) 100%);
  }
  .hero-overlay .hero-copy { max-width: 100%; text-align: left; padding-bottom: 92px; }
  .hero-overlay .hero-title { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .hero-overlay .hero-title span { font-size: clamp(0.9rem, 3vw, 1.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-overlay .hero-copy > * { opacity: 1; animation: none; }
}

/* Scroll cue — below the dashboard frame, centered */
.hero-scroll-cue {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  animation: scrollCueBob 2.2s ease-in-out infinite;
}
@keyframes scrollCueBob {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.65; transform: translateX(-50%) translateY(4px); }
}

/* ── HERO DEMO BAND — quick-access demo cards, below the hero ──────────────── */
.hero-demos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px clamp(16px, 3vw, 48px) 44px;
}
.demo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.demo-card:hover {
  border-color: rgba(203,210,217,0.5);
  background: rgba(203,210,217,0.05);
  transform: translateY(-2px);
}
.demo-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--neon-green);
  flex-shrink: 0;
}
.demo-icon {
  display: inline-flex;
  color: var(--neon-green);
  flex-shrink: 0;
}
.demo-icon i { width: 22px; height: 22px; }
.demo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: auto;
}
.demo-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
}
.demo-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.demo-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.25s, color 0.25s;
}
.demo-card:hover .demo-arrow { color: var(--neon-green); transform: translateX(4px); }
@media (max-width: 768px) {
  .hero-demos { grid-template-columns: 1fr; padding-top: 22px; }
}

.hero-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto; /* Allow interacting with 3D canvas */
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 750px;
  margin-left: calc((100% - 1320px) / 2);
  pointer-events: none; /* Let clicks pass to 3D canvas behind */
}

@media(max-width: 1400px) {
  .hero-content {
    margin-left: 40px;
  }
}

.hero-content * {
  pointer-events: auto; /* Re-enable pointer events for hero text links/buttons */
}

.badge-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(203,210,217,0.08);
  border: 1px solid rgba(203,210,217,0.25);
  border-radius: 50px;
  padding: 6px 16px;
  margin-bottom: 24px;
  color: var(--neon-green);
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(203,210,217,0.2);
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-green);
  animation: radarPulse 1.5s infinite;
}

.hero-title {
  font-size: 4rem;
  line-height: 1.05;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.hero-title span {
  display: block;
}

.gradient-text-green {
  background: linear-gradient(135deg, var(--text-white) 40%, var(--neon-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* TELEMETRY HUD overlay (Futuristic UI details) */
.hud-panel {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 2;
  width: 320px;
  padding: 16px;
  font-size: 0.7rem;
  color: var(--text-gray);
  pointer-events: none;
}

.hud-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.hud-row {
  display: flex;
  justify-content: space-between;
  line-height: 1.8;
}

.hud-scan-line {
  height: 2px;
  background-color: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
  position: absolute;
  left: 0;
  width: 100%;
  animation: scanHUD 4s infinite linear;
}

@keyframes scanHUD {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

/* SCROLL DOWN INDICATOR */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-gray);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-decoration: none;
}

.scroll-indicator:hover {
  color: var(--neon-green);
}

.scroll-mouse {
  width: 20px;
  height: 35px;
  border: 1.5px solid var(--glass-border-hover);
  border-radius: 20px;
  position: relative;
}

.scroll-wheel {
  width: 3px;
  height: 8px;
  background-color: var(--neon-green);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheelAnim 1.6s infinite ease-in-out;
  box-shadow: 0 0 5px var(--neon-green);
}

@keyframes scrollWheelAnim {
  0% { top: 6px; opacity: 1; }
  60% { top: 18px; opacity: 0; }
  100% { top: 6px; opacity: 0; }
}

/* BRAND LOGO TICKER */
.brand-ticker-container {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}


/* SECTION GLOBAL DESIGN */
section.page-section {
  padding: 60px 40px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.section-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--neon-green);
  margin-bottom: 12px;
  display: block;
}

.section-title {
  font-size: 2.75rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.section-title span {
  color: var(--neon-green);
}

.section-desc {
  color: var(--text-gray);
  max-width: 650px;
  line-height: 1.6;
  margin-bottom: 60px;
  font-size: 1.05rem;
}

/* ABOUT SECTION styling */
/* Legacy grid — kept for reference, replaced by about-hero */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: stretch;
}

/* Stacked founder layout */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* Circular portrait frame — accepts <img> or <video> inside */
.founder-circle-frame {
  width: 310px;
  height: 310px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #cbd2d9;
  box-shadow: 0 0 0 6px rgba(203,210,217,0.12), 0 0 32px rgba(203,210,217,0.25);
  background: #0a0a0a;
  position: relative;
  cursor: pointer;
  /* 3D tilt perspective — JS drives rotateX/rotateY via style.transform */
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s ease;
  will-change: transform;
}

/* Scale + glow on hover */
.founder-circle-frame:hover {
  box-shadow: 0 0 0 8px rgba(203,210,217,0.22),
              0 0 55px rgba(203,210,217,0.5),
              0 0 90px rgba(203,210,217,0.18);
  /* scale applied here as baseline; JS overrides with tilt+scale combined */
}

/* Scan-line sweep pseudo-element — works whether child is <img> or <video> */
.founder-circle-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 45%,
    rgba(203,210,217,0.18) 50%,
    rgba(203,210,217,0.06) 52%,
    transparent 57%,
    transparent 100%
  );
  transform: translateY(-110%);
  pointer-events: none;
  z-index: 2;
  transition: none;
}

.founder-circle-frame:hover::after {
  animation: lidar-scan 1.5s ease-in-out forwards;
}

@keyframes lidar-scan {
  0%   { transform: translateY(-110%); opacity: 1; }
  80%  { transform: translateY(110%);  opacity: 1; }
  100% { transform: translateY(110%);  opacity: 0; }
}

.founder-circle-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .founder-circle-frame {
    transition: box-shadow 0.3s ease;
  }
  .founder-circle-frame:hover::after {
    animation: none;
  }
}

.about-text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-text-centered {
  align-items: center;
  text-align: center;
  max-width: 720px;
}

.about-text-centered .about-paragraph {
  text-align: left;
}

.about-tag {
  color: #eef2f6; /* Match electric blue/cyan from live site */
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  display: block;
}

.about-title {
  font-size: 3.8rem;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.1;
  text-transform: none;
  text-shadow: none;
}

.about-subtitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: #eef2f6;
  margin-bottom: 35px;
  display: block;
  letter-spacing: 0.02em;
}

.about-paragraph {
  color: #e8e8e8;
  line-height: 1.8;
  font-size: 18px;
  margin-bottom: 24px;
  font-weight: 600;
}

/* Company Stats Counter horizontal bar */
.about-stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
  padding: 40px 0;
  border-top: 1px solid rgba(238,242,246,0.15);
  border-bottom: 1px solid rgba(238,242,246,0.15);
  background: rgba(7, 9, 14, 0.25);
  border-radius: 4px;
}

.about-stat-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.about-stat-box:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(238,242,246,0.15);
}

.stat-value {
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  font-weight: 800;
  color: #eef2f6;
  text-shadow: 0 0 15px rgba(238,242,246,0.4);
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-desc {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'SXR Space Grotesk', sans-serif;
}

/* About Video styling */
.about-video-container {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.about-video-wrapper {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
  background: #000;
}

.about-video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Company Doctrine section — scoped layout, does not affect other about-* classes */
.doctrine-section {
  background-image: none;
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
  padding: 80px 20px;
  border-radius: 12px;
  margin-top: 60px;
  margin-bottom: 0;
  padding-bottom: 60px;
}

/* Old hero video replaces the IMAX theatre photo as doctrine background */
.doctrine-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

/* Dark gradient overlay to keep text readable over video */
.doctrine-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,8,16,0.65) 0%, rgba(5,8,16,0.45) 50%, rgba(5,8,16,0.75) 100%);
  z-index: 1;
  pointer-events: none;
}

.doctrine-section > * {
  position: relative;
  z-index: 2;
}

.doctrine-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(203,210,217,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,210,217,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.doctrine-section > * {
  position: relative;
  z-index: 1;
}

.doctrine-header {
  margin: 80px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: 100%;
  max-width: 900px;
}

.doctrine-header .section-title {
  margin-top: 0;
  white-space: nowrap;
  font-size: clamp(1.2rem, 3.5vw, 2.5rem);
}

.doctrine-header .about-subtitle {
  margin-bottom: 0;
  max-width: 600px;
}

.crawl-container {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.crawl-wrapper {
  height: 420px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to top, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
}

.crawl-text {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #cbd2d9;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 2.2;
  letter-spacing: 0.05em;
  padding: 0 40px;
  animation: crawl 24s linear infinite;
  z-index: 1;
}

@keyframes crawl {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-50%); }
}

.theater-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-image: url('assets/imax-theatre.webp');
  background-size: cover;
  background-position: center top;
}

.theater-screen {
  position: absolute;
  top: 4%;
  left: 9%;
  width: 82%;
  height: 48%;
  overflow: hidden;
  border-radius: 4px;
  opacity: 0.92;
}

.theater-screen iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.doctrine-video-block {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.doctrine-video-wrapper {
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  background: #000;
}

.doctrine-video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.doctrine-guarantee {
  margin-top: 14px;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--text-gray);
  text-align: center;
  opacity: 0.75;
}

/* Mobile responsive about styles */
@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .founder-circle-frame {
    width: 240px;
    height: 240px;
  }
  .about-stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 30px 0;
  }
  .about-stat-box:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .about-title {
    font-size: 2.8rem;
  }
  .about-stats-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* FEATURE / SOLUTIONS CARDS */
.solutions-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 60px;
}

/* Industries section — matches Spaces card format */
#industries.page-section {
  padding-top: 60px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.industries-headline {
  font-family: var(--font-body);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff !important;
  margin-bottom: 40px;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── Industries grid ── */
/* ── INDUSTRIES COVERFLOW CAROUSEL (Swiper) ───────────────────────────────── */
.industries-swiper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 34px 0 8px;
  overflow: hidden;
}
.industries-swiper .swiper-slide {
  width: clamp(258px, 28vw, 360px);
  height: clamp(380px, 50vh, 540px);
  transition: opacity 0.4s ease;
}
.industry-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.industry-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 16, 0.94) 0%, rgba(5, 8, 16, 0.25) 55%, transparent 100%);
}
.industry-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 30px 28px;
  z-index: 2;
}
.industry-num { font-size: 11px; letter-spacing: 0.18em; color: #cbd2d9; }
.industry-name {
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 900;
  color: #fff;
  margin: 8px 0 10px;
  line-height: 1.1;
}
.industry-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 34ch;
}
/* Center card pops with neon; neighbors recede (coverflow) + dim */
.industries-swiper .swiper-slide-active .industry-card {
  border-color: rgba(203,210,217,0.8);
  box-shadow: 0 0 44px rgba(203,210,217,0.25), 0 24px 60px rgba(0, 0, 0, 0.6);
}
.industries-swiper .swiper-slide:not(.swiper-slide-active) { opacity: 0.78; }
.industries-swiper .swiper-button-next,
.industries-swiper .swiper-button-prev {
  color: #cbd2d9;
  width: 44px; height: 44px;
  background: rgba(5, 8, 16, 0.6);
  border: 1px solid rgba(203,210,217,0.3);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.industries-swiper .swiper-button-next:after,
.industries-swiper .swiper-button-prev:after { font-size: 17px; font-weight: 700; }
.industries-swiper .swiper-pagination { position: static; margin-top: 26px; }
.industries-swiper .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.4); opacity: 1; }
.industries-swiper .swiper-pagination-bullet-active { background: #cbd2d9; }
@media (max-width: 768px) {
  .industries-swiper .swiper-button-next,
  .industries-swiper .swiper-button-prev { display: none; }
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.space-card {
  height: 380px;
  min-height: unset;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.space-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 30px rgba(238,242,246,0.2);
  z-index: 2;
}

@media (max-width: 768px) {
  .industries-grid {
    grid-template-columns: 1fr;
  }
  .space-card { height: 280px; }
}

/* ── Scroll-expand video section ── */
/* 3D SPINNING TEXT SECTION */
.text3d-section {
  background: #0a0a0a;
  width: 100%;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Gradient fades blend into hero above and about below */
.text3d-section::before,
.text3d-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 2;
}
.text3d-section::before {
  top: 0;
  background: linear-gradient(to bottom, #0a0a0a 0%, transparent 100%);
}
.text3d-section::after {
  bottom: 0;
  background: linear-gradient(to top, #0a0a0a 0%, transparent 100%);
}

/* Holographic frame */
.text3d-frame {
  position: relative;
  width: 92%;
  max-width: 1140px;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #cbd2d9;
  box-shadow: 0 0 28px rgba(203,210,217,0.25), 0 0 70px rgba(203,210,217,0.07);
}

/* Scanlines overlay */
.text3d-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  z-index: 3;
  border-radius: 12px;
}

#text3d-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .text3d-section { height: 260px; }
  .text3d-frame { height: 180px; width: 94%; }
}

.video-expand-section {
  background: #0a0a0a;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow: hidden;
}

.video-expand-label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #cbd2d9;
  text-transform: uppercase;
}

.video-expand-frame {
  width: 60%;
  border-radius: 20px;
  overflow: hidden;
  will-change: width, border-radius;
}

.video-expand-vid {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-expand-cta {
  margin-top: 12px;
}

@media (max-width: 768px) {
  .video-expand-frame { width: 90%; border-radius: 12px; }
}

.sol-card {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 45px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.sol-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.solutions-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.7;
}

.sol-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(3, 3, 4, 0.1) 0%, rgba(3, 3, 4, 0.05) 40%, rgba(3, 3, 4, 0.75) 100%);
  z-index: 1;
}

.sol-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 10px 40px rgba(203,210,217,0.15);
}

.sol-card:hover .sol-card-bg {
  transform: scale(1.04);
}

.sol-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
  pointer-events: none;
}

.sol-card-badges {
  display: flex;
  gap: 12px;
}

.sol-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 9, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 6px 14px;
  color: var(--text-white);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.05em;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.sol-card-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sol-card-tags span {
  display: inline-block;
  background: rgba(7, 9, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 6px 12px;
  color: var(--text-gray);
  font-size: 0.68rem;
  font-weight: 600;
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.05em;
}

.sol-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 10;
  pointer-events: none;
}

.sol-card-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

.sol-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(7, 9, 14, 0.7);
  border: 1.5px solid var(--neon-green);
  color: var(--neon-green);
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-radius 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: auto;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(203,210,217,0.05);
  overflow: hidden;
  white-space: nowrap;
}

.sol-card-btn .btn-text {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'SXR Space Grotesk', sans-serif;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, margin 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-right: 0;
}

.sol-card-btn .btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.sol-card:hover .sol-card-btn {
  width: 190px;
  border-radius: 28px;
  background: var(--neon-green);
  color: var(--bg-black);
  border-color: var(--neon-green);
  box-shadow: 0 0 25px var(--accent-green);
}

.sol-card:hover .sol-card-btn .btn-text {
  max-width: 120px;
  opacity: 1;
  margin-right: 10px;
}

.sol-card:hover .sol-card-btn .btn-arrow {
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .sol-card {
    height: 380px;
    padding: 30px;
  }
  .sol-card-title {
    font-size: 2rem;
  }
  .sol-card-tags {
    display: none;
  }
  .sol-card-btn {
    width: 48px;
    height: 48px;
  }
  .sol-card:hover .sol-card-btn {
    width: 48px;
    padding: 0;
  }
  .sol-card:hover .sol-card-btn .btn-text {
    max-width: 0;
    opacity: 0;
    margin-right: 0;
  }
}

/* SERVICES SECTION */
.services-split {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.service-block {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  height: auto;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.service-bg-scan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: 
    linear-gradient(rgba(203,210,217,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,210,217,0.02) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.6;
}

.service-block:hover .service-bg-scan {
  opacity: 1;
}

.service-header {
  position: relative;
  z-index: 2;
}

.service-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--neon-green);
  margin-bottom: 16px;
  display: block;
}

.service-block h3 {
  font-size: 2.25rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.service-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.service-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-gray);
}

.service-features li svg {
  color: var(--neon-green);
  flex-shrink: 0;
}

.service-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.service-price-tag {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.75rem;
  color: var(--text-dark-gray);
}

.service-price-val {
  font-size: 1.15rem;
  color: var(--text-white);
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

/* INTERACTIVE VR DEMO HUB */
.demo-hub-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  height: 600px;
}

.demo-viewport-panel {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}

#demo-canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.demo-overlay-hud {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  pointer-events: none;
  background: rgba(3, 3, 4, 0.7);
  border: 1px solid var(--glass-border);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--neon-green);
}

.demo-instruction-overlay {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  background: rgba(3, 3, 4, 0.85);
  border: 1.5px solid var(--neon-green);
  box-shadow: 0 0 15px rgba(203,210,217,0.2);
  padding: 10px 24px;
  border-radius: 50px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  animation: overlayPulse 2s infinite alternate;
}

@keyframes overlayPulse {
  0% { transform: translateX(-50%) scale(1); box-shadow: 0 0 10px rgba(203,210,217,0.1); }
  100% { transform: translateX(-50%) scale(1.03); box-shadow: 0 0 20px rgba(203,210,217,0.3); }
}

.demo-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}

.demo-selector-card {
  padding: 24px;
}

.demo-selector-card h4 {
  font-size: 1.15rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.demo-selector-card p {
  font-size: 0.85rem;
  color: var(--text-gray);
  line-height: 1.5;
  margin-bottom: 20px;
}

.demo-selector-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-select-btn {
  font-family: 'SXR Space Grotesk', sans-serif;
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  color: var(--text-gray);
  padding: 16px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-select-btn.active {
  background: rgba(203,210,217,0.05);
  border-color: var(--neon-green);
  color: var(--neon-green);
  box-shadow: 0 0 15px rgba(203,210,217,0.15), inset 0 0 5px rgba(203,210,217,0.1);
}

.demo-select-btn:hover:not(.active) {
  border-color: var(--glass-border-hover);
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.04);
}

.demo-select-btn span.btn-num {
  font-size: 0.75rem;
  opacity: 0.5;
}

.demo-select-btn.active span.btn-num {
  opacity: 1;
}

.demo-spec-card {
  padding: 24px;
  font-size: 0.8rem;
}

.demo-spec-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-spec-list li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.demo-spec-list li span.val {
  color: var(--neon-green);
  font-family: 'SXR Space Grotesk', sans-serif;
}

/* HOTSPOT UI PANEL in 3D */
.hotspot-details-popup {
  position: absolute;
  z-index: 100;
  width: 250px;
  padding: 16px;
  background: rgba(3, 3, 4, 0.95);
  border: 1.5px solid var(--neon-green);
  border-radius: 8px;
  box-shadow: 0 0 25px rgba(203,210,217,0.25);
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hotspot-details-popup.active {
  opacity: 1;
  transform: scale(1);
}

.hotspot-popup-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: var(--neon-green);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.hotspot-popup-body {
  font-size: 0.75rem;
  color: var(--text-gray);
  line-height: 1.4;
}

.hotspot-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-dark-gray);
  font-size: 0.75rem;
  cursor: pointer;
}

.hotspot-close-btn:hover {
  color: var(--neon-green);
}

/* ===== INDUSTRY HUB / BLOG ===== */

.blog-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.blog-filter-tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: var(--text-gray);
  padding: 10px 20px;
  border-radius: 30px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blog-filter-tab:hover,
.blog-filter-tab.active {
  background: var(--neon-green);
  color: #000;
  border-color: var(--neon-green);
  box-shadow: 0 0 15px var(--glow-green);
  font-weight: 600;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  margin-top: 0;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 24px rgba(203,210,217,0.12);
}

.blog-card.filtered-out {
  display: none;
}

.blog-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--bg-darker);
}

.blog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-image {
  transform: scale(1.06);
}

.blog-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--neon-green);
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}

.blog-content-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta-info {
  display: flex;
  gap: 16px;
  font-size: 0.7rem;
  color: var(--text-gray);
  margin-bottom: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card-title {
  font-size: 1.1rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 12px;
  transition: color 0.3s;
}

.blog-card:hover .blog-card-title {
  color: var(--neon-green);
}

.blog-card-excerpt {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-gray);
  margin-bottom: 24px;
  flex-grow: 1;
}

.blog-read-btn {
  /* Standardized via .btn-secondary; only keep layout alignment here. */
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* COVERAGE MAP (RADAR SCANNER SVG) */
.coverage-map-panel {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}

.coverage-info h3 {
  font-size: 2.25rem;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.coverage-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.stat-item {
  border-left: 2px solid var(--neon-green);
  padding-left: 16px;
}

.stat-num {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--neon-green);
  text-shadow: 0 0 10px rgba(203,210,217,0.2);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-gray);
  margin-top: 4px;
}

.radar-map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.radar-grid {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1/1;
  position: relative;
}

.radar-sweep {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(203,210,217,0.15) 0deg, transparent 90deg, transparent 360deg);
  animation: radarSweepAnim 4s infinite linear;
  pointer-events: none;
}

@keyframes radarSweepAnim {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulsing Node coordinates */
.radar-node {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--accent-green);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 10px var(--accent-green);
}

.radar-node::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent-green);
  border-radius: 50%;
  animation: radarPulse 1.8s infinite ease-out;
  opacity: 0;
}

@keyframes radarPulse {
  0% { transform: scale(0.2); opacity: 0; }
  15% { opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Radar Location Tooltip */
.radar-tooltip {
  position: absolute;
  background: var(--bg-darker);
  border: 1.5px solid var(--neon-green);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.7rem;
  color: var(--text-white);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(10px) translateX(-50%);
  box-shadow: 0 0 15px rgba(203,210,217,0.2);
}

.radar-node:hover ~ .radar-tooltip {
  opacity: 1;
  transform: translateY(-25px) translateX(-50%);
}

/* CONTACT / SCHEDULER FORM */
.contact-section-split {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.contact-form-panel {
  flex: 1 1 60%;
  min-width: 0;
  padding: 50px;
}

.contact-telemetry-panel {
  flex: 1 1 35%;
}

.contact-form-panel h3 {
  font-size: 2.25rem;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.form-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-group label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-gray);
}

.form-input {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  color: var(--text-white);
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.form-input:focus {
  background: rgba(203,210,217,0.02);
  border-color: var(--neon-green);
  box-shadow: 0 0 15px rgba(203,210,217,0.15), inset 0 0 3px rgba(203,210,217,0.1);
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

/* QUOTE FORM — button/chip toggles (scope, timeline, add-ons), matched to
   the site's filter-button aesthetic: cyan idle border, green when active. */
.form-optional { opacity: 0.5; }
.form-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.form-toggle {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  border: 1px solid rgba(238,242,246,0.4);
  background: transparent;
  color: #a0a0a0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.form-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.form-toggle:hover {
  border-color: rgba(238,242,246,0.7);
  color: #eef2f6;
}
.form-toggle:has(input:checked),
.form-toggle.is-active {
  border-color: #cbd2d9;
  color: #cbd2d9;
  background: rgba(203,210,217,0.08);
}
.form-toggle:has(input:focus-visible) {
  box-shadow: 0 0 0 2px rgba(203,210,217,0.4);
}

/* Add-Ons checklist — compact rows in a card matching the form inputs,
   native cyan accent on the checkbox + cyan label text when checked. */
.form-checklist {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  overflow: hidden;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-white);
  transition: background 0.2s, color 0.2s;
}
.form-check + .form-check {
  border-top: 1px solid var(--glass-border);
}
.form-check:hover {
  background: rgba(238,242,246,0.05);
}
.form-check input {
  width: 16px;
  height: 16px;
  accent-color: #eef2f6;
  cursor: pointer;
  flex-shrink: 0;
}
.form-check:has(input:checked) span,
.form-check.is-active span {
  color: #eef2f6;
}

/* SUBMIT BUTTON STATUS */
.submit-status-message {
  margin-top: 15px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.submit-status-message.success {
  opacity: 1;
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(203,210,217,0.3);
}

.submit-status-message.error {
  opacity: 1;
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* CONTACT INFO / Telemetry Details card */
.contact-telemetry-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-card {
  padding: 30px;
}

.info-card-row {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.info-card-row:last-child {
  margin-bottom: 0;
}

.info-card-icon {
  width: 44px;
  height: 44px;
  background: rgba(203,210,217,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-green);
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 8px rgba(203,210,217,0.1);
}

.info-card-details h4 {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-gray);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.info-card-details p {
  font-size: 0.95rem;
}

.info-card-details a {
  color: var(--text-white);
  text-decoration: none;
  transition: color 0.3s;
}

.info-card-details a:hover {
  color: var(--neon-green);
}

/* Page Container for Sticky Reveal Footer */
#page-container {
  position: relative;
  z-index: 5; /* Sit on top of the fixed footer */
  background-color: var(--bg-black);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85); /* Premium shadow divider */
  border-bottom: 1px solid rgba(203,210,217,0.05);
}

/* ── SITE FOOTER ── */
.site-footer { background: #0a0a0a; }
.site-footer .text-green { color: #cbd2d9; }

/* CTA BLOCK */
.footer-cta {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(203,210,217,0.15);
}
.footer-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  z-index: 0;
}
.footer-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 2rem;
  max-width: 900px;
}
.footer-cta-content h2 {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  white-space: nowrap;
}
.footer-contact-line {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
}
.footer-contact-line a {
  color: #cbd2d9;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-line a:hover { color: #ffffff; }
.footer-divider { margin: 0 1rem; opacity: 0.4; }
.footer-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 2.5rem; }
.footer-newsletter-inline p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.75rem;
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.08em;
}
.footer-newsletter-form {
  display: flex;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto;
}
.footer-newsletter-form input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 0.75rem 1.2rem;
  color: #ffffff;
  font-size: 0.85rem;
  outline: none;
}
.footer-newsletter-form input:focus { border-color: #eef2f6; }
.footer-newsletter-form button {
  background: transparent;
  border: 1px solid #eef2f6;
  color: #eef2f6;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.65rem;
  padding: 0.75rem 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.footer-newsletter-form button:hover {
  background: rgba(238,242,246,0.1);
}

/* MAIN FOOTER */
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.footer-logo-mbb { height: 52px; }
.footer-logo-sxr { height: 44px; }
.footer-logo-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.15);
}
.footer-tagline {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.footer-contact-icons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.footer-contact-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #cbd2d9;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-icon:hover { color: #ffffff; }
.footer-contact-icon svg { opacity: 0.6; flex-shrink: 0; }
.footer-social {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.footer-social a {
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer-social a:hover { color: #cbd2d9; }
.footer-matterport-wrap { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.footer-matterport-badge { width: 60px; opacity: 0.7; }
.footer-matterport-cs { width: 110px; opacity: 0.85; filter: none; }
.footer-col-title {
  display: inline-block;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: #cbd2d9;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(203,210,217,0.3);
}

/* Col 3 — SONOXR companion callout */
.footer-brand-logo { display: inline-block; }
.footer-sxr-link { display: inline-block; margin-bottom: 0.85rem; }
.footer-sxr-logo { height: 30px; width: auto; display: block; opacity: 0.9; }
.footer-sxr-blurb {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin: 0 0 1.25rem;
  max-width: 240px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-nav-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 2rem;
  flex-direction: unset !important;
}
.footer-col ul li, .footer-col ul li a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: #cbd2d9; }

/* City boxes */
.footer-cities .city-box {
  border: 1px solid rgba(203,210,217,0.4);
  color: #cbd2d9;
  background: rgba(203,210,217,0.05);
}

.footer-locations {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.location-item {
  color: rgba(255,255,255,0.4);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}
.footer-hq-time {
  margin-top: 1.5rem;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}

/* SERVED CITIES — inside the CTA block */
.footer-cities {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin: 2rem auto;
  max-width: 700px;
  width: 100%;
}
.footer-city {
  padding: 0.6rem 0.5rem;
  border: 1px solid rgba(203,210,217,0.4);
  border-radius: 4px;
  text-align: center;
  background: rgba(203,210,217,0.05);
  transition: background 0.2s, border-color 0.2s;
}
.footer-city:hover {
  background: rgba(203,210,217,0.1);
  border-color: #cbd2d9;
}
.city-name {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  color: #cbd2d9;
  letter-spacing: 0.08em;
}

/* BOTTOM BAR */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd2d9;
  margin-left: 0.4rem;
  animation: pulse 2s infinite;
}

@media (max-width: 768px) {
  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}


/* RESPONSIVE DESIGN (BREAKPOINTS) */
@media(max-width: 1024px) {
  .navbar {
    padding: 20px;
  }
  
  .nav-links {
    display: none; /* Mobile Hamburger can be skipped or simplified */
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-split {
    grid-template-columns: 1fr;
  }
  
  .demo-hub-container {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .demo-viewport-panel {
    height: 400px;
  }
  
  .demo-sidebar {
    gap: 20px;
  }
  
  .coverage-map-panel {
    grid-template-columns: 1fr;
  }
  
  .contact-section-split {
    flex-direction: column;
  }
}

@media(max-width: 768px) {
  #hero {
    padding: 0 20px;
    background-attachment: scroll; /* Disable parallax on mobile for smooth performance */
    background-image: url('assets/hero-bg.jpg');
  }
  
  #hero::before {
    background-image: linear-gradient(to bottom, rgba(5, 8, 16, 0.12) 0%, rgba(5, 8, 16, 0.32) 100%);
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hero-desc {
    font-size: 1rem;
  }
  
  section.page-section {
    padding: 60px 20px;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .experience-grid {
    grid-template-columns: 1fr;
  }
  
  .service-block {
    padding: 30px;
    height: auto;
    min-height: auto;
    gap: 30px;
  }
  
  .form-group-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-form-panel {
    padding: 30px 20px;
  }
  

}

/* ==========================================================================
   PROCESS SECTION — HOW WE WORK
   ========================================================================== */

#process {
  padding: 100px 60px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 60px;
  position: relative;
}

/* Each step card */
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 24px 32px 24px;
  border: 1px solid rgba(238,242,246,0.1);
  border-right: none;
  background: rgba(5, 8, 16, 0.6);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.process-step:first-child {
  border-radius: 12px 0 0 12px;
}
.process-step:last-child {
  border-right: 1px solid rgba(238,242,246,0.1);
  border-radius: 0 12px 12px 0;
}
.process-step:hover {
  background: rgba(238,242,246,0.03);
  border-color: rgba(238,242,246,0.22);
}
.process-step:hover + .process-step {
  border-left-color: rgba(238,242,246,0.22);
}

/* Step 5 — TRACK — slight green tint to signal "ongoing payoff" */
.process-step--track {
  background: rgba(203,210,217,0.03);
}
.process-step--track:hover {
  background: rgba(203,210,217,0.06);
}
.process-step--track .process-num {
  color: var(--neon-green);
  text-shadow: 0 0 12px rgba(203,210,217,0.4);
}
.process-step--track .process-icon-wrap {
  border-color: rgba(203,210,217,0.25);
  color: var(--neon-green);
}

/* Top row: number + icon */
.process-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.process-num {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #eef2f6;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 0 16px rgba(238,242,246,0.35);
}

.process-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(238,242,246,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(238,242,246,0.65);
  flex-shrink: 0;
}
.process-icon-wrap svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Step title + description */
.process-step-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.process-step-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-white);
  text-transform: uppercase;
  margin: 0;
}

.process-step-desc {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-gray);
  margin: 0;
}

/* Arrow connector between steps — right-edge chevron */
.process-connector {
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 13px solid rgba(238,242,246,0.18);
  z-index: 2;
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
  #process {
    padding: 80px 20px;
  }
  .process-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .process-step {
    border-right: 1px solid rgba(238,242,246,0.1);
    border-bottom: none;
    border-radius: 0;
  }
  .process-step:first-child { border-radius: 12px 12px 0 0; }
  .process-step:last-child  { border-bottom: 1px solid rgba(238,242,246,0.1); border-radius: 0 0 12px 12px; }
  .process-connector {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -10px;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* ==========================================================================
   PHASE 5: PORTFOLIO & PRICING NEW STYLES
   ========================================================================== */

/* 1. PORTFOLIO TEASER GRID (HOME PAGE) */
.port-teaser-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 60px;
}

.port-card {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 45px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.port-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.port-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(3, 3, 4, 0.45) 0%, rgba(3, 3, 4, 0.15) 50%, rgba(3, 3, 4, 0.88) 100%);
  z-index: -1;
}

.port-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 10px 40px rgba(203,210,217,0.15);
}

.port-card:hover .port-card-bg {
  transform: scale(1.04);
}

.port-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
  pointer-events: none;
}

.port-card-badges {
  display: flex;
  gap: 12px;
}

.port-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 9, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 6px 14px;
  color: var(--text-white);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.05em;
}

.port-card-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.port-card-tags span {
  display: inline-block;
  background: rgba(7, 9, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 6px 12px;
  color: var(--text-gray);
  font-size: 0.68rem;
  font-weight: 600;
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.05em;
}

.port-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 10;
  pointer-events: none;
}

.port-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.port-card-num {
  font-size: 0.8rem;
  color: var(--neon-green);
  letter-spacing: 0.15em;
  font-weight: 700;
}

.port-card-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

.port-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(7, 9, 14, 0.7);
  border: 1.5px solid var(--neon-green);
  color: var(--neon-green);
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-radius 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: auto;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(203,210,217,0.05);
  overflow: hidden;
  white-space: nowrap;
}

.port-card-btn .btn-text {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'SXR Space Grotesk', sans-serif;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, margin 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-right: 0;
}

.port-card-btn .btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.port-card:hover .port-card-btn {
  width: 190px;
  border-radius: 28px;
  background: var(--neon-green);
  color: var(--bg-black);
  border-color: var(--neon-green);
  box-shadow: 0 0 25px var(--accent-green);
}

.port-card:hover .port-card-btn .btn-text {
  max-width: 120px;
  opacity: 1;
  margin-right: 10px;
}

.port-card:hover .port-card-btn .btn-arrow {
  transform: translateX(2px);
}

/* 2. DEDICATED PORTFOLIO PAGE GRID */
.portfolio-hero {
  position: relative;
  padding: 180px 40px 100px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(203,210,217,0.05) 0%, transparent 60%);
  border-bottom: 1px solid rgba(203,210,217,0.1);
  overflow: hidden;
}

.port-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(3, 3, 4, 0.2) 0%, var(--bg-black) 100%);
  z-index: -1;
}

.port-hero-tag {
  color: #eef2f6;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  display: block;
}

.port-hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.port-hero-desc {
  color: var(--text-gray);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 1.15rem;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.project-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 320px;
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.project-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.project-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(3, 3, 4, 0.2) 0%, rgba(3, 3, 4, 0.85) 100%);
  z-index: -1;
}

.project-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 10px 30px rgba(203,210,217,0.12);
}

.project-card:hover .project-card-bg {
  transform: scale(1.04);
}

.project-card-meta {
  color: var(--neon-green);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.project-card-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-white);
  font-family: 'SXR Space Grotesk', sans-serif;
  margin-bottom: 15px;
}

.project-card-metrics {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.project-card-metrics span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-gray);
  background: rgba(7, 9, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 4px;
}

/* 3. DEDICATED PRICING PAGE STYLES */
.pricing-hero {
  position: relative;
  padding: 180px 40px 100px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(203,210,217,0.05) 0%, transparent 60%);
  border-bottom: 1px solid rgba(203,210,217,0.1);
  overflow: hidden;
}

.pricing-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(3, 3, 4, 0.2) 0%, var(--bg-black) 100%);
  z-index: -1;
}

.pricing-hero-tag {
  color: #eef2f6;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  display: block;
}

.pricing-hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.pricing-hero-desc {
  color: var(--text-gray);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 1.15rem;
}

.pricing-table-container {
  margin-top: 80px;
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(7, 9, 14, 0.4);
  backdrop-filter: blur(10px);
}

.comparison-table th, 
.comparison-table td {
  padding: 22px 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.comparison-table th {
  background: rgba(0, 0, 0, 0.5);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-white);
  border-bottom: 1px solid rgba(203,210,217,0.2);
}

.comparison-table th.col-feature {
  width: 35%;
}

.comparison-table tr:hover td {
  background: rgba(203,210,217,0.02);
}

.comparison-table td.feature-name {
  font-weight: 600;
  color: var(--text-white);
}

.comparison-table td.feature-desc {
  font-size: 0.75rem;
  color: var(--text-gray);
  display: block;
  margin-top: 4px;
  font-weight: 400;
}

.comparison-table td.val-tier {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: var(--text-gray);
}

.comparison-table td.val-tier.highlight {
  color: var(--neon-green);
  font-weight: 600;
}

.comparison-table td .check-icon {
  color: var(--neon-green);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.comparison-table td .dash-icon {
  color: var(--text-dark-gray);
}

/* FAQ SECTION styles */
.faq-section {
  padding: 100px 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
}

.faq-item {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(7, 9, 14, 0.4);
  padding: 30px;
  transition: border-color 0.4s ease;
}

.faq-item:hover {
  border-color: rgba(203,210,217,0.25);
}

.faq-question {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.faq-question::before {
  content: '▶';
  color: var(--neon-green);
  font-size: 0.8rem;
  font-family: sans-serif;
}

.faq-answer {
  color: var(--text-gray);
  line-height: 1.6;
  font-size: 0.95rem;
  padding-left: 28px;
}

@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .port-card {
    height: 380px;
    padding: 25px;
  }
  .port-card-title {
    font-size: 1.8rem;
  }
  .port-card-tags {
    display: none;
  }
  .port-card-btn {
    width: 48px;
    height: 48px;
  }
  .port-card:hover .port-card-btn {
    width: 150px;
  }
  .port-card:hover .port-card-btn .btn-text {
    max-width: 90px;
  }
  
  .portfolio-hero, .pricing-hero {
    padding: 120px 20px 60px;
  }
  .port-hero-title, .pricing-hero-title {
    font-size: 2.5rem;
  }
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .faq-section {
    padding: 60px 20px;
  }
  .faq-question {
    font-size: 1.1rem;
  }
}

/* Matterport Pro Section Styles */
#matterport-pro {
  position: relative;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(203,210,217,0.1);
  border-bottom: 1px solid rgba(203,210,217,0.1);
}

.matterport-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.9; /* Made brighter so the wireframe house details pop */
  pointer-events: none;
}

.matterport-tint-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(11, 20, 38, 0.2) 0%, rgba(3, 3, 4, 0.6) 100%);
  z-index: 1;
  pointer-events: none;
}

.matterport-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(238,242,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,242,246,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 2; /* Sits on top of tint and video */
  pointer-events: none;
}

.matterport-content {
  position: relative;
  z-index: 3; /* Floating above the scanning grid */
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.matterport-partner-tag {
  color: #eef2f6; /* Cyan theme blue */
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(238,242,246,0.55);
}

.matterport-logo-img {
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  margin-bottom: 10px;
}

.matterport-description {
  font-size: 1.35rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  max-width: 780px;
  margin-bottom: 30px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* Horizontal unified glass panel for buttons */
.matterport-btn-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  max-width: 850px;
  padding: 24px;
  background: rgba(7, 15, 28, 0.45);
  border: 1.5px solid rgba(238,242,246,0.25);
  border-radius: 12px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.65),
    inset 0 0 15px rgba(238,242,246,0.05);
  gap: 20px;
}

.matterport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 240px;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(3, 3, 4, 0.6);
  border: 1px solid rgba(238,242,246,0.4);
  color: #eef2f6;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.matterport-btn:hover {
  border-color: var(--neon-green);
  color: var(--bg-black);
  background: var(--neon-green);
  box-shadow: 0 0 20px rgba(203,210,217,0.65);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  #matterport-pro {
    min-height: 550px;
    padding: 60px 20px;
  }
  .matterport-logo-img {
    max-width: 290px;
  }
  .matterport-description {
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
  .matterport-btn-group {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    padding: 20px;
    gap: 15px;
  }
  .matterport-btn {
    width: 100%;
    max-width: 100%;
    padding: 12px 24px;
  }
}

/* ==========================================================================
   PHASE 6: VIRTUAL SPACES (DTLA & MALIBU) STYLES
   ========================================================================== */

#spaces {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.spaces-header {
  margin-bottom: 50px;
}

.pill-tag {
  display: inline-block;
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  border-radius: 50px;
  padding: 2px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'SXR Space Grotesk', sans-serif;
  letter-spacing: 0.05em;
  margin-left: 15px;
  vertical-align: middle;
  text-transform: uppercase;
}

.spaces-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.space-card {
  position: relative;
  height: 520px;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.space-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.space-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(3, 3, 4, 0.1) 0%, rgba(3, 3, 4, 0.4) 50%, rgba(3, 3, 4, 0.9) 100%);
  z-index: -1;
}

.space-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 10px 30px rgba(203,210,217,0.12);
}

.space-card:hover .space-card-bg {
  transform: scale(1.03);
}

/* Cyber corner brackets styling */
.cyber-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--neon-green);
  border-style: solid;
  opacity: 0.7;
  pointer-events: none;
  z-index: 5;
}

.cyber-bracket.top-left {
  top: 20px;
  left: 20px;
  border-width: 1.5px 0 0 1.5px;
}

.cyber-bracket.top-right {
  top: 20px;
  right: 20px;
  border-width: 1.5px 1.5px 0 0;
}

.cyber-bracket.bottom-left {
  bottom: 20px;
  left: 20px;
  border-width: 0 0 1.5px 1.5px;
}

.cyber-bracket.bottom-right {
  bottom: 20px;
  right: 20px;
  border-width: 0 1.5px 1.5px 0;
}

.space-card-content {
  z-index: 2;
  pointer-events: none;
}

.space-card-tag {
  color: var(--neon-green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  display: block;
}

.space-card-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.2;
  margin-bottom: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.space-card-desc {
  color: var(--text-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 25px;
  max-width: 90%;
}

.space-card-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  pointer-events: auto;
}

.btn-space-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  border-radius: 4px;
  padding: 10px 24px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.btn-space-link:hover {
  background: var(--neon-green);
  color: var(--bg-black);
  box-shadow: 0 0 15px var(--accent-green);
}

.coming-soon-badge {
  display: inline-block;
  border: 1px solid rgba(238,242,246,0.4);
  color: #eef2f6;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(238,242,246,0.05);
}

@media (max-width: 992px) {
  .spaces-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .space-card {
    height: 460px;
    padding: 30px;
  }
  .space-card-title {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   PHASE 7: FEATURED PROJECTS SHOWCASE STYLES
   ========================================================================== */

.project-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  background: rgba(7, 9, 14, 0.4);
  backdrop-filter: blur(10px);
}

.showcase-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 10px 30px rgba(203,210,217,0.1);
}

.showcase-media-container {
  position: relative;
  height: 350px;
  overflow: hidden;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.05);
}

.showcase-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 0;
}

.showcase-card:hover .showcase-bg {
  transform: scale(1.02);
}

.showcase-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(3, 3, 4, 0.1) 0%, rgba(3, 3, 4, 0.4) 100%);
  z-index: 1;
}

/* Toggle pills — used by the portfolio.html project cards */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: var(--text-gray);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.toggle-btn svg {
  color: var(--text-gray);
  transition: color 0.3s ease;
}

.toggle-btn.active {
  background: var(--neon-green);
  color: var(--bg-black);
  box-shadow: 0 0 12px rgba(203,210,217,0.3);
}

.toggle-btn.active svg {
  color: var(--bg-black);
}

.showcase-content {
  padding: 35px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.showcase-location {
  color: var(--neon-green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  display: block;
}

.showcase-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 16px;
}

.showcase-desc {
  color: var(--text-gray);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1;
}

.showcase-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 20px;
}

.showcase-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.showcase-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.showcase-meta .meta-label {
  font-size: 0.65rem;
  color: var(--text-dark-gray);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.showcase-meta .meta-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-white);
}

.btn-launch-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-white);
  border-radius: 50px;
  padding: 10px 22px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-launch-site:hover {
  border-color: var(--neon-green);
  color: var(--neon-green);
  box-shadow: 0 0 10px rgba(203,210,217,0.1);
}

@media (max-width: 992px) {
  .project-showcase-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .showcase-media-container {
    height: 260px;
  }
  .showcase-content {
    padding: 24px;
  }
  .showcase-title {
    font-size: 1.5rem;
  }
  .toggle-btn {
    padding: 6px 12px;
    font-size: 0.68rem;
    gap: 4px;
  }
}

/* Floating Back to Top Button */
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(238,242,246,0.3);
  background: rgba(7, 9, 14, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 999;
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  animation: neonPulse 2s infinite ease-in-out;
}

#back-to-top svg {
  width: 24px;
  height: 24px;
  stroke: var(--neon-green);
  stroke-width: 2.5px;
  transition: transform 0.3s ease, stroke 0.3s ease;
  animation: arrowBounce 2s infinite ease-in-out;
}

#back-to-top:hover {
  border-color: var(--neon-green);
  color: var(--bg-black);
  background: var(--neon-green);
  box-shadow: 0 0 20px rgba(203,210,217,0.65);
  transform: translateY(-5px);
  animation: none; /* disable pulse during active hover hover */
}

#back-to-top:hover svg {
  stroke: var(--bg-black);
  animation: none;
  transform: translateY(-2px);
}

@keyframes neonPulse {
  0% {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 5px rgba(238,242,246,0.2);
    border-color: rgba(238,242,246,0.3);
  }
  50% {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(238,242,246,0.55);
    border-color: rgba(238,242,246,0.8);
  }
  100% {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 5px rgba(238,242,246,0.2);
    border-color: rgba(238,242,246,0.3);
  }
}

@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 768px) {
  #back-to-top {
    bottom: 25px;
    right: 25px;
    width: 48px;
    height: 48px;
  }
  #back-to-top svg {
    width: 20px;
    height: 20px;
  }
}





/* ===== VILLA DEMO (restored) ===== */

/* --- Layout foundations --- */
.scroll-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 5vw, 60px) clamp(20px, 5%, 60px);
    overflow: hidden;
    background: #0a0a0a;
}

.scroll-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(203,210,217,0.04) 0, rgba(203,210,217,0.04) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(0deg,  rgba(203,210,217,0.04) 0, rgba(203,210,217,0.04) 1px, transparent 1px, transparent 60px);
    background-size: 60px 60px;
}

.section-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Glass card --- */
.glass-card {
    background: var(--color-bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(203,210,217,0.3);
    border-radius: 0;
    box-shadow: var(--shadow-glass), inset 0 0 30px rgba(203,210,217,0.02);
    transition: var(--transition-smooth);
    position: relative;
}

.glass-card:hover {
    border-color: rgba(203,210,217,0.55);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6), 0 0 20px rgba(203,210,217,0.12);
}

/* --- Control label --- */
.control-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 12px;
}

/* --- Pulse dot (standalone) --- */
.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--theme-accent);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--theme-accent);
    animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

/* --- Showcase stack & viewport wrapper --- */
.showcase-stack {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.showcase-stack .showcase-info-panel {
    max-width: 800px;
}

.showcase-viewport-wrapper {
    position: relative;
    width: 100%;
    height: 700px;
    border-radius: 16px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #080816 0%, #010103 100%);
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .showcase-viewport-wrapper { height: 400px; }
}

#mansion-canvas-container {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: grab;
}

#mansion-canvas-container:active {
    cursor: grabbing;
}

/* --- Viewport header --- */
.viewport-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(3, 3, 7, 0.95) 0%, rgba(3, 3, 7, 0) 100%);
    z-index: 10;
}

.viewport-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
}

.viewport-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--theme-accent);
    letter-spacing: 0.1em;
    border: 1px solid var(--theme-accent-glow);
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(13, 242, 101, 0.05);
}

/* --- Viewport button --- */
.viewport-btn {
    background-color: rgba(255, 255, 255, 0.03);
    border: var(--border-glass);
    color: var(--color-text-secondary);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.viewport-btn i {
    width: 14px;
    height: 14px;
}

.viewport-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}

.viewport-btn.active {
    background-color: rgba(13, 242, 101, 0.15);
    border-color: var(--theme-accent);
    color: #fff;
    box-shadow: 0 0 10px var(--theme-accent-glow);
}

/* --- Hotspots --- */
.hotspots-group {
    margin-top: 28px;
    margin-bottom: 28px;
}

.hotspots-group .control-label {
    display: block;
    margin-bottom: 14px;
}

.hotspot-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hotspot-btn {
    padding: 8px 16px;
    font-size: 0.75rem;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    border: var(--border-glass);
    font-family: var(--font-mono);
    cursor: pointer;
}

.hotspot-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}

.hotspot-btn.active {
    background-color: var(--theme-accent);
    color: var(--color-bg-deep);
    border-color: var(--theme-accent);
    box-shadow: 0 0 15px var(--theme-accent-glow);
}

/* --- Showcase demo badge --- */
.showcase-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(203,210,217,0.08);
    border: 1px solid rgba(203,210,217,0.3);
    color: #cbd2d9;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

/* --- Matterport HUD footer toolbar --- */
.viewport-footer-matterport {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to top, rgba(3, 3, 7, 0.95) 0%, rgba(3, 3, 7, 0) 100%);
    z-index: 10;
}

.view-modes-toolbar {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: var(--border-glass);
    border-radius: 30px;
    padding: 4px;
    gap: 4px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.mode-btn i {
    width: 13px;
    height: 13px;
}

.mode-btn:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.mode-btn.active {
    color: var(--color-bg-deep);
    background: var(--theme-accent);
    box-shadow: 0 0 10px var(--theme-accent-glow);
}

.tour-controls-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* --- Measurement HUD panel --- */
.measurement-hud-panel {
    position: absolute;
    top: 80px;
    right: 20px;
    width: 270px;
    background: rgba(3, 3, 7, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

.measurement-hud-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    border-color: rgba(13, 242, 101, 0.3);
    box-shadow: 0 8px 32px rgba(13, 242, 101, 0.1);
}

.measure-hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.hud-title {
    font-size: 0.75rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

.hud-title i {
    width: 14px;
    height: 14px;
    color: var(--theme-accent);
}

#btn-measure-clear {
    background: rgba(255, 51, 102, 0.1);
    border: 1px solid rgba(255, 51, 102, 0.3);
    color: #ff3366;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.2s ease;
}

#btn-measure-clear:hover {
    background: rgba(255, 51, 102, 0.25);
    box-shadow: 0 0 8px rgba(255, 51, 102, 0.2);
}

.measure-hud-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measure-point-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-dim);
}

.pt-val {
    color: var(--color-text-secondary);
}

.measure-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.res-lbl {
    font-size: 0.7rem;
    color: var(--color-text-primary);
}

.res-val {
    font-size: 1.05rem;
    color: var(--theme-accent);
    font-weight: bold;
    text-shadow: 0 0 10px var(--theme-accent-glow);
}

/* --- Tour status HUD --- */
.tour-status-hud {
    position: absolute;
    top: 80px;
    right: 20px;
    background: rgba(255, 51, 102, 0.12);
    border: 1px solid rgba(255, 51, 102, 0.35);
    padding: 8px 14px;
    border-radius: 20px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: #ff3366;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.15);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

.tour-status-hud.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Pulse dot red (tour recording indicator) --- */
.pulse-dot-red {
    width: 8px;
    height: 8px;
    background-color: #ff3366;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #ff3366;
    animation: pulseRed 1.5s infinite ease-in-out;
}

@keyframes pulseRed {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.4; }
}

/* ===== END VILLA DEMO ===== */

/* ===== NEWSLETTER BANNER ===== */


.newsletter-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.newsletter-text h3 {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 8px 0;
}

.newsletter-text p {
  color: #a0a0a0;
  font-size: 15px;
  max-width: 400px;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.newsletter-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(238,242,246,0.3);
  color: #ffffff;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 13px;
  padding: 14px 20px;
  border-radius: 6px;
  width: 280px;
  outline: none;
}

.newsletter-input:focus {
  border-color: #eef2f6;
}

.newsletter-btn {
  background: linear-gradient(to right, #cbd2d9, #eef2f6);
  color: #0a0a0a;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* ===== FOOTER COVERAGE AREA ===== */

.coverage-label {
  display: block;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.6rem;
  color: #cbd2d9;
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
}
.footer-coverage {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin-bottom: 1rem;
}


/* ============================================================
   SERVICES ACCORDION
   ============================================================ */

.svc-accordion {
  margin-top: 40px;
  border: 1px solid rgba(203,210,217,0.15);
  border-radius: 8px;
  overflow: hidden;
}

.svc-row {
  border-bottom: 1px solid rgba(203,210,217,0.1);
}

.svc-row:last-child {
  border-bottom: none;
}

.svc-row-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  background: rgba(5, 8, 16, 0.6);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
  font-family: inherit;
}

.svc-row-header:hover,
.svc-row-header[aria-expanded="true"] {
  background: rgba(203,210,217,0.05);
}

.svc-num {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(238,242,246,0.6);
  letter-spacing: 0.1em;
  min-width: 28px;
}

.svc-cat-name {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  min-width: 180px;
}

.svc-cat-tag {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  flex: 1;
}

.svc-chevron {
  margin-left: auto;
  color: rgba(203,210,217,0.6);
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.svc-row-header[aria-expanded="true"] .svc-chevron {
  transform: rotate(180deg);
}

/* Accordion body */
.svc-body {
  padding: 0 28px 24px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: svc-slide-in 0.25s ease;
}

@keyframes svc-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flat item list */
.svc-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
}

.svc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: default;
}

.svc-item svg {
  width: 15px;
  height: 15px;
  color: rgba(238,242,246,0.7);
  flex-shrink: 0;
}

.svc-item:hover {
  background: rgba(203,210,217,0.05);
  border-color: rgba(203,210,217,0.15);
}

.svc-item-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
  margin-left: 4px;
}

/* XR Media clusters */
.svc-clusters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding-top: 16px;
}

@media (max-width: 768px) {
  .svc-clusters { grid-template-columns: 1fr; }
}

.svc-cluster {
  background: rgba(238,242,246,0.03);
  border: 1px solid rgba(238,242,246,0.1);
  border-radius: 6px;
  padding: 16px;
}

.svc-cluster-heading {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #eef2f6;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.svc-cluster-heading svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.svc-cluster .svc-items {
  padding-top: 0;
}

/* ============================================================
   SONOXR PREMIUM CALLOUT
   ============================================================ */

.sonoxr-callout {
  margin-top: 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(238,242,246,0.06) 0%, rgba(203,210,217,0.04) 100%);
  border: 1px solid rgba(238,242,246,0.3);
  box-shadow: 0 0 40px rgba(238,242,246,0.08), inset 0 0 60px rgba(238,242,246,0.03);
  overflow: hidden;
  position: relative;
}

.sonoxr-callout::before {
  content: '';
  position: absolute;
  top: -1px; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,242,246,0.6), transparent);
}

.sonoxr-callout-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 36px 40px;
}

.sonoxr-callout-left {
  flex: 1;
}

.sonoxr-callout-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sonoxr-badge-exclusive {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #cbd2d9;
  background: rgba(203,210,217,0.1);
  border: 1px solid rgba(203,210,217,0.35);
  padding: 4px 10px;
  border-radius: 3px;
}

.sonoxr-badge-platform {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(238,242,246,0.8);
  background: rgba(238,242,246,0.08);
  border: 1px solid rgba(238,242,246,0.25);
  padding: 4px 10px;
  border-radius: 3px;
}

.sonoxr-callout-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #eef2f6;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  line-height: 1;
}

.sonoxr-callout-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}

.sonoxr-callout-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 520px;
}

.sonoxr-callout-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #0a0a0a;
  background: #eef2f6;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.sonoxr-callout-cta:hover {
  background: #cbd2d9;
  box-shadow: 0 0 20px rgba(238,242,246,0.4);
}

.sonoxr-callout-cta svg {
  width: 15px;
  height: 15px;
}

/* SONOXR animated glyph */
.sonoxr-callout-right {
  flex-shrink: 0;
}

.sonoxr-glyph {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sonoxr-glyph-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(238,242,246,0.3);
  animation: sonoxr-spin linear infinite;
}

.sonoxr-glyph-ring--1 { width: 120px; height: 120px; animation-duration: 12s; }
.sonoxr-glyph-ring--2 { width: 82px;  height: 82px;  animation-duration: 8s; animation-direction: reverse; border-color: rgba(203,210,217,0.25); }
.sonoxr-glyph-ring--3 { width: 48px;  height: 48px;  animation-duration: 5s; border-color: rgba(238,242,246,0.4); }

@keyframes sonoxr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.sonoxr-glyph-label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #eef2f6;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .sonoxr-callout-inner { flex-direction: column; padding: 28px 24px; }
  .sonoxr-callout-right { display: none; }
  .svc-cat-tag { display: none; }
  .svc-cat-name { min-width: unset; }
}


/* ==========================================================================
   MBB 3D DESIGN SYSTEM — reusable, opt-in utility classes
   Add these to NEW section markup; existing sections are untouched.
   Note: `.section-title` already exists in this file with different styles,
   so the design-system heading class is `.ds-section-title` to avoid cascade
   conflicts. Existing `.section-title` usages will migrate in a future pass.
   Likewise `.btn-text` is named `.ds-btn-text` here.
   ========================================================================== */

/* Layout primitives */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-py);
}

/* Typography */
/* Section-header convention: eyebrow is "▶ LABEL" — no leading "0X /" section
   number. Numbers are reserved for internal card sequences only (e.g. Industries
   verticals, cinematic card tags). Do not reintroduce section numbering. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
}

/* `.ds-section-title` is the design-system heading class.
   Existing `.section-title` (Syne, inherited) stays unchanged. */
.ds-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

/* Buttons */
/* Primary CTA standard = SOLID green (var(--green)) with dark text — not the
   --grad-cta gradient. Matches the hero demo's active controls. Mirrored on
   .btn-nav-primary so Get Quote and all form submits read identically. */
/* Standardized site buttons. display:inline-flex / text-decoration:none are
   kept so anchor-based buttons size correctly and don't underline. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #cbd2d9;
  color: #0a0a0a;
  border: 2px solid #cbd2d9;
  padding: 14px 32px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-primary:hover {
  background: #cbd2d9;
  box-shadow: 0 0 20px #cbd2d9, 0 0 40px rgba(203,210,217,0.4);
  transform: scale(1.03);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #ffffff;
  border: 2px solid #cbd2d9;
  padding: 14px 32px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap; /* keep pill labels like "VIEW ON REQUEST" on one line */
}
.btn-secondary:hover {
  background: #cbd2d9;
  color: #0a0a0a;
  box-shadow: 0 0 20px #cbd2d9, 0 0 40px rgba(203,210,217,0.4);
  transform: scale(1.03);
}

/* `.ds-btn-text` — cyan text link (existing `.btn-text` is component-scoped). */
.ds-btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration-color 0.2s ease;
}
.ds-btn-text:hover {
  text-decoration: underline;
  text-decoration-color: var(--cyan);
}

/* Accessibility — visible focus ring on all interactive elements */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced-motion — disable all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   ECOSYSTEM FORK SECTION
   ========================================================================== */

/* ── TRUSTED-BY LOGO MARQUEE (infinite auto-scroll) ───────────────────────── */
.logo-marquee {
  padding: 38px 0 46px;
  background: #0a0a0a;
  overflow: hidden;
  text-align: center;
}
.logo-marquee-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #cbd2d9;
  margin-bottom: 28px;
}
.logo-marquee-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: logoMarquee 40s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-chip {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  padding: 13px 26px;
  border-radius: 10px;
  background: rgba(203,210,217,0.05);
  border: 1px solid rgba(203,210,217,0.45);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.logo-chip:hover {
  color: #ffffff;
  border-color: #cbd2d9;
  background: rgba(203,210,217,0.13);
}
/* When real logos arrive: <img class="logo-chip logo-chip-img" src=...> */
.logo-chip-img {
  height: 34px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(1) brightness(1.7);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.logo-chip-img:hover { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 32px 60px; }
}

/* WHAT WE DO header above the fork */
.ecosystem-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) 40px clamp(28px, 4vw, 44px);
  text-align: center;
  box-sizing: border-box;
}
.ecosystem-header .section-tag { display: block; margin-bottom: 16px; }
.ecosystem-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: clamp(2.7rem, 6.8vw, 5.2rem); /* bumped 2026-07-12 (Michael) — sub line removed, title carries the section */
  font-weight: 900;
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 18px;
}
.ecosystem-title span { color: #cbd2d9; }

/* ── Unified homepage section titles: same size, green, centered ──────────── */
.ecosystem-title,
.video-expand-title,
#portfolio.page-section .section-title,
#blog.page-section .section-title,
#industries.page-section .section-title {
  font-family: 'SXR Space Grotesk', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.ecosystem-title span,
.video-expand-title span,
#portfolio.page-section .section-title span,
#blog.page-section .section-title span,
#industries.page-section .section-title span { color: #cbd2d9 !important; }
/* Center the blog + portfolio header (eyebrow + desc) too */
#blog.page-section .section-tag { display: block; text-align: center; }
#blog.page-section .section-desc,
#portfolio.page-section .section-desc { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.ecosystem-sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .ecosystem-header { padding: 48px 20px 26px; }
}

/* ── Two-paths cards (Veesus-style, liquid glass) ── */
.ecosystem-paths {
  position: relative;
  padding-bottom: clamp(48px, 7vw, 90px);
  background:
    radial-gradient(ellipse 48% 52% at 26% 54%, rgba(203,210,217,0.32), transparent 70%),
    radial-gradient(ellipse 48% 52% at 74% 54%, rgba(238,242,246,0.28), transparent 70%);
}
.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 40px 36px;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.path-card--mbb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.path-card--sonoxr {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.path-card--mbb:hover {
  transform: translateY(-4px);
  border-color: rgba(203,210,217,0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 64px rgba(0, 0, 0, 0.5);
}
.path-card--sonoxr:hover {
  transform: translateY(-4px);
  border-color: rgba(238,242,246,0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 64px rgba(0, 0, 0, 0.5);
}
/* Faded category background images on the path cards (all breakpoints) */
.path-card > * { position: relative; z-index: 1; }
.path-card--mbb::before,
.path-card--sonoxr::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}
.path-card--mbb::before { background-image: linear-gradient(165deg, rgba(5,8,16,0.45) 0%, rgba(5,8,16,0.7) 100%), url('assets/path-mbb.jpg'); }
.path-card--sonoxr::before { background-image: linear-gradient(165deg, rgba(5,8,16,0.45) 0%, rgba(5,8,16,0.7) 100%), url('assets/path-sonoxr.jpg'); }
.path-card-logo { height: 66px; width: auto; margin-bottom: 22px; align-self: flex-start; }
.path-card-logo--sono { height: 58px; }
.path-card-eyebrow {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}
.path-card--mbb .path-card-eyebrow { color: #cbd2d9; }
.path-card--sonoxr .path-card-eyebrow { color: #eef2f6; }
.path-card-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px;
  line-height: 1.2;
}
.path-card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 18px;
}
.path-card-note {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 28px;
}
.path-card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

/* Scroll-fill text — words start dim and brighten as the section scrolls through */
.sfw { color: #ffffff; opacity: 0.16; }
.sfw--accent { color: #cbd2d9; }
@media (prefers-reduced-motion: reduce) { .sfw, .sfw--accent { opacity: 1 !important; } }

/* ── ABOUT PAGE ─────────────────────────────────────────────────────────── */
.about-intro, .about-story, .about-vm, .about-stack, .about-proof {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(46px, 7vw, 88px) clamp(20px, 4vw, 40px);
}
.about-intro { text-align: center; padding-top: clamp(90px, 12vw, 140px); }
.about-intro-inner { display: flex; flex-direction: column; align-items: center; }
.about-intro-portrait { margin-bottom: 26px; }
.about-intro .section-title,
.about-story .section-title,
.about-stack .section-title { color: #ffffff; text-align: center; }
.about-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(255, 255, 255, 0.6); max-width: 520px; margin: 14px auto 0; line-height: 1.6; }
.about-story { text-align: center; }
.about-story-body { max-width: 720px; margin: 24px auto 0; text-align: left; }
.about-story-body p { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, 0.65); margin: 0 0 18px; }
.about-story-body p:last-child { color: #ffffff; font-weight: 600; }
/* Home #about story heading — custom classes so the page-section reveal doesn't
   hijack them (it grabs the first .section-tag/.section-title and holds opacity:0). */
.about-story-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: #cbd2d9;
  margin-bottom: 16px;
}
.about-story-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}
.about-story-heading span { color: #cbd2d9; }
/* Home #about: bigger, centered story that scrolls THROUGH a compact window */
#about .about-text-centered { max-width: 1100px; }
#about .about-story-window { margin-top: 30px; }
#about .about-story-body { max-width: 1100px; margin: 0 auto; text-align: center; height: 500px; overflow-y: auto; }
#about .about-story-body p {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.5;
  margin-bottom: 34px;
}
#about .about-story-body p:first-child { margin-top: 0; }
#about .about-story-body em { font-style: normal; color: #cbd2d9; }
/* Story flows at natural height inside the green box — the old desktop
   sticky-pin + 360px clipped scroll-window mechanism was removed (no height,
   no overflow:hidden, no mask, no position:sticky): all paragraphs display. */

.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vm-card { padding: 40px 38px; border-radius: 16px; }
.vm-card .section-tag { display: block; margin-bottom: 16px; color: #cbd2d9; }
.vm-text { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.55; color: #ffffff; margin: 0; }

.about-stack { text-align: center; }
.about-stack-desc { color: rgba(255, 255, 255, 0.55); max-width: 640px; margin: 14px auto 36px; line-height: 1.6; }
.about-stack-desc em { color: #cbd2d9; font-style: normal; }
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.stack-group { padding: 30px 28px; border-radius: 14px; }
.stack-group-title { font-family: 'SXR Space Grotesk', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: #cbd2d9; margin: 0 0 18px; }
.stack-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.stack-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.82); line-height: 1.5; }
.stack-list li::before { content: "\25B8"; color: #cbd2d9; flex-shrink: 0; }

.about-proof { text-align: center; }
.about-partner { margin-top: 48px; }
.about-partner-label { display: block; font-size: 11px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); margin-bottom: 18px; }
.about-partner-badges { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.about-partner-badges img { height: 60px; width: auto; opacity: 0.85; }
@media (max-width: 768px) {
  .vm-grid, .stack-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .path-grid { grid-template-columns: 1fr; }
  .path-card { padding: 30px 26px 28px; }
}

.ecosystem-fork {
  display: flex;
  min-height: 60vh;
  position: relative;
  /* Match the Featured Projects grid width below: same max-width + horizontal padding */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.fork-panel {
  flex: 1;
  position: relative;
  /* overflow must stay visible for 3D flip to not clip */
  cursor: pointer;
  perspective: 1400px;
  transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-height: 60vh;
}

.fork-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.fork-panel:hover .fork-bg {
  transform: scale(1.03);
}

.fork-mbb .fork-bg {
  background:
    linear-gradient(rgba(5,8,16,0.45), rgba(5,8,16,0.45)),
    url('assets/hf_20260602_011932_c2bd9a16.png') center center / cover no-repeat;
}
.fork-sonoxr .fork-bg {
  background: #0a0a0a url('assets/Screenshot_2026-06-10_at_1_17_54_PM__2_.png') center 38% / contain no-repeat;
}

/* Thin gradient divider */
.fork-divider {
  width: 2px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, #cbd2d9, #eef2f6);
  position: relative;
  z-index: 2;
}

/* HUD corner brackets */
.fork-bracket {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 3;
  pointer-events: none;
}
.fork-bracket--tl {
  top: 20px; left: 20px;
  border-top: 2px solid rgba(238,242,246,0.5);
  border-left: 2px solid rgba(238,242,246,0.5);
}
.fork-bracket--br {
  bottom: 20px; right: 20px;
  border-bottom: 2px solid rgba(238,242,246,0.5);
  border-right: 2px solid rgba(238,242,246,0.5);
}

/* Content */
.fork-content {
  position: relative;
  z-index: 2;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fork-label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.fork-label--mbb    { color: #cbd2d9; }
.fork-label--sonoxr { color: #eef2f6; }

.fork-content h2 {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
}

.fork-content p {
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 360px;
}

/* ── Flip card mechanics ── */
.flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  will-change: transform;
}
.fork-panel.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-front {
  display: flex;
  align-items: flex-end;
  overflow: hidden; /* clip the hover-scaled .fork-bg — front only */
}

.flip-back {
  /* Counter-rotate the back so its content reads un-mirrored once .flip-inner
     rotates 180deg. NO overflow:hidden here — combining it with
     backface-visibility:hidden makes Chrome ignore the backface and render
     the back text mirrored. */
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-back--mbb {
  background:
    linear-gradient(135deg, rgba(203,210,217,0.08) 0%, rgba(5,8,16,0.97) 60%),
    #0a0a0a;
  border: 1px solid rgba(203,210,217,0.2);
}
.flip-back--sonoxr {
  background:
    linear-gradient(135deg, rgba(238,242,246,0.08) 0%, rgba(5,8,16,0.97) 60%),
    #0a0a0a;
  border: 1px solid rgba(238,242,246,0.2);
}

.fork-back-content {
  position: relative;
  z-index: 2;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.fork-back-content h3 {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
}

.fork-back-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.fork-back-list li {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.82);
  padding-left: 1.25rem;
  position: relative;
}
.fork-back--mbb .fork-back-list li::before,
.flip-back--mbb .fork-back-list li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: #cbd2d9;
  font-size: 0.5rem;
  top: 0.35em;
}
.flip-back--sonoxr .fork-back-list li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: #eef2f6;
  font-size: 0.5rem;
  top: 0.35em;
}

.fork-back-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* LEARN MORE trigger button on front face */
.fork-flip-btn {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border-radius: 50px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: opacity 0.2s;
  width: fit-content;
}
.fork-flip-btn--mbb {
  color: #cbd2d9;
  border: 1.5px solid #cbd2d9;
}
.fork-flip-btn--mbb:hover { background: rgba(203,210,217,0.12); }
.fork-flip-btn--sonoxr {
  color: #eef2f6;
  border: 1.5px solid #eef2f6;
}
.fork-flip-btn--sonoxr:hover { background: rgba(238,242,246,0.12); }

/* BACK button on rear face */
.fork-flip-back-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  color: rgba(255,255,255,0.75);
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 0.4rem 1rem;
  transition: color 0.2s, border-color 0.2s;
}
.fork-flip-back-btn:hover {
  color: #ffffff;
  border-color: rgba(255,255,255,0.7);
}

/* Mobile — stack vertically, no hover expand */
@media (max-width: 767px) {
  .ecosystem-fork {
    flex-direction: column;
    min-height: unset;
    padding: 0 20px;
  }
  .fork-panel {
    min-height: 50vh;
    flex: unset !important; /* override any GSAP inline flex */
  }
  .fork-divider {
    width: 100%;
    height: 2px;
  }
}

/* ── WHAT WE DO banner (Novaverse-style, between ecosystem fork & Featured Projects) ── */
.whatwedo-banner {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  /* Contained HUD card: breathing room on left/right, gap above. Border is
     transparent at rest (no size shift) and turns green on hover, matching
     the Projects cards. */
  margin: 80px 40px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 0.3s ease;
}
.whatwedo-banner:hover {
  border: 1px solid #cbd2d9;
}
.whatwedo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1; /* static image fully visible under the light overlay */
}
.whatwedo-overlay {
  position: absolute;
  inset: 0;
  /* Dark enough to keep text legible, light enough to see the wireframe motion */
  background: rgba(5, 8, 16, 0.6);
}
.whatwedo-content {
  position: relative;
  z-index: 2;
  padding: 60px 48px;
  display: flex;
  /* Bottom-align both columns so the subtext/partner-label and button/badge
     rows sit on the same baselines across the two columns */
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.whatwedo-left {
  max-width: 600px;
  text-align: left;
}
/* Right column — Matterport partner label + badges, aligned to the left
   column's subtext (label) and button (badges) rows */
.whatwedo-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  flex-shrink: 0;
}
.whatwedo-partner-label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}
/* Badges sit side by side, aligned with the EXPLORE SERVICES button row */
.whatwedo-badges {
  display: flex;
  align-items: center;
  gap: 24px;
}
.whatwedo-badge {
  height: 62px;
  width: auto;
  max-width: 220px;
  display: block;
}
.whatwedo-eyebrow {
  display: block;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #eef2f6;
  margin-bottom: 16px;
}
.whatwedo-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  color: #cbd2d9;
  margin: 0 0 16px;
}
.whatwedo-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 0 28px;
}
@media (max-width: 767px) {
  .whatwedo-banner { margin: 60px 20px 0; }
  .whatwedo-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 24px;
    gap: 32px;
  }
  .whatwedo-right { align-items: flex-start; }
  /* Let the two badges wrap and scale down on narrow screens */
  .whatwedo-badges { flex-wrap: wrap; gap: 16px; }
  .whatwedo-badge { height: 52px; }
}

/* ───────────────────────────────────────────────
   HOW IT WORKS — process section (solutions.html)
   Static placeholder; motion upgrade pending.
   ─────────────────────────────────────────────── */
/* ── PIPELINE SECTION ── */

/* Panel grid */
/* 3-per-row card grid. Cards have a fixed collapsed height and expand
   in HEIGHT (not width) on hover so siblings keep their width. */
.panel-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 48px 40px;
  position: relative;
  z-index: 2;
  scroll-margin-top: 150px;
}
.panel {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 3);
  height: 280px;
  overflow: hidden;
  cursor: pointer;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
/* CAPTURE has 2 services — fill the row at half width each */
.panel-grid[data-cols="2"] .panel {
  flex-basis: calc((100% - 12px) / 2);
}
/* CAPTURE step has 4 services — one row of 4 */
.panel-grid[data-cols="4"] .panel {
  flex-basis: calc((100% - 36px) / 4);
}
@media (max-width: 1100px) {
  .panel-grid[data-cols="4"] .panel { flex-basis: calc((100% - 12px) / 2); }
}
/* note line above a panel grid (e.g. STEP 3 "already included" reminder) */
.grid-note {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 40px 40px 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
}
.grid-note + .panel-grid { padding-top: 20px; }

/* ── WHICH CAPTURE IS RIGHT FOR YOU? — comparison table (services.html STEP 1) ── */
.capture-compare {
  position: relative;
  z-index: 2;
  padding: 24px 40px 64px;
}
.capture-compare-head { margin-bottom: 24px; }
.capture-compare-head .section-tag { display: block; margin-bottom: 10px; }
.capture-compare-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
}
.capture-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.capture-compare-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: rgba(5,8,16,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}
.capture-compare-table th,
.capture-compare-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.capture-compare-table thead th {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbd2d9;
  background: rgba(203,210,217,0.05);
  border-bottom: 1px solid rgba(203,210,217,0.25);
  white-space: nowrap;
}
.capture-compare-table tbody th {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}
.capture-compare-table tbody tr:last-child th,
.capture-compare-table tbody tr:last-child td { border-bottom: none; }
/* green price row — opt-in via .cc-invest (NOT last-child: the add-ons table's last row is a normal row) */
.capture-compare-table tbody tr.cc-invest td {
  color: #cbd2d9;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.panel:hover {
  height: 380px;
  border-color: rgba(255,255,255,0.12);
}
.panel--featured { border: 1px solid rgba(203,210,217,0.3); background: rgba(203,210,217,0.03); }
.panel--featured .panel-tag { color: #cbd2d9 !important; }
/* COMING SOON chip on a panel card (e.g. PortalCam splat — gauging interest pre-launch) */
.panel-soon {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #101214;
  background: #cbd2d9;
  padding: 3px 9px;
  border-radius: 3px;
}
.panel-soon-link { color: #cbd2d9; text-decoration: underline; text-underline-offset: 2px; }
.panel-soon-link:hover { color: #fff; }
.panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.panel:hover .panel-bg { transform: scale(1); }
.panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.panel:hover video { opacity: 1; }
.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,8,16,0.9) 0%, rgba(5,8,16,0.3) 50%, rgba(5,8,16,0.1) 100%);
}
.panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.5rem;
  z-index: 3;
}
.panel-tag {
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #ffffff;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  transition: color 0.3s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.panel:hover .panel-tag { color: #cbd2d9; }
.panel-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.panel:hover .panel-desc { max-height: 60px; opacity: 1; }

/* Pipeline explore link */
.pipeline-explore {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.pipeline-explore:hover { color: #cbd2d9; }

/* CTA block */
.pipeline-cta {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pipeline-cta-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  margin-top: 1rem;
  font-family: 'SXR Space Grotesk', monospace;
}

/* ── SPACING PASS (services.html) ── */
.pipeline-section {
  display: flex;
  flex-direction: column;
}
/* Pricing band beneath the CAPTURE panels (no element uses this yet — ready
   for when a pricing block is added under #capture-panels). */
.capture-pricing {
  padding: 4rem 5rem;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

@media (max-width: 768px) {
  .panel-grid { flex-direction: column; align-items: stretch; }
  .panel { flex: 0 0 220px !important; height: 220px; }
  .panel:hover { height: 300px; }
  .pipeline-nav-item { padding: 0.9rem 1rem; font-size: 9px; }
  .pipeline-hero { padding: 0 1.5rem 3rem; }
  .capture-pricing { padding: 2.5rem 1.5rem; }
  .deliver-cards { grid-template-columns: 1fr; margin: 0 1.5rem 3rem; }
}

.pipeline-nav {
  position: sticky;
  top: 102px; /* sits just below the 102px-tall fixed .main-nav so both stack cleanly */
  z-index: 90; /* below .main-nav (100) so the main bar always wins, above section content */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(5,8,16,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0;
}
.pipeline-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 2.5rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  color: rgba(255,255,255,0.35);
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pipeline-nav-item:hover { color: rgba(255,255,255,0.7); }
.pipeline-nav-item.active { color: #cbd2d9; border-bottom-color: #cbd2d9; }
.pipeline-nav-num { font-size: 9px; opacity: 0.5; }

.section-divider {
  height: 64px;
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.section-divider-label {
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.15);
}
@keyframes divider-pulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(4px); }
}

.pipeline-section {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pipeline-section + .pipeline-section {
  margin-top: 2px;
}
.pipeline-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Static dark background with a subtle cyan grid — used on DELIVER
   so it doesn't duplicate the footer's city video. */
.pipeline-bg--grid {
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 63px, rgba(238,242,246,0.05) 63px, rgba(238,242,246,0.05) 64px),
    repeating-linear-gradient(90deg, transparent 0, transparent 63px, rgba(238,242,246,0.05) 63px, rgba(238,242,246,0.05) 64px),
    radial-gradient(ellipse at 50% 0%, rgba(238,242,246,0.06) 0%, transparent 60%);
}
.pipeline-video,
.pipeline-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pipeline-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,8,16,0.55) 0%, rgba(5,8,16,0.3) 40%, rgba(5,8,16,0.85) 100%);
}
.pipeline-hero {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5rem 4rem;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.pipeline-tag {
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  border: 1px solid;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.pipeline-headline {
  font-family: 'SXR Space Grotesk', monospace;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.pipeline-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  max-width: 540px;
  margin-bottom: 2rem;
}

/* ── Fuselab-style category banners: tags top, title + button bottom ── */
.pipeline-hero--banner {
  justify-content: space-between !important;
  padding: 2.4rem 5rem 3rem !important;
}
.banner-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.banner-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-tags--right { justify-content: flex-end; }
.btag {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 14px;
  border-radius: 50px;
  background: rgba(15, 22, 34, 0.72);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.btag--accent {
  background: rgba(203,210,217,0.14);
  border-color: rgba(203,210,217,0.4);
  color: #cbd2d9;
}
.banner-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.pipeline-hero--banner .pipeline-tag { margin-bottom: 0.75rem; }
.pipeline-hero--banner .pipeline-headline {
  font-size: clamp(26px, 3.2vw, 42px) !important;
  margin-bottom: 0 !important;
}
.banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  background: #cbd2d9;
  color: #101214;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 8px 8px 22px;
  border-radius: 50px;
  text-decoration: none;
  transition: gap 0.3s ease, box-shadow 0.3s ease;
}
.banner-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #101214;
  font-size: 18px;
  transition: transform 0.3s ease;
}
.banner-btn:hover { gap: 20px; box-shadow: 0 0 30px rgba(203,210,217,0.4); }
.banner-btn:hover .banner-btn-arrow { transform: translateX(3px); }
@media (max-width: 768px) {
  .pipeline-hero--banner { padding: 1.5rem 1.5rem 2rem !important; }
  .banner-top { flex-direction: column; }
  .banner-tags--right { justify-content: flex-start; }
  .banner-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.pipeline-specs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: auto;
}
.pipeline-spec-item {
  padding: 2rem 2.5rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pipeline-spec-item:last-child { border-right: none; }
.spec-label {
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
}
.spec-value {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}
.deliver-cards {
  grid-template-columns: repeat(3, 1fr);
  margin: 0 5rem 4rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.deliver-card {
  padding: 2.5rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.deliver-card:last-child { border-right: none; }
.deliver-featured {
  background: rgba(203,210,217,0.05);
  border-color: rgba(203,210,217,0.2);
}
.deliver-num {
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 36px;
  font-weight: 700;
  color: rgba(255,255,255,0.06);
  margin-bottom: 1rem;
}
.deliver-featured .deliver-num { color: rgba(203,210,217,0.15); }
.deliver-title {
  font-family: 'SXR Space Grotesk', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
}
.deliver-featured .deliver-title { color: #cbd2d9; }
.deliver-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .pipeline-nav-item { padding: 0.9rem 1.2rem; font-size: 9px; }
  .pipeline-specs { grid-template-columns: 1fr 1fr; }
  .deliver-cards { grid-template-columns: 1fr; margin: 0 1.5rem 3rem; }
}

.process-section {
  padding: 6rem 2rem;
  background: #0a0a0a;
}

.process-section .section-tag {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #cbd2d9;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.process-section h2 {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 2.5rem;
}

.process-steps {
  display: flex;
  gap: 2rem;
}

.process-card {
  flex: 1;
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.process-card .phase-num {
  display: block;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #cbd2d9;
  line-height: 1;
  margin-bottom: 1rem;
}

.process-card h3 {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.75rem;
}

.process-card p {
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Mobile — stack vertically */
@media (max-width: 767px) {
  .process-steps {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════
   HAMBURGER MEGA-MENU NAV (index, solutions,
   portfolio, sonoxr, pricing). NOTE: the legacy
   header/.navbar/.nav-links CSS above is retained
   because about.html & contact.html still use it.
   ═══════════════════════════════════════════════ */

/* NAV */
.main-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; align-items: center; background: transparent; transition: background 0.3s; }
.main-nav.scrolled { background: rgba(5,8,16,0.95); backdrop-filter: blur(10px); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-logo { justify-self: center; }
.nav-logo img { height: 60px; }
.nav-cta-left { justify-self: start; }
.nav-spacer { display: none; }
.nav-right { display: flex; align-items: center; gap: 1rem; justify-self: end; }

/* HAMBURGER */
.hamburger { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: #ffffff; transition: all 0.3s; }
.main-nav.scrolled .hamburger span { background: #ffffff; }

/* GET QUOTE */
/* MEGA MENU — right-side drawer (page stays visible behind it) */
.mega-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60vw;
  max-width: 680px;
  background: rgba(5, 8, 16, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -24px 0 55px rgba(0, 0, 0, 0.55);
  border-left: 1px solid rgba(203,210,217,0.15);
  overflow-y: auto;
}
.mega-menu.open { transform: translateX(0); }

/* Backdrop — dims (but keeps visible) the rest of the page; click to close */
.mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(5, 8, 16, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.mega-backdrop.open { opacity: 1; pointer-events: auto; }

.mega-menu-inner { min-height: 100%; display: flex; flex-direction: column; padding: 1.75rem 2.5rem; }

@media (max-width: 768px) {
  .mega-menu { width: 88vw; max-width: none; }
  .mega-menu-inner { padding: 1.5rem 1.75rem; }
}

/* MEGA TOP */
.mega-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; }
.mega-top-right { display: flex; align-items: center; gap: 1rem; }
.hamburger-close { background: none; border: 1px solid rgba(255,255,255,0.3); color: #ffffff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; }

/* DIVIDER */
.mega-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0.5rem 0; }

/* MEGA LINKS */
.mega-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0;
  gap: 0;
}
.mega-link { display: flex; align-items: center; gap: 1.5rem; font-family: 'SXR Space Grotesk', sans-serif; font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 700; text-transform: uppercase; color: #ffffff; text-decoration: none; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 0.2s; }
.mega-link:hover { color: #cbd2d9; }
.mega-num { font-size: 0.75rem; color: #cbd2d9; letter-spacing: 0.1em; min-width: 2.5rem; }
.mega-arrow { margin-left: auto; font-size: 1.5rem; opacity: 0.4; }

/* MEGA FOOTER */
.mega-footer { padding-top: 1.5rem; }
.mega-social-label { font-family: 'SXR Space Grotesk', sans-serif; font-size: 0.7rem; color: rgba(255,255,255,0.4); letter-spacing: 0.15em; display: block; margin-bottom: 0.75rem; }
.mega-social-links { display: flex; gap: 2rem; }
.mega-social-links a { font-family: 'SXR Space Grotesk', sans-serif; font-size: 0.75rem; color: rgba(255,255,255,0.6); text-decoration: none; letter-spacing: 0.1em; transition: color 0.2s; }
.mega-social-links a:hover { color: #eef2f6; }

/* TRANSPARENT NAV over arbitrary (sometimes bright) video heroes.
   Keep the logo in full brand color (metallic + green cube) in every state
   instead of flattening it to white, and lay a dark top scrim behind the
   nav so the logo + buttons stay legible on light backdrops. */
.main-nav:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(5, 8, 16, 0.75), rgba(5, 8, 16, 0));
}
.main-nav:not(.scrolled) .nav-logo img {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}


/* ==========================================================================
   ABOUT SECTION — video background
   ========================================================================== */

/* Break out of the constrained page-section width so video fills full viewport */
#about.about-video-section {
  /* Full-bleed: break out of page-section's 1400px max-width and auto margins */
  max-width: 100%;
  width: 100%;
  margin: 0;
  min-height: 100vh;
  padding: 0;
  /* NO overflow:hidden here — it was vestigial (clipped an old full-bleed
     .about-video-bg that no longer exists) and an overflow ancestor silently
     BREAKS the `.about-hero` position:sticky pin (the sticky box loses its
     viewport scroll context and just scrolls away → empty runway = black gap
     below + displaced stats). Keep this visible so the story can pin. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.about-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.about-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.62);
  z-index: 1;
}

/* Lift all direct content above video + overlay */
#about.about-video-section .about-hero,
#about.about-video-section .about-stats-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding-inline: clamp(20px, 5vw, 60px);
}
#about.about-video-section .about-hero {
  padding-top: 100px;
  padding-bottom: 48px;
}
#about.about-video-section .about-stats-container {
  padding-bottom: 80px;
}

/* prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .about-video-bg {
    display: none;
  }
  #about.about-video-section .about-video-overlay {
    background: #0a0a0a;
  }
}

/* ── About: video removed → black bg with a subtle green ambient so the
   glass card actually reads as frosted glass (flat black gives it nothing
   to show through). ── */
.about-glass-section {
  background:
    radial-gradient(ellipse 50% 38% at 50% 28%, rgba(203,210,217,0.45), rgba(5, 8, 16, 0) 60%),
    radial-gradient(ellipse 80% 58% at 50% 32%, rgba(203,210,217,0.20), rgba(5, 8, 16, 0) 72%),
    linear-gradient(165deg, #08160f 0%, #0a0a0a 50%, #060b14 100%);
}
/* Lighter, genuinely translucent frost (overrides the near-black --glass-bg)
   + an inner highlight & green inner-glow so it reads as glass, not a box. */
#about.about-glass-section .about-hero {
  max-width: 1100px;
  margin: 110px auto 64px;
  padding: 56px clamp(28px, 5vw, 64px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(203,210,217,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 80px rgba(203,210,217,0.09),
    0 0 55px rgba(203,210,217,0.18),
    0 30px 70px rgba(0, 0, 0, 0.55);
}
@media (max-width: 768px) {
  #about.about-glass-section .about-hero {
    margin: 90px 18px 48px;
    padding: 36px 22px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TERRAIN-STYLE FOOTER — BHE Matterport dollhouse · WIREFRAME ⟷ SATELLITE
   (mock on index.html; rolls sitewide once approved)
   ══════════════════════════════════════════════════════════════════ */
.geo-footer {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  isolation: isolate;
}
/* Sticky-reveal (desktop): footer is pinned to the viewport bottom BEHIND the
   #page-container curtain (z-index 5). main.js gives the curtain a bottom margin
   equal to the footer height, so as you scroll to the end the curtain lifts and
   uncovers the footer beneath it. JS toggles this class; mobile stays normal-flow. */
.geo-footer.sticky-reveal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.geo-svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

.geo-footer-bg {
  position: absolute;
  /* full footer height (no vertical overshoot) so the Hollywood sign isn't clipped;
     width is oversized only for horizontal mouse-parallax drift */
  width: 110%;
  height: 100%;
  left: -5%;
  top: 0;
  object-fit: cover;
  object-position: center 70%;
  z-index: 0;
  transition: filter 0.5s ease;
  will-change: transform;
}
.geo-footer.is-wireframe .geo-footer-bg {
  filter: url(#geo-wire) brightness(1.15) contrast(1.1);
}

/* legible wash + blend into the page above; keeps the dollhouse glowing in the middle */
.geo-footer-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(5,7,13,0) 30%, rgba(5,7,13,0.55) 100%),
    linear-gradient(180deg, rgba(5,7,13,0.95) 0%, rgba(5,7,13,0.25) 22%, rgba(5,7,13,0.25) 70%, rgba(5,7,13,0.9) 100%);
}

.geo-footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 48px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center the columns + bottom bar as one group */
}
/* Evenly-spaced titled columns (titles share one line, links aligned) */
.geo-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.95fr 0.9fr 1.2fr;
  gap: 40px;
  align-items: start;
}

.geo-eyebrow {
  display: block;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
}

/* LEFT · contact */
.geo-contact { grid-area: contact; align-self: start; }
.geo-contact-line {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin: 0 0 9px;
}
.geo-contact-line span { color: rgba(255,255,255,0.4); }
.geo-contact-line a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s; }
.geo-contact-line a:hover { color: #cbd2d9; }

/* CENTER · slim CTA + Matterport partner */
.geo-center { grid-area: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.geo-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 26px;
  border-radius: 999px;
  background: rgba(203,210,217,0.92);
  color: #101214;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 0 1px rgba(203,210,217,0.5), 0 10px 36px rgba(203,210,217,0.25);
  transition: gap 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}
.geo-cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #101214; color: #cbd2d9;
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}
.geo-cta:hover { gap: 18px; background: #cbd2d9; box-shadow: 0 0 0 1px #cbd2d9, 0 14px 48px rgba(203,210,217,0.42); }
.geo-cta:hover .geo-cta-arrow { transform: translateX(3px); }

/* Matterport partner — small, at the bottom of the CONTACT column */
.geo-partner { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-top: 24px; }
.geo-partner-label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.geo-partner-badges { display: flex; align-items: center; gap: 18px; }
.geo-partner-badges img { height: 54px; width: auto; opacity: 0.92; transition: opacity 0.2s; }
.geo-partner-badges img:hover { opacity: 1; }

/* Footer logos (MBB left, SONOXR right) */
.geo-foot-logo { display: inline-block; margin-bottom: 22px; }
.geo-foot-logo img { display: block; width: auto; }
.geo-foot-logo--mbb img { height: 54px; }
.geo-foot-logo--sxr img { height: 54px; opacity: 0.95; transition: opacity 0.2s; }
.geo-foot-logo--sxr:hover img { opacity: 1; }
/* COMPANION SITE descriptor under the SXR logo */
.geo-companion-tag {
  display: block;
  margin: 14px auto 0;
  max-width: 220px;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.6);
}
/* small MBB logo for the bottom bar */
.geo-foot-logo--sm { margin-bottom: 0; }
.geo-foot-logo--sm img { height: 30px; }

/* RIGHT · SONOXR logo + explore + follow */
.geo-links { grid-area: links; align-self: start; display: flex; flex-direction: column; align-items: flex-end; }
.geo-links-cols { display: flex; gap: 56px; justify-content: flex-end; }
.geo-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.geo-col a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 11px;
  transition: color 0.2s;
}
.geo-col a:hover { color: #cbd2d9; }

/* BOTTOM bar */
.geo-bottom {
  margin-top: 44px; /* even spacing from the columns; whole group is centered */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.geo-bottom-left { display: flex; gap: 22px; align-items: center; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.geo-bottom-left a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.geo-bottom-left a:hover { color: #fff; }
.geo-bottom-right { display: flex; gap: 18px; justify-content: flex-end; align-items: center; font-family: 'SXR Space Grotesk', sans-serif; font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.4); }
.geo-bottom-right .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #cbd2d9; box-shadow: 0 0 8px #cbd2d9; margin-left: 5px; vertical-align: middle; }

/* TOGGLE */
.geo-toggle { display: flex; align-items: center; gap: 13px; justify-content: center; }
.geo-toggle-label { font-family: 'SXR Space Grotesk', sans-serif; font-size: 0.68rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.38); transition: color 0.3s; }
.geo-footer:not(.is-wireframe) .geo-toggle-label--sat { color: #cbd2d9; }
.geo-footer.is-wireframe .geo-toggle-label--wire { color: #eef2f6; }
.geo-switch {
  position: relative;
  width: 54px; height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(5,8,16,0.65);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.geo-switch-knob {
  position: absolute; top: 50%;
  width: 18px; height: 18px; border-radius: 50%;
  transform: translateY(-50%);
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s;
}
.geo-footer:not(.is-wireframe) .geo-switch-knob { left: 32px; background: #cbd2d9; box-shadow: 0 0 10px rgba(203,210,217,0.7); }
.geo-footer.is-wireframe .geo-switch-knob { left: 4px; background: #eef2f6; box-shadow: 0 0 10px rgba(238,242,246,0.7); }

/* responsive */
@media (max-width: 880px) {
  .geo-footer-inner { padding: 56px 24px 22px; min-height: 0; }
  .geo-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .geo-bottom { grid-template-columns: 1fr; justify-items: center; gap: 16px; text-align: center; margin-top: 40px; }
  .geo-bottom-left, .geo-bottom-right { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .geo-cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ══════════ CONTACT PAGE — LET'S CONNECT hero + FAQ accordion ══════════ */
.contact-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.contact-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.contact-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,8,16,0.7) 0%, rgba(5,8,16,0.55) 45%, rgba(5,8,16,0.9) 100%);
}
.contact-hero-content { position: relative; z-index: 2; padding: 96px 24px 40px; }
.contact-hero-title {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 18px 0 14px;
}
.contact-hero-sub { color: rgba(255,255,255,0.78); max-width: 540px; margin: 0 auto; line-height: 1.7; font-size: 1.05rem; }

/* FAQ accordion (native <details>) */
.faq-accordion { max-width: 820px; margin: 44px auto 0; }
.faq-acc-item {
  border: 1px solid rgba(203,210,217,0.18);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.2s;
}
.faq-acc-item[open], .faq-acc-item:hover { border-color: rgba(203,210,217,0.4); }
.faq-acc-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-acc-item summary::-webkit-details-marker { display: none; }
.faq-acc-item summary::after { content: '+'; color: #cbd2d9; font-size: 1.4rem; line-height: 1; font-family: sans-serif; }
.faq-acc-item[open] summary::after { content: '\2212'; }
.faq-acc-body { padding: 0 22px 20px; }
.faq-acc-body p { color: rgba(255,255,255,0.7); margin: 0 0 8px; line-height: 1.6; }
.faq-acc-body p:last-child { margin-bottom: 0; }
.faq-acc-body a { color: #cbd2d9; text-decoration: none; }
.faq-acc-body a:hover { text-decoration: underline; }
.faq-acc-body strong { color: #eef2f6; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   DIGITAL TWIN — definition quote (home, between fork & showcase)
   ════════════════════════════════════════════════════════════ */
.dt-quote {
  max-width: 1040px;
  margin: 0 auto;
  padding: 116px 32px 96px;
  text-align: center;
}
.dt-quote-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #cbd2d9;
  margin-bottom: 34px;
}
.dt-quote-text {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.1vw, 2.55rem);
  line-height: 1.38;
  letter-spacing: 0.2px;
  color: #fff;
}
.dt-quote-text em {
  font-style: normal;
  color: #cbd2d9;
}
.dt-quote-cite {
  display: block;
  margin-top: 38px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.7);
}

/* ════════════════════════════════════════════════════════════
   WHAT WE DO — expanded showcase with TOUR / MEDIA / PLATFORM tabs
   ════════════════════════════════════════════════════════════ */
.wwd-showcase {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  margin: 0 40px 0;
  border-radius: 10px;
}
.wwd-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.wwd-bg.is-active { opacity: 1; }
.wwd-overlay {
  position: absolute;
  inset: 0;
  /* Darker at the bottom-left so the copy + tabs stay legible over any clip */
  background: linear-gradient(105deg, rgba(5, 8, 16, 0.88) 0%, rgba(5, 8, 16, 0.62) 45%, rgba(5, 8, 16, 0.32) 100%);
}
.wwd-inner {
  position: relative;
  z-index: 2;
  min-height: 725px;
  padding: 60px 56px 52px;
  display: flex;
  flex-direction: column;
}
.wwd-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #cbd2d9;
  margin-bottom: 28px;
}
/* Panels stacked so switching never changes the showcase height */
.wwd-panels {
  position: relative;
  flex: 1;
}
.wwd-panel {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 640px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  z-index: 1;
}
.wwd-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 2;
}
.wwd-title span { color: #cbd2d9; }
.wwd-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 18px;
}
.wwd-desc {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 560px;
  margin: 0 0 30px;
}
/* Segmented tab switcher, pinned bottom-left */
.wwd-tabs {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: rgba(8, 14, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.wwd-tab {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.wwd-tab:hover { color: #fff; }
.wwd-tab.is-active {
  color: #021008;
  background: #cbd2d9;
  font-weight: 700;
}

@media (max-width: 900px) {
  .dt-quote { padding: 84px 24px 70px; }
  .wwd-showcase { margin: 0 20px; }
  .wwd-inner { min-height: 650px; padding: 44px 28px 40px; }
}
@media (max-width: 600px) {
  /* Stop absolutely stacking the panels on mobile — the fixed-height stack
     overflowed and the copy/bullets overlapped the tab switcher. Let the active
     panel flow so the tabs sit BELOW it and stay tappable. */
  .wwd-inner { min-height: 0; }
  .wwd-panels { position: static; flex: none; margin-bottom: 22px; }
  .wwd-panel { position: relative; display: none; max-width: 100%; opacity: 1; transform: none; transition: none; }
  .wwd-panel.is-active { display: block; }
  .wwd-tabs { width: 100%; flex-direction: column; border-radius: 14px; margin-top: 0; }
  .wwd-tab { width: 100%; border-radius: 10px; }
}

/* ── HOSPITALITY AT SCALE — contained cinematic card (Senserie/Marriott) ── */
/* Container matches .page-section (1400 + 40px sides) so the card aligns with the portfolio cards above. */
.hospitality-cinematic { max-width: 1400px; margin: 40px auto; padding: 0 40px; }
.hospitality-card { position: relative; min-height: 600px; border-radius: 16px; overflow: hidden; display: flex; }
.hospitality-bg { position: absolute; inset: 0; background-size: cover; background-position: 20% center; background-repeat: no-repeat; }
/* Bottom + top heavy gradient: title (bottom) and chips (top) stay legible, image breathes in the middle. */
.hospitality-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0.6) 100%); }
.hospitality-content { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; gap: 24px; }
.hospitality-top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hospitality-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.h-chip { padding: 6px 14px; border: 1px solid rgba(238,242,246,0.4); border-radius: 20px; font-size: 0.7rem; font-family: 'SXR Space Grotesk', sans-serif; color: #eef2f6; letter-spacing: 0.06em; background: rgba(0,0,0,0.35); }
.hospitality-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hospitality-cin-title { font-family: 'SXR Space Grotesk', sans-serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; color: #fff; margin: 0 0 12px; line-height: 1.15; }
.hospitality-cin-desc { color: rgba(255,255,255,0.8); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.hospitality-bottom .btn-secondary { flex-shrink: 0; }
@media (max-width: 768px) {
  .hospitality-cinematic { padding: 0 20px; }
  .hospitality-card { min-height: 520px; }
  .hospitality-content { padding: 28px; }
  .hospitality-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ── Collection banner logos (white via filter) ── */
.collection-logo {
  filter: brightness(0) invert(1);
  max-height: 80px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
}

/* For logos whose source PNG keeps brand colors on transparent bg
   (white-fill or color detail that invert would flatten). */
.collection-logo-screen {
  mix-blend-mode: screen;
  max-height: 80px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
}

/* Nav CTA buttons (LOGIN / ORDER NOW) show on desktop only;
   on tablet/mobile the hamburger + mega menu carry them (prevents nav overflow). */
@media (max-width: 768px) {
  .nav-cta-btn { display: none; }
}

/* AVA banner subtitle under the Avalon logo */
.collection-logo-sub {
  color: #ffffff;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-top: 12px;
}

/* Context line under the Marriott/Senserie logos */
.collection-context {
  color: rgba(255,255,255,0.7);
  font-size: 0.72rem;
  letter-spacing: 1px;
  max-width: 420px;
  margin-top: 12px;
  line-height: 1.5;
}

/* CHOOSE YOUR TOUR cards: video is the main visual (poster frame at rest,
   plays on hover) — remove the static photo background. Scoped to that grid. */
#capture-panels .panel .panel-bg { display: none; }
#capture-panels .panel video { opacity: 1; }

/* CHOOSE YOUR MEDIA cards that feature a video as the main visual
   (poster at rest, plays on hover) instead of a static photo. */
.panel--video-main .panel-bg { display: none; }
.panel--video-main video { opacity: 1; }

/* Login error feedback — wrong access key shakes the input */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Login access-type split (choice screen + back link) */
.login-choice { text-align: center; }
.login-choice-label {
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  letter-spacing: 3px;
  margin-bottom: 24px;
  font-family: 'SXR Space Grotesk', sans-serif;
}
.login-choice-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.login-back-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  letter-spacing: 2px;
  cursor: pointer;
  margin-bottom: 20px;
  display: block;
}
.login-back-btn:hover { color: #eef2f6; }

/* WHY CHOOSE US section — 2x2 horizontal stat cards (demo-card format) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.why-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 1.75rem 1.9rem;
  transition: all 0.3s ease;
  cursor: default;
}
.why-card:hover {
  border-color: rgba(203,210,217,0.5);
  background: linear-gradient(135deg, rgba(203,210,217,0.22) 0%, rgba(203,210,217,0.06) 55%, rgba(203,210,217,0.02) 100%);
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 40px rgba(203,210,217,0.14);
}
.why-card--featured {
  border-color: rgba(203,210,217,0.6);
  background: linear-gradient(135deg, rgba(203,210,217,0.26) 0%, rgba(203,210,217,0.08) 55%, rgba(203,210,217,0.03) 100%);
  box-shadow: 0 0 55px rgba(203,210,217,0.22), inset 0 0 60px rgba(203,210,217,0.08);
}
.why-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid rgba(203,210,217,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.4s ease;
  position: relative;
}
.why-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #cbd2d9;
  opacity: 0;
  transition: all 0.4s ease;
}
.why-card:hover .why-circle,
.why-card--featured .why-circle {
  border-color: #cbd2d9;
  box-shadow: 0 0 22px rgba(203,210,217,0.35);
}
.why-card:hover .why-circle::before,
.why-card--featured .why-circle::before {
  opacity: 1;
  animation: spin 1.5s linear infinite;
}
.why-circle span {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: #cbd2d9;
}
.why-text {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}
.why-label {
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
  padding-right: 75px;
  text-transform: uppercase;
}
.why-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
}
.why-tag {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  font-family: 'SXR Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cbd2d9;
}
.why-card--featured .why-tag {
  background: rgba(203,210,217,0.12);
  border: 1px solid rgba(203,210,217,0.4);
  border-radius: 6px;
  padding: 4px 10px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* Normalized section title size (homepage section banners) */
.sec-h2 {
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  font-family: 'SXR Space Grotesk', sans-serif !important;
}

/* Villa widget relocated to its own LIVE DEMO section (centered, in-flow) */
.villa-dashboard--demo {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: 920px;
  height: clamp(440px, 64vh, 580px);
  margin: 0 auto;
  border: 1px solid rgba(238,242,246,0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Animated gradient "shimmer" on accent heading words (door3d-style) */
.shimmer,
.section-title span,
.ecosystem-title span,
.video-expand-title span,
.wwd-title span,
.tech-stack-title span,
.text-green {
  background-image: linear-gradient(110deg, #cbd2d9 0%, #eef2f6 26%, #f2fff9 50%, #eef2f6 74%, #cbd2d9 100%) !important;
  background-size: 200% auto !important;
  background-position: 0% center;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 7px rgba(203,210,217,0.45));
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .shimmer, .section-title span, .ecosystem-title span, .video-expand-title span, .wwd-title span, .tech-stack-title span, .text-green { animation: none; } }

/* Trust bar (above the footer CTA, sitewide) */
.trust-bar { background: #0a0a0a; border-top: 1px solid rgba(203,210,217,0.14); border-bottom: 1px solid rgba(203,210,217,0.14); padding: 1.5rem 2rem; }
.trust-bar-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 2.75rem; flex-wrap: wrap; }
.trust-badge { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'SXR Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.trust-badge .trust-icon { color: #cbd2d9; font-size: 0.62rem; }
@media (max-width: 768px) { .trust-bar-inner { gap: 1.1rem 1.6rem; } .trust-badge { font-size: 0.82rem; } }


/* ============================================================
   MBB NAV — Flexis-style header + dropdown mega (shared)
   ============================================================ */
/* Top bar */
    .mbb-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 16px 40px; transition: background .3s, padding .3s; }
    /* top scrim: keeps the metallic logo + MENU legible over bright video heroes (at-top only — the solid bg takes over on scroll/menu-open) */
    .mbb-nav::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 170%; background: linear-gradient(to bottom, rgba(5,8,16,0.78), rgba(5,8,16,0.32) 55%, transparent); pointer-events: none; z-index: -1; transition: opacity .3s; }
    .mbb-nav.scrolled::before, .mbb-nav.menu-open::before { opacity: 0; }
    .mbb-nav.scrolled { background: rgba(5,8,16,0.92); backdrop-filter: blur(10px); padding: 12px 40px; }
    .mbb-nav.menu-open { background: rgba(5,8,16,0.98); }
    .mbb-nav-inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; max-width: 1640px; margin: 0 auto; }
    .mbb-logo { justify-self: start; display: inline-flex; }
    .mbb-logo img { height: 56px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(0,0,0,0.45)); }
    .mbb-nav-right { justify-self: end; display: inline-flex; align-items: center; gap: 12px; }
    .mbb-getquote { padding: 0.6rem 1.5rem !important; font-size: 0.8rem !important; }
    /* LOGIN ghost pill next to GET QUOTE (2026-07-15 — moved out of the mega menu) */
    .mbb-login {
      display: inline-flex; align-items: center; padding: 0.6rem 1.3rem;
      border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
      color: #fff; text-decoration: none;
      font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      transition: border-color .25s ease, background .25s ease;
    }
    .mbb-login:hover { border-color: #cbd2d9; background: rgba(203,210,217,0.08); }

    /* SONO XR outbound pill (2026-07-26) — cyan, not MBB green, so it reads as
       "different property" rather than another MBB page. Desktop only; mobile
       reaches sonoxr.media through mega-menu item (06). */
    .mbb-sxr-link {
      display: inline-flex; align-items: center; gap: 6px; padding: 0.6rem 1.3rem;
      border: 1px solid rgba(238,242,246,0.35); border-radius: 999px;
      color: #eef2f6; text-decoration: none;
      font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      transition: border-color .25s ease, background .25s ease, color .25s ease;
    }
    .mbb-sxr-link i { font-style: normal; font-size: 0.9em; }
    .mbb-sxr-link:hover { border-color: #eef2f6; background: rgba(238,242,246,0.1); color: #fff; }
    @media (max-width: 980px) { .mbb-sxr-link { display: none; } }

    /* MENU / CLOSE toggle */
    .mbb-menu-toggle { justify-self: center; display: inline-flex; align-items: center; gap: 12px; background: none; border: none; cursor: pointer; color: #fff; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 30px; position: relative; }
    .mbb-toggle-label { transition: color .2s; }
    .mbb-menu-toggle:hover .mbb-toggle-label { color: #cbd2d9; }
    .mbb-toggle-lines { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; }
    .mbb-toggle-lines i { height: 2px; width: 24px; background: #cbd2d9; border-radius: 2px; transition: transform .3s; }
    .mbb-nav.menu-open .mbb-toggle-lines i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
    .mbb-nav.menu-open .mbb-toggle-lines i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

    /* Segmented "grid" on open: corner brackets + faint dividers around the center cell */
    .mbb-nav.menu-open .mbb-menu-toggle { box-shadow: -1px 0 0 rgba(255,255,255,0.12), 1px 0 0 rgba(255,255,255,0.12); }

    /* Backdrop — dims the still-visible page below the panel; click to close */
    .mbb-backdrop { position: fixed; inset: 0; z-index: 98; background: rgba(3,5,10,0.55); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
    .mbb-backdrop.open { opacity: 1; visibility: visible; }

    /* Dropdown panel — drops from the top; the page stays visible below it */
    /* 2026-08-02 (Michael): the panel must stay a DROPDOWN — capped at 86dvh so
       the homepage is always visible under it. Internal rhythm tightened to
       match (rows, banner) so it fits the cap without scrolling on a laptop. */
    .mbb-mega { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; background: rgba(8,11,20,0.98); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(203,210,217,0.35); padding: 88px 48px 24px; max-height: 86dvh; overflow-y: auto; transform: translateY(-101%); transition: transform .5s cubic-bezier(.5,.05,.2,1); }
    .mbb-mega.open { transform: translateY(0); }
    .mbb-mega-inner { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; }

    /* ── Mega menu v3 (2026-07-12): showcasy-style stacked links w/ circle
          arrows, socials strip, and a standalone SONO XR banner band ── */
    .mbb-mega.open .mbb-mega-inner > * { animation: mbbRise .55s cubic-bezier(.22,.61,.36,1) both; }
    .mbb-mega.open .mbb-mega-inner > *:nth-child(2) { animation-delay: .08s; }
    .mbb-mega.open .mbb-mega-inner > *:nth-child(3) { animation-delay: .16s; }
    @keyframes mbbRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

    .mm-links { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.1); }
    .mm-link {
      display: flex; align-items: center; gap: 18px;
      padding: clamp(6px, 1.1vh, 13px) 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      text-decoration: none;
    }
    .mm-word {
      font-family: var(--font-display); font-weight: 700; color: #fff;
      font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.05; letter-spacing: 0.01em;
      transition: color .25s, transform .3s;
    }
    .mm-num { font-family: var(--font-mono); font-size: 0.78rem; color: rgba(255,255,255,0.35); transform: translateY(8px); }
    .mm-arr {
      margin-left: auto; flex-shrink: 0;
      width: clamp(42px, 4vw, 54px); height: clamp(42px, 4vw, 54px);
      border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1.15rem;
      transition: background .25s, border-color .25s, color .25s, transform .3s;
    }
    .mm-link:hover .mm-word { color: #cbd2d9; transform: translateX(8px); }
    .mm-link:hover .mm-arr { background: #cbd2d9; border-color: #cbd2d9; color: #101214; transform: rotate(-45deg); }

    .mm-foot { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding-top: 18px; }
    .mm-follow { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
    .mm-socials { display: flex; gap: 22px; }
    .mm-socials a { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-decoration: none; transition: color .2s; }
    .mm-socials a i { font-style: normal; color: #cbd2d9; margin-left: 4px; }
    .mm-socials a:hover { color: #cbd2d9; }
    .mm-badge { width: 74px; height: auto; margin-left: auto; opacity: 0.8; }

    .mm-sxr {
      /* 2026-08-02: the art is 1600×414 (3.86:1). It used to be stretched full
         width and object-fit:cover'd to a fixed height, which cropped ~60% of
         the lockup away once the panel got shorter. Now the card keeps the
         art's own ratio and centres — the whole logo shows, at any height. */
      display: block; margin: 16px auto 0; max-width: 520px;
      border-radius: 16px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12); transition: border-color .3s;
    }
    .mm-sxr img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
    .mm-sxr:hover { border-color: rgba(203,210,217,0.55); }
    .mm-sxr:hover img { transform: scale(1.02); }

    @media (max-width: 820px) {
      .mbb-nav { padding: 12px 20px; }
      .mbb-mega { padding: 76px 22px 18px; }
      .mm-word { font-size: clamp(1.5rem, 6.4vw, 2rem); }
      .mm-arr { width: 36px; height: 36px; font-size: 0.95rem; }
      .mm-foot { gap: 16px; }
      .mm-badge { width: 60px; }
      .mm-sxr { max-width: 300px; }
      /* header: keep logo / MENU / GET QUOTE on one tidy row (no wrapping blob) */
      .mbb-logo img { height: 42px; }
      .mbb-menu-toggle { padding: 8px 8px; gap: 8px; letter-spacing: 0.12em; }
      .mbb-getquote { white-space: nowrap; padding: 0.5rem 0.9rem !important; font-size: 0.72rem !important; }
      .mbb-login { padding: 0.5rem 0.9rem; font-size: 0.72rem; }
    }

/* ============================================================
   SMART QUOTE WIZARD (shared: contact.html + services.html)
   ============================================================ */
.quote-wizard-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  max-width: 1160px;
  margin: 40px auto 0;
  align-items: start;
}
.qw-main { margin: 0 !important; max-width: none !important; }

/* progress rail */
.qw-progress { display: flex; gap: 4px; margin-bottom: 28px; }
.qw-progress-item {
  flex: 1; text-align: center; padding: 10px 4px 12px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35); border-bottom: 2px solid rgba(255,255,255,0.1);
  transition: color .25s, border-color .25s;
}
.qw-progress-item .qw-pnum { color: rgba(203,210,217,0.5); margin-right: 6px; }
.qw-progress-item.active { color: #fff; border-bottom-color: #cbd2d9; }
.qw-progress-item.done { color: rgba(203,210,217,0.75); border-bottom-color: rgba(203,210,217,0.4); }

/* steps */
.qw-step { display: none; border: none; margin: 0; padding: 0; }
.qw-step.active { display: block; }
.qw-step-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 4px; }
.qw-step-sub { font-size: 0.92rem; color: rgba(255,255,255,0.55); margin: 0 0 22px; }

/* capture cards (multi-select) */
.qw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qw-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  background: rgba(255,255,255,0.02); cursor: pointer; transition: border-color .2s, background .2s;
}
.qw-card:hover { border-color: rgba(203,210,217,0.45); }
.qw-card.checked { border-color: #cbd2d9; background: rgba(203,210,217,0.06); }
.qw-card input { position: absolute; opacity: 0; pointer-events: none; }
.qw-card-tag { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.qw-card-desc { font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.6); }
.qw-card-meta { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: #cbd2d9; margin-top: auto; }
.qw-card .qw-check {
  position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #101214; background: transparent; transition: all .2s;
}
.qw-card.checked .qw-check { background: #cbd2d9; border-color: #cbd2d9; }
.qw-card.checked .qw-check::after { content: "✓"; font-weight: 900; }

/* add-on / upgrade chips */
.qw-chip-group-label {
  display: block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; color: #cbd2d9; margin: 20px 0 10px;
}
.qw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.qw-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  font-size: 0.85rem; color: rgba(255,255,255,0.75); cursor: pointer;
  background: rgba(255,255,255,0.02); transition: all .2s; user-select: none;
}
.qw-chip:hover { border-color: rgba(203,210,217,0.5); }
.qw-chip.checked { border-color: #cbd2d9; background: rgba(203,210,217,0.1); color: #fff; }
.qw-chip input { position: absolute; opacity: 0; pointer-events: none; }
.qw-chip .qw-plus { color: #cbd2d9; font-weight: 700; }

/* live estimate */
.qw-estimate {
  margin-top: 22px; padding: 16px 20px; border: 1px solid rgba(203,210,217,0.4);
  border-radius: 10px; background: rgba(203,210,217,0.05);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.qw-estimate-label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.65); }
.qw-estimate-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 900; color: #cbd2d9; }
.qw-estimate-note { flex-basis: 100%; font-size: 0.75rem; color: rgba(255,255,255,0.45); }

/* review summary */
.qw-review { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 16px 20px; margin-bottom: 22px; background: rgba(255,255,255,0.02); }
.qw-review-row { display: flex; gap: 12px; padding: 6px 0; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.qw-review-row:last-child { border-bottom: none; }
.qw-review-row b { flex: 0 0 110px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); text-transform: uppercase; padding-top: 2px; }
.qw-review-row span { color: rgba(255,255,255,0.8); }
.qw-review-row .qw-review-price { color: #cbd2d9; font-weight: 700; }

/* wizard nav */
.qw-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 28px; }
.qw-back {
  background: none; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7);
  padding: 0.7rem 1.6rem; border-radius: var(--radius-pill, 999px); cursor: pointer;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; transition: all .2s;
}
.qw-back:hover { border-color: #fff; color: #fff; }
.qw-error { display: none; margin-top: 14px; font-size: 0.85rem; color: #ff6b6b; }
.qw-error.show { display: block; }

/* sidebar */
.qw-side {
  position: sticky; top: 120px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: 24px; background: rgba(255,255,255,0.02);
}
.qw-side-title { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; color: #cbd2d9; margin: 0 0 14px; }
.qw-side-list { list-style: none; margin: 0; padding: 0; }
.qw-side-list li { display: flex; gap: 10px; padding: 7px 0; font-size: 0.85rem; line-height: 1.45; color: rgba(255,255,255,0.7); }
.qw-side-list li::before { content: "✓"; color: #cbd2d9; font-weight: 900; flex: 0 0 auto; }
.qw-side-badges { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.qw-side-badges img { height: 44px; width: auto; }

@media (max-width: 900px) {
  .quote-wizard-wrap { grid-template-columns: 1fr; }
  .qw-side { position: static; order: 2; }
  .qw-cards { grid-template-columns: 1fr; }
  .qw-progress-item { font-size: 9px; letter-spacing: 0.06em; }
}

/* ============================================================
   3D TWIN — live demo stage (shared: index.html #twin-home +
   platform.html #twin; moved from platform.css 2026-07-15 so
   both pages use ONE component definition)
   ============================================================ */
.twin-stage {
  position: relative; width: 100%; max-width: 1200px; margin: 30px auto 0;
  aspect-ratio: 16 / 8; min-height: 420px;
  border: 1px solid rgba(203,210,217,0.18); border-radius: 16px;
  overflow: hidden; background: #04070a;
}
.twin-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) { .twin-stage { min-height: 320px; aspect-ratio: 4 / 3; } }

#twin-home { text-align: center; }
#twin-home .section-desc { margin-left: auto; margin-right: auto; }
#twin-home .twin-home-cta { margin-top: 32px; }
/* flat accent — the demo earns its glow; the headline doesn't (spec) */
#twin-home .section-title span {
  background: none !important;
  -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: #cbd2d9 !important; color: #cbd2d9 !important;
  filter: none !important; animation: none !important;
}

/* ══ SONO — avatar card on home #about + slim SONO XR strip in the mega menu
      (2026-07-15, v169). The card mirrors the demo's Spatial Architect tour
      panel: dark glass, cyan ring avatar, cyan quip bars. ══ */
.sono-card {
  max-width: 720px;
  margin: 40px auto 10px;
  padding: 34px 36px;
  text-align: left;
  background: rgba(7, 11, 20, 0.62);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(238,242,246,0.35);
  border-radius: 18px;
  box-shadow: 0 0 46px rgba(238,242,246,0.14), 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: sonoGlow 6s ease-in-out infinite alternate;
}
.sono-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sono-card-avatar {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--cyan, #eef2f6);
  box-shadow: 0 0 18px rgba(238,242,246,0.35);
}
.sono-card-id { display: flex; flex-direction: column; gap: 2px; }
.sono-card-name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  letter-spacing: 0.16em; color: #fff; line-height: 1;
}
.sono-card-role { font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); }
.sono-card-lede { font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.88); margin: 0 0 18px; }
.sono-card-quips { list-style: none; padding: 0; margin: 0 0 24px; }
.sono-card-quips li {
  border-left: 3px solid var(--cyan, #eef2f6);
  padding: 4px 0 4px 16px;
  margin-bottom: 12px;
  font-size: 0.97rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75);
}
.sono-card-quips li:last-child { margin-bottom: 0; }
.sono-card-actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .sono-card { padding: 26px 22px; }
  .sono-card-actions .btn-primary, .sono-card-actions .btn-secondary { width: 100%; text-align: center; justify-content: center; }
}

/* slim SONO XR context strip in the mega menu (replaces the old full banner —
   gives SONO XR (03) its context without the bulk) */
.mm-sxr-strip {
  display: flex; align-items: center; gap: 20px;
  margin-top: 22px; padding: 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.mm-sxr-strip:hover { border-color: rgba(203,210,217,0.55); background: rgba(203,210,217,0.04); }
.mm-sxr-strip img { height: 40px; width: auto; display: block; flex-shrink: 0; }
.mm-sxr-tag {
  flex: 1; font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.65);
}
.mm-sxr-tag b { color: #fff; font-weight: 600; }
.mm-sxr-go {
  flex-shrink: 0; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; color: #cbd2d9; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 820px) {
  .mm-sxr-strip { gap: 14px; padding: 13px 16px; }
  .mm-sxr-strip img { height: 30px; }
  .mm-sxr-go { display: none; }
}

/* ══ v170 (2026-07-15): the full SXR cover lockup (assets/sxr-cover.jpg —
      Michael's "cover for all sites" master) becomes the SONO XR brand image
      on the home section, mega-menu strip and footer. ══ */
.sxr-section-logo {
  display: block; width: 100%; max-width: 100%; height: clamp(170px, 26vh, 300px);
  object-fit: cover;
  margin: 0 auto 34px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
@media (max-width: 820px) { .sxr-section-logo { height: clamp(110px, 17vh, 170px); } }
.mm-sxr-strip img { height: 46px; }

@media (max-width: 820px) { .mm-sxr-strip img { height: 44px; } }

/* v171 (2026-07-15): footer POWERED BY column — the SXR cover lockup goes big
   (tagline is baked into the image; the duplicate text line + EXPLORE's
   SONO XR link are gone). Overrides the old 54px mark sizing. */
.geo-col--companion .geo-foot-logo--sxr img {
  height: auto; width: min(280px, 100%);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  /* v204 (2026-08-10): the lockup sat 23px left of centre on a phone. The
     column IS centred — but the wrapping <a> is a flex item, and flex items
     blockify `inline-block`, so the anchor stretched the full column width
     and the 280px image sat at its left edge. Centring the image inside the
     anchor fixes it whatever width the anchor ends up with. */
  margin-inline: auto;
}


/* v175: Sono's voice button — the single card action (Michael: one click to
   hear Sono welcome visitors; the avatar is the upsell demo) */
.sono-voice-btn {
  display: inline-flex; align-items: center;
  padding: 15px 32px; border-radius: 999px; cursor: pointer;
  background: rgba(238,242,246,0.08); border: 1px solid rgba(238,242,246,0.5);
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.sono-voice-btn:hover { background: rgba(238,242,246,0.16); border-color: #eef2f6; }
.sono-voice-btn.playing { border-color: #cbd2d9; color: #cbd2d9; }
.sono-voice-btn[disabled] { opacity: 0.55; cursor: default; }


/* ── v176: the SONO XR section becomes a live scene (Michael: glass + motion —
      it's the marquee feature). Same matterport-bg footage as the flagship
      demo splash; the card above is real frosted glass now. ── */
#about.about-plain { position: relative; overflow: hidden; }
#about .about-inner { position: relative; z-index: 2; }
.sono-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sono-scene video { width: 100%; height: 100%; object-fit: cover; }
.sono-scene-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(5, 8, 16, 0.42) 0%, rgba(5, 8, 16, 0.78) 100%),
    linear-gradient(to bottom, #0a0a0a 0%, rgba(5, 8, 16, 0.25) 18%, rgba(5, 8, 16, 0.25) 82%, #0a0a0a 100%);
}
@keyframes sonoGlow {
  from { box-shadow: 0 0 34px rgba(238,242,246,0.10), 0 24px 70px rgba(0, 0, 0, 0.55); }
  to   { box-shadow: 0 0 60px rgba(238,242,246,0.26), 0 24px 70px rgba(0, 0, 0, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .sono-scene video { display: none; }
  .sono-card { animation: none; }
}


/* v177 (2026-07-16, Charlene pivot Phase A): the one-sentence relationship —
   MBB = production company, SONO XR = the product. Same line on home,
   platform and capture pages. */
.sxr-positioning, .pf-positioning {
  max-width: 760px; margin: 22px auto 34px; text-align: center;
  font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, 0.66);
}
.sxr-positioning b, .pf-positioning b { color: #fff; font-weight: 600; }
.pf-positioning { margin: 26px auto 0; }


/* ══ INDUSTRY MOTION KIT (v180, 2026-07-16) — appear effects, hero entrance,
      bg drift, capability ticker, 3D depth. JS: js/industry-motion.js.
      Everything transform/opacity only; reduced-motion turns it all off. ══ */
.im-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--imd, 0s);
  will-change: opacity, transform;
}
.im-reveal.im-in { opacity: 1; transform: none; }

/* hero entrance choreography (CSS-only, runs on load) */
.cre-hero-inner > * { opacity: 0; animation: imRise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.cre-hero-inner > *:nth-child(1) { animation-delay: 0.12s; }
.cre-hero-inner > *:nth-child(2) { animation-delay: 0.28s; }
.cre-hero-inner > *:nth-child(3) { animation-delay: 0.46s; }
.cre-hero-inner > *:nth-child(4) { animation-delay: 0.62s; }
@keyframes imRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* hero background: slow cinematic drift */
.cre-hero-bg video { animation: imDrift 26s ease-in-out infinite alternate; }
@keyframes imDrift { from { transform: scale(1); } to { transform: scale(1.07); } }

/* capability ticker — the industry's spaces, on an endless reel */
.im-ticker {
  overflow: hidden; padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
}
.im-ticker-track {
  display: flex; align-items: center; gap: 38px; width: max-content;
  animation: imTicker 32s linear infinite;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.im-ticker-track i { font-style: normal; color: #cbd2d9; font-size: 0.6rem; }
.im-ticker:hover .im-ticker-track { animation-play-state: paused; }
@keyframes imTicker { to { transform: translateX(-50%); } }

/* 3D depth panels (JS drives the angles) */
.im-tilt { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; }
.im-tilt:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 46px rgba(203,210,217,0.1); }

@media (prefers-reduced-motion: reduce) {
  .im-reveal { opacity: 1; transform: none; transition: none; }
  .cre-hero-inner > * { opacity: 1; animation: none; }
  .cre-hero-bg video { animation: none; }
  .im-ticker-track { animation: none; }
}


/* ── Motion Kit v2 (v181): STATEMENT + STAGE — the Novaverse-pattern bottom
      half for industry pages. Statement reuses the .sfw scroll-fill words;
      the stage is a full-bleed tabbed media theater. ── */
.im-statement { padding: clamp(90px, 16vh, 170px) 24px; max-width: 1140px; margin: 0 auto; text-align: center; }
.im-statement p {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.4vw, 3.3rem); line-height: 1.16; letter-spacing: 0.01em; margin: 0;
}

.im-stage { position: relative; height: min(80vh, 780px); overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.im-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.im-scene.on { opacity: 1; pointer-events: auto; }
.im-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im-stage-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(5,8,16,0.92) 0%, rgba(5,8,16,0.35) 45%, rgba(5,8,16,0.3) 100%); }
.im-scene-copy { position: absolute; z-index: 2; left: clamp(24px, 6vw, 84px); bottom: clamp(110px, 18vh, 160px); max-width: 580px; }
.im-scene-copy .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.2em; color: #cbd2d9; margin-bottom: 10px; }
.im-scene-copy h3 { font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.1; margin: 0 0 10px; text-transform: uppercase; }
.im-scene-copy p { color: rgba(255,255,255,0.75); font-size: 1rem; line-height: 1.65; margin: 0; }
.im-stage-tabs { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px; border-radius: 999px;
  background: rgba(5,8,16,0.72); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: calc(100vw - 32px); }
.im-stage-tab { border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 11px 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); transition: background 0.25s, color 0.25s; white-space: nowrap; }
.im-stage-tab:hover { color: #fff; }
.im-stage-tab.on { background: #cbd2d9; color: #101214; }
@media (max-width: 700px) {
  .im-scene-copy { bottom: 130px; right: 24px; }
  .im-stage-tab { padding: 10px 14px; font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .im-scene { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ECOSYSTEM — the three core functions on home (2026-07-17).
   v2 SPOTLIGHT ACCORDION (same day, the Novaverse pattern): one .eco-on card
   expands wide and reveals desc + stat + arrow; siblings collapse to
   title-only teasers. Auto-cycles ~6s (inline script on index), hover steals
   the spotlight, whole card stays a link. Solutions=green · Capture=white ·
   SONO XR=cyan. Mobile + reduced-motion: all cards expanded, stacked.
   ══════════════════════════════════════════════════════════════════════════ */
.eco-section { max-width: 1400px; margin: 0 auto; padding: 90px 5% 60px; }
.eco-head { margin-bottom: 46px; }
.eco-grid { display: flex; gap: 24px; }
.eco-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  flex: 1 1 0; min-width: 0; min-height: 520px;
  border: 1px solid var(--glass-border); border-radius: 16px;
  overflow: hidden; text-decoration: none; background: #070b14;
  transition: flex .7s cubic-bezier(.22,.61,.36,1), border-color .5s ease, box-shadow .5s ease;
}
.eco-card.eco-on { flex: 2.4 1 0; border-color: var(--glass-border-hover); }
.eco-card.eco-on:hover { border-color: var(--neon-green); box-shadow: 0 10px 30px rgba(203,210,217,0.1); }
.eco-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; background: #cbd2d9; opacity: .35; transition: opacity .5s ease; }
.eco-card.eco-on::before { opacity: 1; }
.eco-media {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .34; transition: transform 5s ease, opacity .7s ease;
}
.eco-card.eco-on .eco-media { opacity: .62; transform: scale(1.04); }
.eco-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(5,8,16,0.95) 16%, rgba(5,8,16,0.4) 54%, rgba(5,8,16,0.12) 100%);
}
.eco-body, .eco-foot { position: relative; z-index: 2; }
.eco-body { padding: 0 28px 26px; transition: padding .55s ease; }
.eco-card.eco-on .eco-body { padding-bottom: 4px; }
.eco-title {
  font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 1.55rem;
  letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,0.82);
  margin: 0; line-height: 1.05; transition: font-size .55s ease, color .55s ease, margin .55s ease;
}
.eco-card.eco-on .eco-title { font-size: 2.3rem; color: #fff; margin: 0 0 10px; }
.eco-desc {
  font-size: .93rem; line-height: 1.65; color: rgba(255,255,255,0.72);
  margin: 0; max-width: 42ch; max-height: 0; opacity: 0; overflow: hidden;
  transform: translateY(10px);
  transition: max-height .55s ease, opacity .45s ease, transform .55s ease;
}
.eco-card.eco-on .eco-desc { max-height: 130px; opacity: 1; transform: none; transition-delay: .12s; }
.eco-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 28px; padding: 0; max-height: 0; opacity: 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0);
  transition: max-height .55s ease, opacity .45s ease, padding .55s ease, margin .55s ease, border-color .5s ease;
}
.eco-card.eco-on .eco-foot {
  margin: 18px 28px 0; padding: 16px 0 24px; max-height: 140px; opacity: 1;
  overflow: visible; /* hidden clips the arrow pill on its hover nudge */
  border-top-color: rgba(255,255,255,0.16); transition-delay: .12s;
}
.eco-stat {
  font-family: 'SXR Space Grotesk', sans-serif; font-weight: 600; font-size: .85rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap;
}
.eco-stat strong { color: #fff; font-weight: 700; margin-right: 10px; }
.eco-arrow {
  width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(255,255,255,0.32); border-radius: 999px;
  display: grid; place-items: center; color: #fff; font-size: 1rem;
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}
.eco-card.eco-on:hover .eco-arrow { transform: translateX(3px); background: #cbd2d9; border-color: #cbd2d9; color: #0a0a0a; }
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .eco-grid { flex-direction: column; }
  .eco-card { min-height: 400px; }
  .eco-card, .eco-card.eco-on { flex: none; }
  .eco-card::before { opacity: 1; }
  .eco-media { opacity: .5; }
  .eco-body { padding-bottom: 4px !important; }
  .eco-title, .eco-card.eco-on .eco-title { font-size: 2.1rem; color: #fff; margin: 0 0 10px; }
  .eco-desc { max-height: none; opacity: 1; transform: none; }
  .eco-foot { margin: 18px 28px 0; padding: 16px 0 24px; max-height: none; opacity: 1; border-top-color: rgba(255,255,255,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-card, .eco-media, .eco-arrow, .eco-title, .eco-desc, .eco-foot, .eco-body { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE STACK — technologies grid (capture-services #stack, 2026-07-17).
   Bad-Decisions pattern on MBB law: category micro-labels + glass tiles,
   monochrome self-hosted marks (assets/stack/), wordmark tiles for brands
   without marks. Hardware-led ordering is deliberate; AI-ASSISTED last.
   ══════════════════════════════════════════════════════════════════════════ */
.cs-section.stack-section { padding-top: 110px; padding-bottom: 110px; }
.stack-wrap { max-width: 1240px; margin: 10px auto 0; padding: 0 24px; }
.stack-cat {
  font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,0.45);
  margin: 40px 0 14px;
}
/* 5 per row always; a partial last row centers (no stranded lone icons) */
.stack-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.stack-tile {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 13px; min-height: 132px; padding: 22px 14px;
  flex: 0 0 calc((100% - 56px) / 5); max-width: calc((100% - 56px) / 5);
  background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border);
  border-radius: 14px; text-align: center;
  transition: border-color .35s ease, transform .35s ease, background .35s ease;
}
.stack-tile:hover { border-color: var(--glass-border-hover); transform: translateY(-3px); background: rgba(255,255,255,0.045); }
.stack-tile img { width: 38px; height: 38px; object-fit: contain; opacity: .92; }
.stack-word {
  font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 1.3rem;
  letter-spacing: .05em; text-transform: uppercase; color: #dfe9f5; line-height: 1.12;
  min-height: 38px; display: flex; align-items: center; text-align: center;
}
.stack-name { font-size: .84rem; color: rgba(255,255,255,0.62); line-height: 1.4; }
.stack-chip {
  position: absolute; top: 10px; right: 10px;
  font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: #eef2f6;
  border: 1px solid rgba(238,242,246,0.4); border-radius: 999px; padding: 2px 8px;
}
@media (max-width: 900px) { .stack-tile { flex-basis: calc((100% - 28px) / 3); max-width: calc((100% - 28px) / 3); } }
@media (max-width: 560px) { .stack-tile { flex-basis: calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); } }

/* ══════════════════════════════════════════════════════════════════════════
   HERO-BANNER w/ PILLS (.hb-*) — the Novaverse hybrid (2026-07-19). ONE
   section: NOVA-style pill row on top switches a full-bleed banner below
   (our wwd banner layout). Reused on home (3 core functions) and
   capture-services (3 capture methods). Data-driven by [data-fn].
   ══════════════════════════════════════════════════════════════════════════ */
.hb-section { max-width: 1400px; margin: 0 auto; padding: 90px 5% 70px; }
.hb-head { margin-bottom: 30px; }
.hb-sub { color: rgba(255,255,255,0.55); font-weight: 300; font-size: 1.05rem; margin: 10px 0 0; }
.hb-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.hb-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.hb-pill {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; color: rgba(255,255,255,0.7);
  font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 26px;
  transition: background .3s, border-color .3s, color .3s;
}
.hb-pill:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.hb-pill .hb-pill-num { font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.hb-pill.on { background: #cbd2d9; border-color: #cbd2d9; color: #0a0a0a; }
.hb-pill.on .hb-pill-num { color: rgba(5,8,16,0.55); }
.hb-banner {
  position: relative; min-height: 560px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: flex-end;
}
.hb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .7s ease, transform 8s ease; }
.hb-bg.on { opacity: 1; transform: scale(1.05); }
.hb-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(5,8,16,0.9) 0%, rgba(5,8,16,0.55) 45%, rgba(5,8,16,0.1) 100%); }
.hb-panels { position: relative; z-index: 2; padding: clamp(28px, 5vw, 60px); width: 100%; }
.hb-panel { display: none; max-width: 620px; }
.hb-panel.on { display: block; animation: hbFade .6s ease; }
@keyframes hbFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hb-eyebrow { display: block; font-family: var(--font-tech, 'SXR Space Grotesk', sans-serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #eef2f6; margin-bottom: 12px; }
.hb-title { font-family: 'SXR Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin: 0 0 8px; line-height: 1; }
.hb-hook { font-family: 'SXR Space Grotesk', sans-serif; font-weight: 600; font-size: 1.25rem; color: #cbd2d9; margin: 0 0 12px; }
.hb-desc { color: rgba(255,255,255,0.8); font-size: 1rem; line-height: 1.6; margin: 0 0 18px; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.hb-chip { font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 6px 14px; }
@media (max-width: 1024px) { .hb-banner { min-height: 480px; } }
@media (prefers-reduced-motion: reduce) { .hb-bg, .hb-panel.on { transition: none; animation: none; } }

/* hb-detail — synced dropdown below the pill banner (capture-services): the
   active method's service-detail shows below, like the LiDAR pattern. */
.hb-detail-wrap { margin-top: 24px; }
.hb-detail { display: none; }
.hb-detail.on { display: block; animation: hbFade .5s ease; }
.hb-explore { margin-top: 4px; }

/* COMING SOON treatment for capture methods not yet in service (PortalCam) */
.hb-chip--soon { border-color: rgba(238,242,246,0.55); color: #eef2f6; }
.hb-pill-soon { font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.12em; color: #eef2f6; border: 1px solid rgba(238,242,246,0.5); border-radius: 999px; padding: 1px 7px; margin-left: 8px; }
.hb-pill.on .hb-pill-soon { color: #0a0a0a; border-color: rgba(5,8,16,0.4); }

/* video backgrounds for the capture-services hb-banner (2026-07-21) */
.hb-bg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   ORPHAN-LINE CONTROL (2026-07-21) — headings balance into even lines, body
   text avoids lone last-word lines. Kills single-word orphan lines sitewide.
   ══════════════════════════════════════════════════════════════════════════ */
.cre-h1, .cre-h2, .hb-title, .section-title, .pipeline-headline,
.im-scene-copy h3, .im-statement, .wwd-title, h1.pt-h1, .dd-title,
.cs-bridge-content h3, .pp-title { text-wrap: balance; }
.cre-sub, .cre-lead, .hb-sub, .services-lede, .im-scene-copy p,
.cre-sol-body p, .cre-flag-list li, .hb-desc, .pt-sub { text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════════════════════
   INDUSTRY SWITCHER (2026-07-21) — on every industry page: jump between
   industries + back to Solutions, so visitors aren't trapped on one page.
   ══════════════════════════════════════════════════════════════════════════ */
.ind-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1240px; margin: 0 auto; padding: 30px 24px 6px; }
.ind-pill { font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); text-decoration: none; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 11px 22px; transition: background .25s, border-color .25s, color .25s; white-space: nowrap; }
.ind-pill:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.ind-pill.on { background: #cbd2d9; border-color: #cbd2d9; color: #0a0a0a; }
.ind-pill--all { color: #eef2f6; border-color: rgba(238,242,246,0.4); }
.ind-pill--all:hover { border-color: #eef2f6; color: #eef2f6; }

/* switcher visibility — a clear label above the industry pills */
.ind-switch::before {
  content: "▶ EXPLORE SOLUTIONS BY INDUSTRY"; width: 100%; text-align: center;
  font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.42);
  margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   IMC — INDUSTRY DEMO CAROUSEL (Motion Kit v3, 2026-07-20)
   PropVR-style center-mode carousel for THE SOLUTION section on the five
   industry pages: one big demo card center-stage, neighbors peeking at the
   edges, circular prev/next arrows, dot pagination (active = green pill).
   Scroll-snap native track → touch/trackpad swipe free; JS (industry-motion
   §7) adds arrows/dots/center-state and runs even under reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */
.imc-wrap { padding: 6rem 0; }
.imc-wrap .imc-head { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }
.imc { position: relative; }
.imc-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px max(24px, calc((100vw - min(1160px, 86vw)) / 2)) 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.imc-track::-webkit-scrollbar { display: none; }
.imc-card { position: relative; flex: 0 0 min(1160px, 86vw); height: clamp(420px, 62vh, 640px);
  border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09);
  scroll-snap-align: center; background: #101214; transition: opacity 0.45s ease; }
.imc-card:not(.imc-on) { opacity: 0.4; }
.imc-card > img, .imc-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imc-card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,8,16,0) 35%, rgba(5,8,16,0.55) 70%, rgba(5,8,16,0.93) 100%); }
.imc-copy { position: absolute; z-index: 2; left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 42px); }
.imc-copy .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.18em; color: #cbd2d9; margin-bottom: 8px; text-transform: uppercase; }
.imc-copy h3 { font-family: var(--font-display); font-weight: 900; color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.02; margin: 0 0 10px; }
.imc-copy p { color: rgba(255,255,255,0.78); font-size: clamp(0.95rem, 1.3vw, 1.1rem); line-height: 1.6; margin: 0; max-width: 56ch; }
.imc-arr { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 54px; height: 54px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(5,8,16,0.55); color: #fff;
  font-size: 1.15rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: border-color 0.25s ease, color 0.25s ease; }
.imc-arr:hover { border-color: #cbd2d9; color: #cbd2d9; }
.imc-arr--prev { left: clamp(10px, 2.5vw, 40px); }
.imc-arr--next { right: clamp(10px, 2.5vw, 40px); }
.imc-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.imc-dot { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255,255,255,0.25); cursor: pointer; transition: width 0.3s ease, background 0.3s ease; }
.imc-dot.on { width: 28px; background: #cbd2d9; }
@media (max-width: 860px) {
  .imc-arr { display: none; }
  .imc-track { gap: 14px; }
  .imc-card { flex-basis: 88vw; height: min(68vh, 540px); }
  .imc-card:not(.imc-on) { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .imc-card { opacity: 1 !important; transition: none; }
}

/* ── im-stage SHARE scene — THE SONO XR brand moment (2026-07-20) ──
   Scene 03 on every industry page is the platform pitch: real product
   still (sxr-showcase-live.jpg), bare SXR mark, family one-liner, link. */
.im-scene > img.im-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im-scene-copy .im-sxr-mark { display: block; height: 34px; width: auto; margin-bottom: 14px; }
.im-scene-copy .im-family { margin-top: 12px; font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.55; max-width: 52ch; }
.im-scene-copy .im-family b { color: rgba(255,255,255,0.8); font-weight: 600; }
.im-sxr-link { display: inline-block; margin-top: 14px; font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.82rem; color: #eef2f6; text-decoration: none; }
.im-sxr-link:hover { color: #fff; }

/* ── hb pill rows (2026-07-22): explicit 4+4 rows on the home ecosystem —
      industries top, functions bottom. Rows still wrap internally on
      narrow screens. (.hb-pills--rows modifier; plain .hb-pills unchanged
      for capture-services) ── */
.hb-pills--rows { flex-direction: column; align-items: center; }
.hb-pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ── contact vCard QR card (2026-07-22): scan → phone/email/site land in
      the visitor's contacts. Replaces the Matterport badge in the quote
      wizard sidebar. ── */
.qw-side-qr { margin-top: 20px; background: #fff; border-radius: 14px; padding: 12px 12px 9px; max-width: 210px; text-align: center; }
.qw-side-qr img { width: 100%; display: block; border-radius: 6px; }
.qw-side-qr span { display: block; font-family: 'SXR Space Grotesk', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; color: #0a0a0a; padding-top: 8px; }