/* Xruseon spatial experience. Content is ordinary document flow first.
   Motion is an enhancement; nothing needs a canvas or script to be read. */
:root {
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-500);
  --header-h: 80px;
  --page-gutter: clamp(24px, 5vw, 88px);
  --scene-cyan: rgba(61,196,219,.18);
  --scene-line: rgba(179,234,242,.24);
}
.site-header {background:rgba(11,12,14,.88)}
.header-inner {padding:0 var(--page-gutter)}
.brand span {font-size:24px;letter-spacing:-.04em}
.brand img {width:32px;height:32px}
.nav-desktop {gap:24px}
.nav-link {font:500 .875rem/1.2 var(--font-text);text-transform:none;letter-spacing:0;opacity:.9;padding:14px 0}
.btn {min-height:44px;border-radius:6px;white-space:normal;line-height:1.25;height:auto;padding-top:12px;padding-bottom:12px}
.btn--lg {min-height:54px}
.btn--primary {--_bg:var(--cyan-300);--_fg:var(--ink-950)}
.btn--primary:hover {--_bg:var(--cyan-200)}
.btn--gold-on-ink {--_fg:var(--cyan-200);--_bd:var(--cyan-700)}
.btn--gold-on-ink:hover {--_bg:rgba(22,174,201,.12);--_bd:var(--cyan-400)}
.motion-toggle {display:inline-flex;align-items:center;justify-content:center;gap:8px;background:none;border:1px solid currentColor;color:inherit;min-height:44px;padding:8px 12px;border-radius:6px;font:500 .8125rem/1.2 var(--font-text);cursor:pointer}
.motion-icon {color:var(--cyan-400);font-size:18px}
.motion-toggle:disabled {cursor:default;opacity:.8}
[data-chrome="light"] .motion-icon {color:var(--cyan-700)}
.eyebrow {font-size:.8125rem;line-height:1.6;letter-spacing:.1em}
.eyebrow--inverse {color:var(--ink-200)}
.section-title {font-size:clamp(2rem,4.5vw,4.25rem);max-width:850px;letter-spacing:-.045em;line-height:1.06}
.section-lead {font-size:1.125rem;max-width:590px}
.act {height:auto;scroll-margin-top:0}
.stage {position:relative;height:auto;overflow:clip;perspective:none}
.act--hero {background:var(--ink-950)}
.act--hero .stage {background:radial-gradient(ellipse at 78% 45%,#102c33 0,transparent 52%),var(--ink-950)}
.a1-grid {position:relative;inset:auto;max-width:1600px;min-height:100svh;grid-template-columns:1.08fr 1fr;padding:150px var(--page-gutter) 130px;gap:0;isolation:isolate}
.a1-copy {z-index:2;will-change:auto;transform-origin:left center}
.hero-title {font-size:clamp(3.4rem,6.5vw,6.5rem);line-height:.98;letter-spacing:-.065em;margin:26px -70px 0 0;text-wrap:initial}
.hero-outline {color:var(--cyan-200);-webkit-text-stroke:1px var(--cyan-200);font-weight:400}
@supports (-webkit-text-stroke:1px white) {.hero-outline {color:transparent}}
.hero-lead {font-size:1.125rem;line-height:1.6;color:var(--ink-200);margin-top:30px;max-width:520px}
.hero-actions {align-items:center;gap:28px;margin-top:32px}
.hero-work-link {display:inline-flex;gap:18px;align-items:center;font-size:1rem;color:var(--paper);padding:14px 0}
.hero-work-link span {font-size:24px;color:var(--cyan-300)}
.hero-proof {font-size:.75rem;letter-spacing:.04em;color:var(--ink-300);margin-top:32px;text-transform:none}
.a1-xwrap {height:auto;aspect-ratio:1;min-width:0;perspective:850px;transform-style:preserve-3d;will-change:auto;position:relative;z-index:1}
.signal-field {position:absolute;inset:-18%;width:136%;height:136%;pointer-events:none}
.a1-x {position:absolute;width:43%;height:auto;animation:none;filter:drop-shadow(0 22px 35px rgba(198,163,62,.18));transform:translateZ(55px)}
.a1-halo {width:90%;background:radial-gradient(circle,rgba(61,196,219,.15),transparent 66%)}
.a1-ring,.a1-ring2 {width:88%;border-color:var(--scene-line);transform:rotateX(63deg) rotateZ(-25deg);transform-style:preserve-3d}
.a1-ring2 {width:112%;border:1px solid rgba(61,196,219,.18);transform:rotateX(68deg) rotateY(24deg)}
.orbit-plane {position:absolute;inset:18%;border:1px solid rgba(179,234,242,.2);background:linear-gradient(135deg,rgba(61,196,219,.03),transparent);pointer-events:none;transform:rotateX(64deg) rotateZ(45deg) translateZ(-100px)}
.orbit-plane--two {inset:5%;transform:rotateX(64deg) rotateZ(45deg) translateZ(-160px);border-color:rgba(179,234,242,.1)}
.orbit-label {position:absolute;padding:9px 12px;border-left:2px solid var(--cyan-400);background:rgba(11,12,14,.8);font:400 .75rem/1.3 var(--font-mono);letter-spacing:.05em;color:var(--ink-200);transform:translateZ(70px)}
.orbit-label--top {top:14%;right:0}
.orbit-label--bottom {bottom:12%;left:4%;border-color:var(--gold-500)}
.orbit-coordinate {position:absolute;bottom:1%;right:4%;font:400 .75rem var(--font-mono);letter-spacing:.2em;color:var(--ink-300)}
.a1-floor {left:-30%;right:-30%;bottom:-45%;height:90%;background-size:80px 80px;opacity:.45;will-change:auto}
.a1-vignette {background:linear-gradient(0deg,var(--ink-950),transparent 20%)}
.scroll-cue {left:var(--page-gutter);bottom:32px;transform:none;flex-direction:row;gap:18px}
.scroll-cue-label {font-size:.75rem;letter-spacing:.1em;color:var(--ink-200)}
.scroll-cue-track {height:32px}
.scroll-cue-dot {animation:none;top:12px}
.act--hero::after {content:"";position:absolute;bottom:0;left:var(--page-gutter);right:var(--page-gutter);height:1px;background:linear-gradient(90deg,var(--cyan-700),rgba(179,234,242,.04))}
.a2-dots {inset:0;opacity:.28;will-change:auto}
.a2-label {position:relative;top:auto;padding:96px var(--page-gutter) 0;justify-content:flex-start;max-width:1440px;margin:auto}
.a2-stack {position:relative;inset:auto;align-items:stretch;text-align:left;padding:48px var(--page-gutter) 120px;gap:0;max-width:1440px;margin:auto;perspective:1100px}
.a2-stmt {padding:30px 0;border-bottom:1px solid var(--border-inverse);display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;will-change:auto;transform-origin:left center}
.a2-line {font-size:clamp(2rem,4.3vw,4.125rem);letter-spacing:-.045em;line-height:1.1}
.a2-sub {font:400 1rem/1.6 var(--font-text);letter-spacing:0;text-transform:none;color:var(--ink-200);margin:0;max-width:340px}
.a3-head {max-width:1440px;padding:110px var(--page-gutter) 0}
.a3-rail {position:relative;left:auto;top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:48px var(--page-gutter) 110px;max-width:1440px;margin:auto;will-change:auto;perspective:1200px}
.svc-card {width:auto;min-width:0;will-change:auto;transform-origin:center center}
.svc-card .card {min-height:320px;padding:36px;display:flex;flex-direction:column;align-items:flex-start;border-color:var(--ink-150);border-radius:8px;box-shadow:0 20px 40px rgba(11,12,14,.04)}
.svc-icon {background:none;border:1px solid var(--cyan-200);width:54px;height:54px}
.svc-num {position:absolute;right:32px;top:34px;font-size:.875rem;margin:0;color:var(--cyan-700)}
.svc-card h3,.svc-card .card h3 {font-size:1.625rem;line-height:1.2;margin:32px 0 0;max-width:300px}
.svc-card .card p {font-size:1rem;line-height:1.6;margin-top:18px}
.card-action {margin-top:28px;padding:12px 0;min-height:44px;border:none;background:none;font:600 .9375rem/1.4 var(--font-text);color:var(--cyan-700);cursor:pointer;display:flex;align-items:center;gap:18px;text-align:left}
.card-action:hover {text-decoration:underline;text-underline-offset:4px}
.card-action::after {content:"↗";font-size:20px}
.a3-hint {display:none}
.act--work .stage {background:var(--paper-dim)}
.a4-marquee {position:relative;top:auto;left:auto;right:auto;padding-top:60px;margin:0 -5%;transform:rotate(-2deg);opacity:.75}
.a4-track {animation:none;will-change:auto}
.a4-word {font-size:clamp(3rem,7vw,7rem);-webkit-text-stroke-color:var(--ink-300)}
.a4-content {max-width:1440px;padding:64px var(--page-gutter) 110px}
.a4-head .section-title {font-size:clamp(2rem,4.5vw,4.25rem);margin-top:16px}
.work-grid {grid-template-columns:1.1fr 1fr;gap:24px;margin-top:48px;perspective:1200px}
.work-feature,.work-mini {will-change:auto}
.work-feature .card {padding:42px;display:flex;flex-direction:column;align-items:flex-start;background:var(--ink-900);color:var(--paper);border-color:var(--ink-700);overflow:hidden}
.work-feature .work-top {width:100%;margin-bottom:64px}
.work-feature h3 {font-size:clamp(2.8rem,4vw,4.5rem);color:var(--paper)}
.work-feature .work-tag {color:var(--cyan-300);font-size:.8125rem;margin-top:20px}
.work-feature .card p {font-size:1.0625rem;line-height:1.7;color:var(--ink-200);margin-top:24px}
.work-feature .card-action {color:var(--cyan-300);margin-top:auto;padding-top:28px}
.work-feature .work-demo {color:var(--ink-300) !important}
.work-mini .card {padding:32px}
.work-mini h3 {font-size:1.75rem}
.work-mini .work-tag {font-size:.8125rem;margin-top:16px}
.work-mini .card p {font-size:1rem;line-height:1.65;margin-top:18px}
.work-demo {font-size:.75rem !important;line-height:1.7 !important;letter-spacing:.03em;white-space:normal !important}
.work-mini .card-action {margin-top:14px}
.a5-grid {position:relative;inset:auto;padding:120px var(--page-gutter);max-width:1440px;gap:72px;perspective:1200px}
.a5-copy {will-change:auto}
.a5-copy h2 {font-size:clamp(2.25rem,4.25vw,4rem);line-height:1.08;letter-spacing:-.045em}
.a5-p1,.a5-p2 {font-size:1.0625rem;line-height:1.65;color:var(--ink-200);max-width:540px;margin-top:24px}
.a5-panel {border-radius:8px;position:relative;padding:42px;will-change:auto;background:linear-gradient(135deg,#1a292e,var(--ink-900));box-shadow:20px 24px 0 -1px var(--ink-950),20px 24px 0 0 rgba(179,234,242,.2)}
.a5-fit-label {font-size:.875rem;margin-bottom:32px;color:var(--cyan-300)}
.checklist {gap:24px}
.checklist .t {font-size:1.0625rem}
.a6-wrap {max-width:1440px;padding:110px var(--page-gutter)}
.proc-track {margin-top:72px}
.proc-line {background:var(--cyan-700);transform:scaleX(1)}
.proc-num {font-size:1rem;color:var(--cyan-700)}
.proc-step h3 {font-size:1.75rem;margin-top:22px}
.proc-step p {font-size:1rem;line-height:1.65}
.a6-close {color:var(--ink-500);font-size:1.125rem;line-height:1.65;max-width:690px;margin-top:64px}
.a7-content {position:relative;inset:auto;padding:150px var(--page-gutter);min-height:90svh}
.a7-content h2 {font-size:clamp(3rem,6.5vw,6.5rem);line-height:1.03;letter-spacing:-.05em;max-width:1080px}
.a7-body {font-size:1.125rem;color:var(--ink-200);max-width:600px;margin-top:32px}
.a7-btns {margin-top:40px;gap:20px}
.a7-mail {font-size:1rem;color:var(--ink-200);letter-spacing:0;text-transform:none;line-height:1.5;margin-top:40px}
.a7-x {width:min(70vw,850px);opacity:.07;will-change:auto}
.a7-floor {will-change:auto}
.principles-grid {max-width:1440px;padding:100px var(--page-gutter)}
.footer-inner {max-width:1440px;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.footer-about {font-size:1rem;color:var(--ink-200)}
.footer-col h3 {font-size:.8125rem;line-height:1.6;margin-bottom:18px;color:var(--ink-300)}
.footer-col a,.footer-col .linklike {display:inline-block;min-height:32px;color:var(--ink-200)}
.footer-tagline {font-size:.75rem;letter-spacing:.06em}
.form-error {font-size:1rem;color:var(--red-600);line-height:1.5;padding:14px;border:1px solid currentColor;border-radius:6px}
.input-wrap input,.input-wrap select,.input-wrap textarea {font-size:1rem}
.modal {max-height:calc(100dvh - 32px);overscroll-behavior:contain}
body:has(.modal[open]) {overflow:hidden}
.rail {right:20px}
.rail-label {font-size:.75rem}
.rail-item {min-height:36px}
.rail-num {font-size:.75rem}
.page-progress {position:fixed;left:0;top:0;height:2px;width:100%;z-index:100;background:var(--cyan-400);transform:scaleX(0);transform-origin:left;pointer-events:none}
/* Only scenes that fit at actual readable text size are pinned. */
.motion-ready .act--hero.is-pinned {height:165svh}
.motion-ready .act--hero.is-pinned .stage {position:sticky;top:0;height:100svh}
.motion-ready .act--services.is-pinned {height:250svh}
.motion-ready .act--services.is-pinned .stage {position:sticky;top:0;height:100svh}
.act--services.is-pinned .a3-head {padding-top:104px}
.act--services.is-pinned .section-title {font-size:clamp(2rem,3.6vw,3.25rem)}
.act--services.is-pinned .a3-rail {display:flex;width:max-content;max-width:none;margin:0;padding:32px var(--page-gutter) 36px;gap:28px}
.act--services.is-pinned .svc-card {width:clamp(340px,38vw,500px);flex:none}
.act--services.is-pinned .card {padding:28px}
.act--services.is-pinned .svc-icon {width:44px;height:44px}
.act--services.is-pinned .card h3 {font-size:1.5rem;margin-top:24px;max-width:350px}
.act--services.is-pinned .card p {margin-top:14px;line-height:1.5}
.act--services.is-pinned .card-action {margin-top:20px}
.act--services.is-pinned .a3-hint {display:flex;bottom:25px}
.act--services.is-pinned .a3-hint span {font-size:.75rem;color:var(--ink-500);letter-spacing:.08em}
.act--services:focus-within .a3-hint {opacity:0}
.card:focus-within {outline:2px solid var(--cyan-700);outline-offset:5px}
.motion-off *, .motion-off *::before, .motion-off *::after {animation:none !important;transition:none !important}
.motion-off {scroll-behavior:auto}
.no-js .motion-toggle {display:none}
.no-js .nav-toggle {display:none}
.no-js [data-modal] {display:none}
.no-js .nav-mobile {display:none;position:static;flex-direction:row;flex-wrap:wrap;padding:8px var(--page-gutter)}
.no-js .site-header {position:relative;height:auto}
.no-js .header-inner {min-height:var(--header-h)}
.no-js .hero-work-link {display:inline-flex}
.no-js .rail {display:none}
@media (max-width:1199px) {
  .nav-desktop {gap:16px}
  .header-cta {gap:8px}
  .rail {display:none}
  .a1-grid {padding-top:140px;grid-template-columns:1.15fr 1fr}
  .hero-title {font-size:clamp(3.4rem,7vw,5.5rem)}
  .hero-actions {gap:18px}
  .a5-grid {gap:40px}
}
@media (max-width:999px) {
  .no-js .nav-mobile {display:flex}
  .nav-desktop {display:none}
  .nav-toggle {display:flex;min-width:44px;min-height:44px}
  .nav-mobile {max-height:calc(100dvh - var(--header-h));overflow:auto}
  .nav-mobile a {font-size:.875rem;line-height:1.5;min-height:48px}
  .a1-grid {grid-template-columns:1fr;min-height:0;padding:130px var(--page-gutter) 90px;gap:12px}
  .a1-copy {max-width:700px}
  .a1-xwrap {order:0;width:min(70vw,470px);justify-self:center;margin-top:10px}
  .hero-title {font-size:clamp(3.4rem,9vw,5.75rem);margin-right:0}
  .hero-lead {max-width:620px}
  .hero-actions {flex-direction:row}
  .hero-actions .btn {flex:0 1 auto}
  .hero-proof {margin-top:24px}
  .a2-stmt {grid-template-columns:1fr;gap:18px;padding:30px 0}
  .a2-sub {max-width:600px}
  .work-grid {grid-template-columns:1fr}
  .work-feature .work-top {margin-bottom:24px}
  .work-feature .card-action {margin-top:20px}
  .work-col {display:grid;grid-template-columns:1fr 1fr}
  .a5-grid {grid-template-columns:1fr;gap:48px}
  .a5-p1,.a5-p2 {max-width:680px}
  .a5-panel {margin-right:22px}
  .proc-grid {grid-template-columns:1fr 1fr;row-gap:40px}
  .proc-track {border-top:0}
  .proc-dot {display:none}
  .proc-step {border-top:1px solid var(--ink-150);padding-top:28px}
  .proc-line {display:none}
  .principles-grid {grid-template-columns:1fr;gap:32px}
  .footer-grid {grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:600px) {
  :root {--header-h:72px;--page-gutter:24px}
  .brand span {font-size:21px}
  .brand img {width:28px;height:28px}
  .header-cta .btn--sm {display:none}
  .header-inner {gap:10px}
  .motion-toggle {padding:8px;font-size:.75rem;gap:5px}
  .a1-grid {padding-top:104px;padding-bottom:90px;gap:0}
  .a1-copy {display:contents}
  .a1-copy > .eyebrow {grid-row:1}
  .hero-title {grid-row:2;font-size:clamp(2.25rem,10.8vw,4.5rem);margin-top:20px}
  .hero-lead {grid-row:4}
  .hero-actions {grid-row:5}
  .hero-proof {grid-row:6}
  .hero-lead {font-size:1rem;line-height:1.6;margin-top:24px}
  .hero-actions {gap:12px 20px;margin-top:24px}
  .hero-actions .btn {font-size:.9375rem}
  .hero-proof {font-size:.75rem;max-width:320px;line-height:1.8;letter-spacing:0}
  .a1-xwrap {grid-row:3;width:65vw;max-width:270px;margin:12px auto 0}
  .orbit-label {font-size:.75rem;padding:7px 8px}
  .orbit-label--top {right:-2%;top:12%}
  .orbit-label--bottom {left:0}
  .a2-label {padding-top:64px}
  .a2-stack {padding-top:24px;padding-bottom:64px}
  .a2-line {font-size:clamp(1.875rem,8.2vw,3rem)}
  .a2-sub {font-size:1rem}
  .a3-head {padding-top:72px}
  .a3-rail {grid-template-columns:1fr;gap:24px;padding-top:32px;padding-bottom:72px}
  .svc-card .card {min-height:0;padding:28px}
  .svc-card .card h3 {font-size:1.625rem;margin-top:28px}
  .svc-num {right:28px;top:32px}
  .section-lead {font-size:1rem}
  .a4-marquee {padding-top:36px}
  .a4-content {padding-top:48px;padding-bottom:72px}
  .work-grid {margin-top:32px}
  .work-col {grid-template-columns:1fr}
  .work-feature .card,.work-mini .card {padding:28px}
  .a5-grid {padding-top:80px;padding-bottom:90px}
  .a5-panel {padding:28px;box-shadow:12px 14px 0 -1px var(--ink-950),12px 14px 0 0 rgba(179,234,242,.2);margin-right:12px}
  .a5-copy h2 {font-size:2.25rem}
  .a5-p1,.a5-p2 {font-size:1rem}
  .a5-actions .btn {font-size:.9375rem;width:100%}
  .checklist .t {font-size:1rem}
  .a6-wrap {padding-top:72px;padding-bottom:72px}
  .proc-track {margin-top:36px;border-left:1px solid var(--ink-150)}
  .proc-grid {grid-template-columns:1fr;gap:32px}
  .proc-step,.proc-step:last-child {border:0;padding:0 0 0 26px}
  .proc-dot {display:block;left:-5px;top:4px;border-color:var(--cyan-700)}
  .proc-step h3 {margin-top:12px}
  .a6-close {font-size:1rem;margin-top:40px}
  .a7-content {min-height:0;padding:100px var(--page-gutter)}
  .a7-content h2 {font-size:clamp(2.625rem,10.5vw,4rem)}
  .a7-body {font-size:1rem}
  .a7-btns {flex-direction:column;align-items:stretch;width:100%;max-width:360px}
  .principles-grid {padding-top:64px;padding-bottom:64px}
  .footer-grid {grid-template-columns:1fr 1fr;gap:36px 24px}
  .footer-about-col {grid-column:1 / -1}
  .footer-about {max-width:400px}
  .footer-col:last-child {grid-column:1 / -1}
  .footer-bar {gap:24px;line-height:1.6}
  .modal {width:calc(100% - 24px);padding:0}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none !important;transition:none !important}
}
@media (forced-colors:active) {
  .hero-outline {color:CanvasText;-webkit-text-stroke:0}
  .signal-field,.orbit-plane,.a1-ring,.a1-ring2 {display:none}
  .card {border:1px solid CanvasText}
  .page-progress {display:none}
}
@media print {
  .site-header,.rail,.page-progress,.a1-xwrap,.scroll-cue,.a4-marquee,.a7-floor,.a7-x,.a1-floor,.a2-dots,.motion-toggle,.modal {display:none !important}
  .act,.act.is-pinned {height:auto !important}
  .stage,.act.is-pinned .stage {position:static !important;height:auto !important;overflow:visible !important}
  *,*::before,*::after {transform:none !important;opacity:1 !important;color:black !important;background:white !important;box-shadow:none !important;text-shadow:none !important}
  .hero-outline {-webkit-text-stroke:0;color:black}
  .a1-grid,.a5-grid,.work-grid {display:block;padding:24px}
  .a3-rail,.act.is-pinned .a3-rail {display:grid;grid-template-columns:1fr 1fr;width:auto;padding:24px}
  .act.is-pinned .svc-card {width:auto}
  .card,.proc-step {break-inside:avoid}
}