/* 3D scroll story (service pages with 'experience' => '3d') */
/* body has overflow-x:hidden site-wide, which turns it into a scroll container and breaks position:sticky; clip looks the same without that side effect */
body:has(#x3d) { overflow-x: clip; overflow-y: visible; }
.x3d { position: relative; height: 640vh; background: #070a2b; color: #fff; border-radius: 0 0 40px 40px; }
.x3d-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: inherit; }
.x3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.x3d-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 60% 50%, transparent 55%, rgba(4, 6, 26, .75) 100%), linear-gradient(90deg, rgba(7, 10, 43, .82) 0%, rgba(7, 10, 43, .35) 38%, transparent 60%); }

.x3d-panel { position: absolute; z-index: 3; left: max(24px, calc((100vw - 1240px) / 2 + 24px)); top: 50%; width: min(560px, 44vw); transform: translateY(-50%); opacity: 0; will-change: opacity, transform, filter; }
.x3d-panel h1 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 18px; }
.x3d-panel h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.04; letter-spacing: -.03em; margin: 14px 0 16px; color: #fff; }
.x3d-panel p { color: rgba(255, 255, 255, .7); font-size: 1.08rem; line-height: 1.6; max-width: 500px; margin-bottom: 26px; }
.x3d-hero { opacity: 1; padding-top: 40px; }
.x3d-num { display: inline-flex; align-items: center; gap: 12px; font: 700 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.x3d-num i { width: 38px; height: 1px; background: currentColor; opacity: .6; }
.x3d-link { display: inline-flex; gap: 8px; align-items: center; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 3px; }
.x3d-link:hover { border-color: #fff; }
.x3d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 520px; }
.x3d-stats div { padding: 16px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); }
.x3d-stats b { display: block; font: 800 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--font-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.x3d-stats small { display: block; margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .62); line-height: 1.35; }

.x3d-chapters { position: absolute; z-index: 3; right: max(20px, calc((100vw - 1240px) / 2)); top: 50%; transform: translateY(-50%); list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.x3d-chapters li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .35); transition: color .4s; }
.x3d-chapters li::after { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background .4s, transform .4s; }
.x3d-chapters li.on { color: #fff; }
.x3d-chapters li.on::after { background: var(--brand); border-color: var(--brand); transform: scale(1.3); box-shadow: 0 0 14px var(--brand); }
.x3d-hint { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.x3d-hint span { width: 1px; height: 40px; background: linear-gradient(#fff, transparent); animation: x3dDrip 1.8s infinite; transform-origin: top; }
@keyframes x3dDrip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.x3d-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); }
.x3d-bar i { display: block; height: 100%; width: 0; background: var(--grad); }

/* no WebGL / reduced motion: behave like a normal hero */
.x3d.off { height: auto; }
.x3d.off .x3d-stage { position: relative; height: auto; padding: 170px 0 90px; }
.x3d.off canvas, .x3d.off .x3d-chapters, .x3d.off .x3d-hint, .x3d.off .x3d-bar, .x3d.off .x3d-panel:not(.x3d-hero) { display: none; }
.x3d.off .x3d-panel { position: relative; top: auto; transform: none; width: auto; max-width: 720px; }
.x3d.off .x3d-vignette { background: radial-gradient(ellipse at 80% 20%, rgba(116, 112, 246, .35), transparent 60%); }

@media (max-width: 900px) {
  .x3d { height: 600vh; border-radius: 0 0 28px 28px; }
  .x3d-vignette { background: linear-gradient(0deg, rgba(7, 10, 43, .96) 0%, rgba(7, 10, 43, .7) 42%, transparent 66%); }
  .x3d-panel { left: 20px; right: 20px; width: auto; top: auto; bottom: 34px; transform: none; }
  .x3d-hero { bottom: 24px; padding-top: 0; }
  .x3d-panel h1 { font-size: 2.2rem; }
  .x3d-panel h2 { font-size: 1.85rem; margin: 10px 0 10px; }
  .x3d-panel p { font-size: .98rem; margin-bottom: 18px; }
  .x3d-hero .crumbs, .x3d-hero .hero-meta span:nth-child(n+3) { display: none; }
  .x3d-hero .eyebrow-pill { margin-bottom: 14px; }
  .x3d-hero .hero-meta { margin-bottom: 16px; }
  .x3d .btn-lg { padding: 14px 20px; font-size: 15px; }
  .x3d-stats { gap: 8px; }
  .x3d-stats div { padding: 12px 10px; }
  .x3d-stats small { font-size: 11px; }
  .x3d-chapters, .x3d-hint { display: none; }
  .x3d.off .x3d-stage { padding: 130px 0 70px; }
  .x3d.off .x3d-panel { left: 0; right: 0; bottom: auto; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) { .x3d-hint span { animation: none; } }