/* ================= UX ODYSSEY MODAL ================= */
/* the CTA reuses .btn / .btn-ghost; only the icon motion is new */
#uxoOpen{ cursor:pointer; background:transparent; font-family:'JetBrains Mono', monospace; }
#uxoOpen .uxo-icon{ color:var(--accent-2); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
#uxoOpen:hover .uxo-icon{ transform:translateY(-2px); }

.uxo-modal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; }
.uxo-modal[hidden]{ display:none; }
.uxo-backdrop{
  position:absolute; inset:0;
  background:rgba(4,7,12,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .26s ease;
}
.uxo-shell{
  position:relative;
  width:min(1400px, 94vw); height:min(850px, 90vh);
  border-radius:var(--radius);
  border:1px solid rgba(143,188,255,.18);
  background:#05070B;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  overflow:visible;
  opacity:0; transform:scale(.985);
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.uxo-modal.is-open .uxo-backdrop{ opacity:1; }
.uxo-modal.is-open .uxo-shell{ opacity:1; transform:scale(1); }
.uxo-modal.is-closing .uxo-backdrop{ opacity:0; }
.uxo-modal.is-closing .uxo-shell{ opacity:0; transform:scale(.99); transition-duration:.19s; }
@media (max-width:1200px){ .uxo-shell{ width:96vw; height:92vh; } }
@media (max-width:900px), (max-height:700px){ .uxo-close{ top:8px; right:8px; } }

.uxo-mount{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:#05070B; }
.uxo-mount iframe{ width:100%; height:100%; border:0; display:block; border-radius:inherit; }

.uxo-close{
  position:absolute; top:-18px; right:-18px; z-index:4;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer;
  background:rgba(8,12,18,.82); color:#E8EDF5;
  border:1px solid rgba(143,188,255,.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .2s, border-color .2s, transform .2s;
}
.uxo-close:hover{ background:rgba(20,28,40,.95); border-color:rgba(143,188,255,.6); transform:scale(1.06); }
.uxo-close:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }

.uxo-loading{
  position:absolute; inset:0; z-index:2; overflow:hidden; border-radius:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:#05070B; transition:opacity .3s ease;
}
.uxo-loading.is-done{ opacity:0; pointer-events:none; }
.uxo-loading-title{
  font-family:'Audiowide', sans-serif; font-size:20px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin:0;
}
.uxo-loading-sub{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); margin:0;
}
.uxo-loading-bar{
  margin-top:8px; width:150px; height:2px; border-radius:2px;
  background:rgba(143,188,255,.16); overflow:hidden;
}
.uxo-loading-bar i{
  display:block; width:40%; height:100%; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:uxoScan 1.15s ease-in-out infinite;
}
@keyframes uxoScan{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(310%); } }

@media (prefers-reduced-motion: reduce){
  .uxo-shell{ transform:none !important; transition:opacity .12s ease; }
  .uxo-backdrop{ transition:opacity .12s ease; }
  .uxo-loading-bar i{ animation:none; width:100%; }
  #uxoOpen:hover .uxo-icon{ transform:none; }
}


header.nav nav ul{align-items:center}
header.nav #uxoOpen{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;font:12px 'JetBrains Mono',monospace;white-space:nowrap;border:1px solid rgba(143,188,255,.35);border-radius:100px;color:inherit;background:rgba(91,155,255,.06)}
header.nav #uxoOpen:focus-visible{outline:2px solid #8fbcff;outline-offset:3px}
.uxo-shell{border-radius:18px}.uxo-loading-title{color:#e8edf5}.uxo-loading-sub{color:#9eacbf}
@media(max-width:1000px){
 header.nav .nav-inner{flex-wrap:wrap;justify-content:center;gap:12px;padding-top:12px;padding-bottom:12px}
 header.nav nav{width:100%}
 header.nav nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 2px;padding:0}
 header.nav nav ul a{display:inline-flex;font-size:12px;padding:8px 9px;white-space:nowrap}
 header.nav #uxoOpen{font-size:11px;padding:8px 10px}
 .page-hero,.sig-hero,.signal-hero-v22{padding-top:190px!important}
}
/* Keep the reading switch in its own row, above the metadata card. */
.signal-hero-v22 .reading-mode-toggle{position:relative!important;inset:auto!important;margin:0 0 26px auto!important;width:max-content;float:none}

@media(max-width:1000px){
 header.nav .nav-inner{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:12px!important;padding-top:12px!important;padding-bottom:12px!important;height:auto!important}
 header.nav nav{display:block!important;width:100%!important}
 header.nav nav ul{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px 2px!important}
 header.nav nav ul a{font-size:12px!important;padding:8px 9px!important}
 .hero:has(.hero-stack){padding-top:190px!important}
}
@media(max-width:1000px){
 #stayflowReadingMode{position:relative!important;inset:auto!important;margin:0 0 24px auto!important;width:max-content}
}


/* One compact mobile header shared by every portfolio page. */
.nav-menu-toggle{display:none}
@media(max-width:700px){
 header.nav.has-mobile-menu,header.nav.has-mobile-menu.is-stuck{top:12px!important;left:12px!important;right:12px!important;border:0!important}
 header.nav.has-mobile-menu .nav-inner,header.nav.has-mobile-menu.is-stuck .nav-inner{position:relative;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:100%!important;max-width:none!important;margin:0!important;padding:8px 12px 8px 16px!important;min-height:60px;height:auto!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:16px!important;background:rgba(15,20,28,.94)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 24px -16px rgba(0,0,0,.8)!important}
 header.nav.has-mobile-menu .brand-name{font-size:13px!important}
 header.nav.has-mobile-menu .brand-mark{width:24px!important;height:24px!important}
 header.nav.has-mobile-menu .nav-menu-toggle{display:flex;position:relative;flex:0 0 44px;width:44px;height:44px;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;color:var(--navy,#e8edf5);cursor:pointer}
 .nav-menu-toggle span{position:absolute;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
 .nav-menu-toggle span:nth-child(1){transform:translateY(-6px)}
 .nav-menu-toggle span:nth-child(3){transform:translateY(6px)}
 .menu-open .nav-menu-toggle span:nth-child(1){transform:rotate(45deg)}
 .menu-open .nav-menu-toggle span:nth-child(2){opacity:0}
 .menu-open .nav-menu-toggle span:nth-child(3){transform:rotate(-45deg)}
 .nav-menu-toggle:focus-visible{outline:2px solid #8fbcff;outline-offset:2px}
 header.nav.has-mobile-menu nav{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;left:0!important;right:0!important;width:auto!important;margin:0!important;padding:8px!important;background:#0f141c!important;border:1px solid #232c39!important;border-radius:16px!important;box-shadow:0 16px 32px -16px rgba(0,0,0,.8);max-height:calc(100dvh - 100px);overflow:auto}
 header.nav.has-mobile-menu.menu-open nav{display:block!important}
 header.nav.has-mobile-menu nav ul{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:4px!important;flex-wrap:nowrap!important;padding:0!important;margin:0!important}
 header.nav.has-mobile-menu nav ul a{display:flex!important;align-items:center!important;width:100%!important;min-height:48px!important;padding:12px 16px!important;font-size:15px!important;border-radius:10px!important;white-space:normal!important}
 body:has(header.has-mobile-menu) .hero,body:has(header.has-mobile-menu) .page-hero,body:has(header.has-mobile-menu) .sig-hero,body:has(header.has-mobile-menu) .signal-hero-v22{padding-top:112px!important}
 .hero .scroll-cue{display:none!important}
}
@media(prefers-reduced-motion:reduce){.nav-menu-toggle span{transition:none}}

@media(max-width:700px){
 header.nav.has-mobile-menu .nav-inner,header.nav.has-mobile-menu.is-stuck .nav-inner{border:0!important;border-radius:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
 header.nav.has-mobile-menu .nav-menu-toggle[aria-expanded="true"]{background:rgba(91,155,255,.16);color:#8fbcff}
 .hero .hero-inner .flow-field{width:92%!important;max-width:440px!important;margin-left:auto!important;margin-right:auto!important}
}

@media(max-width:700px){
 .hero .hero-inner .flow-field{display:none!important}
 body:has(header.has-mobile-menu) .hero:has(.flow-field){min-height:0!important;height:auto!important;padding:112px 0 64px!important;align-items:flex-start!important}
 .hero:has(.flow-field) .hero-inner{align-items:flex-start;text-align:left}
 .hero:has(.flow-field) h1{margin-top:16px!important}
 .hero:has(.flow-field) .hero-sub{margin-top:20px!important}
}

@media(max-width:700px){
 .hero:has(.flow-field) ~ .overlap-panel{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
}

.mobile-prototype-note{display:none}

/* Mobile reading rhythm: related content stays close; sections stay distinct. */
@media(max-width:700px){
 body:has(header.has-mobile-menu){--mobile-card-gap:16px;--mobile-content-gap:24px;--mobile-section-pad:32px}
 body:has(header.has-mobile-menu) :is(h1,h2,h3,h4,h5,h6,.eyebrow,.lead,.intro,.hero-sub,.section-head,.page-hero,.hero-inner,.space-center,.timeline-item){text-align:left!important}
 body:has(header.has-mobile-menu) :is(.section-head p,.page-hero p,.hero-inner p,.space-center p,h1+p,h2+p,h3+p){text-align:left!important;margin-left:0!important;margin-right:0!important}
 body:has(header.has-mobile-menu) .eyebrow{justify-content:flex-start!important}
 body:has(header.has-mobile-menu) .wrap{width:100%!important;padding-left:20px!important;padding-right:20px!important}
 body:has(header.has-mobile-menu) section:not(section section):not(.hero):not(.page-hero):not(.about-cockpit-hero):not(.about-console-stage):not(.about-lower-deck){padding-top:var(--mobile-section-pad)!important;padding-bottom:var(--mobile-section-pad)!important}
 body:has(header.has-mobile-menu) .section-head{margin:0 0 var(--mobile-content-gap)!important}
 body:has(header.has-mobile-menu) .section-head .eyebrow{margin:0 0 12px!important;font-size:11px!important;line-height:1.4!important}
 body:has(header.has-mobile-menu) .section-head h2{margin:0!important;line-height:1.2!important}
 body:has(header.has-mobile-menu) .section-head p:not(.eyebrow){margin:12px 0 0!important}
 body:has(header.has-mobile-menu) :is(.hero-inner,.page-hero>.wrap){transform:none!important;opacity:1!important}
 body:has(header.has-mobile-menu) :is(.page-hero,.sig-hero,.signal-hero-v22,header.hero){min-height:0!important;height:auto!important;padding-bottom:32px!important}
 body:has(header.has-mobile-menu) .page-hero{display:block!important;padding:112px 0 0!important}
 body:has(header.has-mobile-menu) .page-hero>.wrap{align-items:flex-start!important;justify-content:flex-start!important}
 body:has(header.has-mobile-menu) .page-hero h1{margin:0!important}
 body:has(header.has-mobile-menu) .page-hero .lead{margin-top:16px!important}
 body:has(header.has-mobile-menu) :is(.page-hero,.hero) .scroll-cue{display:none!important}
 body:has(header.has-mobile-menu) .hero:has(.flow-field){padding-bottom:32px!important}
 body:has(header.has-mobile-menu) #work{padding-top:32px!important}
 /* Remove desktop pinning space and the second set of side gutters. */
 body:has(header.has-mobile-menu) .stack-pin{height:auto!important}
 body:has(header.has-mobile-menu) .stack-pin-inner{padding:0!important;height:auto!important;overflow:visible!important}
 body:has(header.has-mobile-menu) .stack-pin-inner>.wrap{padding:0!important}
 body:has(header.has-mobile-menu) .stack-stage{display:grid;gap:var(--mobile-card-gap);height:auto!important}
 body:has(header.has-mobile-menu) .stack-stage .stack-card{margin:0!important;padding:20px!important;content-visibility:visible;contain-intrinsic-size:none}
 body:has(header.has-mobile-menu) .stack-head{margin-bottom:16px!important}
 body:has(header.has-mobile-menu) .stack-meta{padding-top:0!important}
 body:has(header.has-mobile-menu) .stack-stage .stack-media{height:auto!important;aspect-ratio:16/9}
 body:has(header.has-mobile-menu) .stack-tags{margin-top:16px!important}
 body:has(header.has-mobile-menu) #where-next{margin-top:0!important;padding-top:32px!important;padding-bottom:32px!important}
 body:has(header.has-mobile-menu) .teaser-grid{gap:var(--mobile-card-gap)!important}
 body:has(header.has-mobile-menu) .teaser-card{padding:20px!important;gap:8px!important;min-height:0!important}
 body:has(header.has-mobile-menu) .teaser-card h3{line-height:1.2!important}
 body:has(header.has-mobile-menu) .teaser-card p{line-height:1.55!important}
 body:has(header.has-mobile-menu) :is(.section-head,.teaser-card,.case-card,.featured-demo).reveal{opacity:1!important;transform:none!important}
 body:has(header.has-mobile-menu) .teaser-arrow{margin-top:8px!important}
 body:has(header.has-mobile-menu) .case-card{padding:20px!important;gap:var(--mobile-content-gap)!important;margin-bottom:var(--mobile-card-gap)!important}
 body:has(header.has-mobile-menu) .case-card:last-child{margin-bottom:0!important}
 body:has(header.has-mobile-menu) .featured-demo{gap:20px!important;margin-bottom:var(--mobile-card-gap)!important;padding:20px!important}
 body:has(header.has-mobile-menu) .featured-demo:last-child{margin-bottom:0!important}
 body:has(header.has-mobile-menu) .featured-brief{margin:12px 0 16px!important}
 body:has(header.has-mobile-menu) footer.galactic{margin-top:0!important;padding-top:40px!important}
 /* Mobile About uses normal flow instead of overlapping viewport-sized layers. */
 body:has(header.has-mobile-menu) .about-cockpit-hero{min-height:0!important;height:auto!important;padding:112px 20px 32px!important}
 body:has(header.has-mobile-menu) .about-cockpit-hero-copy{position:relative!important;inset:auto!important;transform:none!important;width:100%!important}
 body:has(header.has-mobile-menu) .about-hero-line{white-space:normal!important}
 body:has(header.has-mobile-menu) .about-cockpit-hero-lead{text-align:left!important;margin:16px 0 0!important}
 body:has(header.has-mobile-menu) .about-console-stage{margin-top:0!important;padding:0 20px 32px!important}
 body:has(header.has-mobile-menu) .about-lower-deck{display:none!important}
 /* Keep narrative headings, summaries and their evidence in one visual group. */
 body:has(header.has-mobile-menu) :is(.signal-hero-grid,.hero-grid){gap:var(--mobile-content-gap)!important}
 body:has(header.has-mobile-menu) .signal-hero-copy h1{margin:12px 0 16px!important}
 body:has(header.has-mobile-menu) .signal-hero-copy .sig-kicker{margin-bottom:12px!important}
 body:has(header.has-mobile-menu) .signal-hero-copy .lead{margin-bottom:0!important}
 body:has(header.has-mobile-menu) .signal-case section>.wrap>.lead{margin:16px 0 24px!important}
 body:has(header.has-mobile-menu) .mobile-prototype-note{display:block;font-size:12.5px;line-height:1.55;color:var(--slate,var(--muted,#9eacbf));text-align:left;margin:12px 0 0!important;max-width:100%}
 body:has(header.has-mobile-menu) #evening-story{padding-top:32px!important}
 body:has(header.has-mobile-menu) :is(.evening-layout-v44,.nl-decision-carousel,.nl-story-timeline,.nl-story-close,.nl-prototype-guide,.nl-value-chain,.nl-impact,.flow-ui-intro,.theme-lab-principal){margin-top:24px!important}
 body:has(header.has-mobile-menu) :is(.evening-layout-v44,.nl-story-scene,.nl-reflection-grid,.flow-ui-intro,.theme-lab-principal,.scenario-grid-fixed){gap:24px!important}
 body:has(header.has-mobile-menu) :is(.sig-grid2,.sig-grid3,.pain-grid,.principles,.decision-grid,.research-strip,.before-after,.control-model,.vanilla,.measure,.outcomes){gap:16px!important}
}

/* Case-study labels are removed in the page source at every viewport. */
@media(max-width:700px){
 body:has(header.has-mobile-menu) :is(.reading-mode-toggle,.signal-reading-toggle,#stayflowReadingMode){position:relative!important;inset:auto!important;display:flex!important;width:max-content!important;max-width:100%;margin:0 auto 24px 0!important;align-self:flex-start!important;float:none!important}
 body:has(header.has-mobile-menu) .signal-hero-copy h1{margin-top:0!important}
 /* Desktop previews should never trap a phone swipe. Fullscreen remains interactive. */
 :is(#emailPrototypeMonitor,#meetingPrototypeMonitor,#crmPrototypeMonitor,#northlinePrototype,#prototypeMonitor,#monitorShell,#adminMonitorShell) iframe{pointer-events:none!important}
 :is(#emailPrototypeMonitor,#meetingPrototypeMonitor,#crmPrototypeMonitor,#northlinePrototype,#prototypeMonitor,#monitorShell,#adminMonitorShell):fullscreen iframe{pointer-events:auto!important}
 /* Mobile landing stacks the animated artwork below the text. */
 body:has(header.has-mobile-menu) .hero:has(.flow-field){min-height:100svh!important;height:auto!important;display:flex!important;align-items:flex-start!important;padding:112px 0 32px!important}
 .hero:has(.flow-field) .hero-inner{width:100%;align-items:flex-start!important}
 .hero:has(.flow-field) h1{margin-top:0!important}
 /* Keep the synchronized desktop loading sequence within a phone's safe bounds. */
 .boot-ship{width:min(44vw,210px)!important;top:46%!important}
 .boot-note{width:calc(100% - 40px);max-width:360px;bottom:calc(48px + env(safe-area-inset-bottom,0px));font-size:10px;line-height:1.5;letter-spacing:.12em;text-align:center;white-space:normal}
 .boot-bar{bottom:calc(28px + env(safe-area-inset-bottom,0px));width:min(160px,40vw)}
}

@media(max-width:700px){
 body:has(header.has-mobile-menu) .hero .hero-inner .flow-field{display:block!important;position:static!important;inset:auto!important;width:100%!important;max-width:400px!important;height:auto!important;max-height:360px!important;margin:48px auto 0!important;transform:none!important;flex-shrink:0}
 body.is-loading .hero .hero-inner .flow-field{visibility:hidden!important}
}

/* One typeface across portfolio pages; retain every existing type metric. */
html, body, body *, body *::before, body *::after {
  font-family: 'Figtree', sans-serif !important;
}

/* Preserve natural casing, with the original typeface for the name only. */
html body *, html body *::before, html body *::after { text-transform: none !important; }
html body header.nav .brand-name, html body header.nav .brand-name * {
  font-family: 'Audiowide', sans-serif !important;
}

/* Portfolio reading polish; product mockups and animation rules stay intact. */
body:has(header.has-mobile-menu) :is(.section-head > .eyebrow,.signal-hero-copy > .sig-kicker,.page-hero > .wrap > .eyebrow){letter-spacing:.04em!important}
@media(max-width:700px){
 body:has(header.has-mobile-menu) #about-hero-title{font-size:32px!important;line-height:1.15!important}
 body:has(header.has-mobile-menu) :is(.signal-hero-copy > h1,header.hero > .wrap > h1,header.hero > .hero-shell > .hero-grid > div > h1){font-size:42px!important;line-height:1.08!important}
 body:has(header.has-mobile-menu) :is(.reading-mode-toggle,.signal-reading-toggle,#stayflowReadingMode){min-height:44px!important;padding:10px 14px!important}
 body:has(header.has-mobile-menu) footer.galactic a{display:inline-flex;align-items:center;min-height:44px}
}