/* JMOREX CINEMATIC EXPERIENCE V2 — 2026-09-22
   First-party progressive enhancement. No third-party runtime. No decorative gradients. */

:root{
  --jmx-cinema-x:0;
  --jmx-cinema-y:0;
  --jmx-cinema-depth:0;
  --jmx-cinema-progress:0;
  --jmx-cinema-ease:cubic-bezier(.2,.75,.2,1);
}

html{scroll-behavior:smooth}
body.page{
  position:relative;
  isolation:isolate;
}
body.page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:url("/assets/jmorex-cinematic-grid.svg");
  background-size:1600px 900px;
  background-position:center top;
  opacity:.42;
}
body.page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9997;
  pointer-events:none;
  background-image:url("/assets/jmorex-grain.svg");
  background-size:180px 180px;
  opacity:.12;
  mix-blend-mode:soft-light;
}

.site-header{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-header .nav{
  position:relative;
}
.site-header .nav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:rgba(243,239,230,.08);
}
.nav-links a,
.jmx-nav-contact{
  position:relative;
}
.nav-links a::after,
.jmx-nav-contact::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:1px;
  background:#C9A55A;
  transition:right .35s var(--jmx-cinema-ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after,
.jmx-nav-contact:hover::after,
.jmx-nav-contact:focus-visible::after{right:0}

[data-jmx-cinema-reveal]{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity .7s var(--jmx-cinema-ease),transform .7s var(--jmx-cinema-ease);
}
[data-jmx-cinema-reveal].is-visible{
  opacity:1;
  transform:none;
}

.page-home .hero{
  min-height:calc(100svh - 76px);
  display:grid;
  align-items:center;
  padding-top:clamp(4rem,9vw,8rem);
  overflow:clip;
}
.page-home .hero-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:center;
}
.page-home .jmx-hero-copy{
  position:relative;
  z-index:3;
}
.page-home .jmx-hero-copy::before{
  content:"JMOREX";
  position:absolute;
  left:-.03em;
  top:-.72em;
  color:rgba(243,239,230,.025);
  font-size:clamp(8rem,26vw,24rem);
  font-weight:700;
  letter-spacing:-.08em;
  line-height:.72;
  pointer-events:none;
  white-space:nowrap;
}
.page-home .hero h1{
  max-width:8.7ch;
  font-size:clamp(4.5rem,9vw,9.4rem);
  line-height:.82;
  letter-spacing:-.075em;
  text-wrap:balance;
}
.page-home .hero h1 span{display:block}
.page-home .jmx-hero-last{
  color:#E8C880;
  font-style:italic;
  font-weight:400;
}
.page-home .jmx-intro{
  max-width:62ch;
  margin-top:2rem;
  color:rgba(243,239,230,.7);
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.7;
}

.jmx-cinema-stage{
  position:relative;
  min-height:clamp(560px,66vw,760px);
  overflow:hidden;
  border:1px solid rgba(243,239,230,.12);
  background:#0A090D;
  transform-style:preserve-3d;
  transform:
    perspective(1300px)
    rotateX(calc(var(--jmx-cinema-y) * -2.25deg))
    rotateY(calc(var(--jmx-cinema-x) * 3.25deg));
  transition:transform .22s ease-out,border-color .3s ease;
}
.jmx-cinema-stage:hover{border-color:rgba(201,165,90,.34)}
.jmx-cinema-stage::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(243,239,230,.075);
  pointer-events:none;
}
.jmx-cinema-stage::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:#C9A55A;
  transform:scaleX(calc(.18 + (var(--jmx-cinema-progress) * .82)));
  transform-origin:left center;
  opacity:.75;
}
.jmx-cinema-stage .jmx-office-meta,
.jmx-cinema-stage .jmx-plate-footer{
  position:relative;
  z-index:8;
}
.jmx-cinema-stage .hero-stage-visual{
  position:absolute;
  inset:82px 0 64px;
  transform-style:preserve-3d;
}
.jmx-cinema-mark{
  position:absolute;
  width:54%;
  left:5%;
  top:13%;
  opacity:.16;
  filter:grayscale(1) contrast(1.1);
  transform:translateZ(-70px) rotate(-7deg);
}
.jmx-cinema-mark img{width:100%;height:auto}
.jmx-cinema-kiro{
  position:absolute;
  right:-2%;
  bottom:-2%;
  width:min(72%,520px);
  height:auto;
  object-fit:contain;
  transform:translateZ(70px) translate3d(calc(var(--jmx-cinema-x) * 10px),calc(var(--jmx-cinema-y) * 8px),0);
  filter:drop-shadow(0 38px 42px rgba(0,0,0,.48));
  transition:transform .22s ease-out;
}
.jmx-cinema-data{
  position:absolute;
  z-index:7;
  left:7%;
  bottom:19%;
  max-width:190px;
  padding:.85rem 1rem;
  border-left:1px solid rgba(201,165,90,.65);
  color:rgba(243,239,230,.68);
  font:600 .65rem/1.45 var(--jv-type-font-ui);
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:translateZ(95px);
}
.jmx-cinema-data b{
  display:block;
  color:#E8C880;
  margin-bottom:.4rem;
  font-size:.58rem;
  letter-spacing:.13em;
}
.jmx-cinema-coordinate{
  position:absolute;
  right:6%;
  top:17%;
  z-index:8;
  color:rgba(243,239,230,.34);
  font:600 .54rem/1.4 var(--jv-type-font-ui);
  letter-spacing:.12em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:translateZ(120px);
}
.jmx-cinema-stage .jmx-office-signature{
  opacity:.74;
  transform:translateZ(30px);
}

.jmx-cinema-manifesto{
  position:relative;
  padding:clamp(6rem,12vw,12rem) 0;
  border-block:1px solid rgba(243,239,230,.085);
  overflow:clip;
}
.jmx-cinema-manifesto__grid{
  display:grid;
  grid-template-columns:minmax(220px,.65fr) minmax(0,1.75fr);
  gap:clamp(2rem,8vw,9rem);
  align-items:start;
}
.jmx-cinema-manifesto__aside{
  position:sticky;
  top:110px;
  padding-top:.45rem;
}
.jmx-cinema-manifesto__aside span{
  display:block;
  color:#C9A55A;
  font:700 .62rem/1 var(--jv-type-font-ui);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.jmx-cinema-manifesto__aside p{
  margin:1.2rem 0 0;
  max-width:24ch;
  color:rgba(243,239,230,.52);
  line-height:1.7;
}
.jmx-cinema-manifesto__statement{
  margin:0;
  font-size:clamp(3.6rem,7vw,8.2rem);
  line-height:.88;
  letter-spacing:-.07em;
  max-width:9.6ch;
}
.jmx-cinema-manifesto__statement em{
  color:#E8C880;
  font-weight:400;
}
.jmx-cinema-manifesto__bands{
  margin-top:clamp(4rem,7vw,7rem);
  border-top:1px solid rgba(243,239,230,.11);
}
.jmx-cinema-manifesto__band{
  display:grid;
  grid-template-columns:64px 1fr minmax(220px,.75fr);
  gap:1.2rem;
  align-items:center;
  min-height:96px;
  border-bottom:1px solid rgba(243,239,230,.09);
  transition:padding-left .28s var(--jmx-cinema-ease),border-color .28s ease;
}
.jmx-cinema-manifesto__band:hover{
  padding-left:14px;
  border-bottom-color:rgba(201,165,90,.34);
}
.jmx-cinema-manifesto__band>span{
  color:#C9A55A;
  font:700 .62rem/1 var(--jv-type-font-ui);
  letter-spacing:.12em;
}
.jmx-cinema-manifesto__band h3{
  margin:0;
  font-size:clamp(1.35rem,2.25vw,2.4rem);
  letter-spacing:-.045em;
}
.jmx-cinema-manifesto__band p{
  margin:0;
  color:rgba(243,239,230,.52);
  line-height:1.6;
}

.jmx-transform-card,
.page-services .engagement-grid .card,
.page-work .case,
.page-about .card,
.page-trust .card{
  transform:translateZ(0);
  transition:transform .32s var(--jmx-cinema-ease),border-color .32s ease,background-color .32s ease;
}
@media(hover:hover) and (pointer:fine){
  .jmx-transform-card:hover,
  .page-services .engagement-grid .card:hover,
  .page-about .card:hover,
  .page-trust .card:hover{
    transform:translate3d(0,-7px,0);
    border-color:rgba(201,165,90,.34);
  }
  .page-work .case:hover{
    transform:translate3d(0,-5px,0);
    border-color:rgba(201,165,90,.24);
  }
}

.jmx-kiro-feature{
  position:relative;
  overflow:clip;
}
.jmx-kiro-feature::before{
  content:"KIRO";
  position:absolute;
  right:-.06em;
  top:.06em;
  color:rgba(243,239,230,.028);
  font-size:clamp(10rem,30vw,30rem);
  line-height:.7;
  letter-spacing:-.08em;
  font-weight:700;
  pointer-events:none;
}
.kiro-cgi-stage{
  transform-style:preserve-3d;
  transform:
    perspective(1200px)
    rotateY(calc(var(--jmx-cinema-x) * 2deg))
    rotateX(calc(var(--jmx-cinema-y) * -1.5deg));
  transition:transform .24s ease-out;
}
.kiro-cgi-stage img{
  transform:translate3d(calc(var(--jmx-cinema-x) * 7px),calc(var(--jmx-cinema-y) * 6px),20px);
  transition:transform .24s ease-out;
}

.page-kiro .kiro-page-hero{
  min-height:calc(100svh - 76px);
  display:grid;
  align-items:center;
  overflow:clip;
}
.page-kiro .kiro-page-hero__grid{
  gap:clamp(2rem,7vw,8rem);
  align-items:center;
}
.page-kiro .kiro-page-hero__copy h1{
  font-size:clamp(4.2rem,8vw,8.4rem);
  line-height:.86;
  letter-spacing:-.07em;
  max-width:8.5ch;
}
.page-kiro .kiro-page-portrait{
  position:relative;
  overflow:hidden;
  min-height:680px;
  border:1px solid rgba(243,239,230,.11);
  background:#09080C;
  transform-style:preserve-3d;
  transform:
    perspective(1300px)
    rotateY(calc(var(--jmx-cinema-x) * 2.7deg))
    rotateX(calc(var(--jmx-cinema-y) * -1.6deg));
  transition:transform .22s ease-out,border-color .3s ease;
}
.page-kiro .kiro-page-portrait:hover{border-color:rgba(201,165,90,.36)}
.page-kiro .kiro-page-portrait::before{
  content:"EXECUTIVE INTELLIGENCE";
  position:absolute;
  left:1.2rem;
  top:1.1rem;
  color:rgba(243,239,230,.25);
  font:700 .56rem/1 var(--jv-type-font-ui);
  letter-spacing:.15em;
  z-index:4;
}
.page-kiro .kiro-page-portrait::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(243,239,230,.065);
  pointer-events:none;
}
.page-kiro .kiro-page-portrait>img{
  width:min(82%,560px);
  max-height:78vh;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 44px 52px rgba(0,0,0,.46));
  transform:translate3d(calc(var(--jmx-cinema-x) * 9px),calc(var(--jmx-cinema-y) * 8px),38px);
  transition:transform .22s ease-out,opacity .24s ease;
}
.page-kiro .kiro-look-switcher{
  z-index:6;
}
.page-kiro .kiro-operating-map{
  position:relative;
}
.page-kiro .kiro-operating-map::before{
  content:"SYSTEM MAP / PUBLIC VIEW";
  position:absolute;
  right:0;
  top:-2.15rem;
  color:rgba(243,239,230,.28);
  font:700 .56rem/1 var(--jv-type-font-ui);
  letter-spacing:.14em;
}

.page-hero{
  position:relative;
  overflow:clip;
}
.page-hero::after{
  content:"";
  position:absolute;
  left:max(24px,calc((100vw - 1200px)/2));
  right:max(24px,calc((100vw - 1200px)/2));
  bottom:0;
  height:1px;
  background:rgba(243,239,230,.08);
}
.page-hero h1{
  text-wrap:balance;
}
.section-head h2,
.jmx-section-heading,
.band h2{
  text-wrap:balance;
}

.jmx-cinema-corner{
  position:fixed;
  z-index:40;
  right:18px;
  bottom:18px;
  pointer-events:none;
  color:rgba(243,239,230,.28);
  font:700 .52rem/1 var(--jv-type-font-ui);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.jmx-cinema-corner::before{
  content:"JMOREX / ";
  color:#C9A55A;
}

@media(max-width:980px){
  body.page::before{background-size:1100px 620px}
  .page-home .hero{min-height:auto;padding-top:3rem}
  .page-home .hero-grid{grid-template-columns:1fr;gap:3rem}
  .page-home .hero h1{font-size:clamp(4rem,15vw,7rem)}
  .jmx-cinema-stage{min-height:620px;transform:none}
  .jmx-cinema-kiro{width:min(77%,480px)}
  .jmx-cinema-manifesto__grid{grid-template-columns:1fr}
  .jmx-cinema-manifesto__aside{position:static}
  .jmx-cinema-manifesto__band{grid-template-columns:48px 1fr}
  .jmx-cinema-manifesto__band p{grid-column:2}
  .page-kiro .kiro-page-portrait{min-height:640px;transform:none}
}
@media(max-width:640px){
  body.page::before{opacity:.24}
  body.page::after{opacity:.08}
  .page-home .hero h1{font-size:clamp(3.7rem,17vw,5.4rem)}
  .page-home .jmx-hero-copy::before{font-size:9.5rem;top:-.28em}
  .jmx-cinema-stage{min-height:540px}
  .jmx-cinema-data{left:1rem;bottom:5.8rem;max-width:150px}
  .jmx-cinema-coordinate{right:1rem}
  .jmx-cinema-manifesto{padding:5.5rem 0}
  .jmx-cinema-manifesto__statement{font-size:clamp(3.4rem,17vw,5.5rem)}
  .jmx-cinema-manifesto__band{min-height:116px;grid-template-columns:38px 1fr}
  .jmx-cinema-manifesto__band h3{font-size:1.5rem}
  .page-kiro .kiro-page-hero__copy h1{font-size:clamp(3.8rem,16vw,5.7rem)}
  .page-kiro .kiro-page-portrait{min-height:560px}
  .jmx-cinema-corner{display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-jmx-cinema-reveal]{opacity:1;transform:none;transition:none}
  .jmx-cinema-stage,
  .kiro-cgi-stage,
  .page-kiro .kiro-page-portrait,
  .jmx-cinema-kiro,
  .kiro-cgi-stage img,
  .page-kiro .kiro-page-portrait>img{transform:none!important;transition:none!important}
  .jmx-transform-card,
  .page-services .engagement-grid .card,
  .page-work .case,
  .page-about .card,
  .page-trust .card{transition:none}
}


/* KIRO EDITORIAL WARDROBE GALLERY */
.kiro-editorial-gallery{
  padding:clamp(5rem,10vw,10rem) 0;
  border-block:1px solid rgba(243,239,230,.08);
  overflow:clip;
}
.kiro-editorial-gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:rgba(243,239,230,.08);
  border:1px solid rgba(243,239,230,.08);
}
.kiro-editorial-look{
  position:relative;
  margin:0;
  min-width:0;
  background:#09080C;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .32s var(--jmx-cinema-ease),background-color .32s ease;
}
.kiro-editorial-look::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(243,239,230,.055);
  pointer-events:none;
  z-index:2;
}
.kiro-editorial-look img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:426/640;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.9) contrast(1.03);
  transform:scale(1.01) translateZ(18px);
  transition:transform .42s var(--jmx-cinema-ease),filter .32s ease;
}
.kiro-editorial-look figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  padding:1.2rem 1rem 1.05rem;
  background:#0A090D;
  border-top:1px solid rgba(243,239,230,.08);
}
.kiro-editorial-look figcaption span{
  display:block;
  color:#C9A55A;
  font:700 .54rem/1 var(--jv-type-font-ui);
  letter-spacing:.13em;
}
.kiro-editorial-look figcaption b{
  display:block;
  margin-top:.45rem;
  color:#F3EFE6;
  font-size:.82rem;
  font-weight:500;
}
@media(hover:hover) and (pointer:fine){
  .kiro-editorial-look:hover{transform:translateY(-7px);background:#0C0A0E}
  .kiro-editorial-look:hover img{transform:scale(1.035) translateZ(28px);filter:saturate(1) contrast(1.04)}
}
@media(max-width:900px){.kiro-editorial-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){
  .kiro-editorial-gallery__grid{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    background:transparent;
    border:0;
    padding-right:10vw;
  }
  .kiro-editorial-gallery__grid::-webkit-scrollbar{display:none}
  .kiro-editorial-look{
    flex:0 0 82vw;
    scroll-snap-align:start;
    border:1px solid rgba(243,239,230,.08);
  }
  .kiro-editorial-look img{max-height:68vh;object-fit:contain}
}
@media(prefers-reduced-motion:reduce){.kiro-editorial-look,.kiro-editorial-look img{transition:none!important;transform:none!important}}


/* JMOREX CINEMATIC EXPERIENCE V3 — SHOWMANSHIP WITHOUT THEME-PARK UI */

.jmx-stage-controls{
  position:absolute;
  z-index:12;
  left:7%;
  top:18%;
  display:flex;
  gap:6px;
  transform:translateZ(130px);
}
.jmx-stage-controls button{
  width:34px;height:34px;
  border:1px solid rgba(243,239,230,.14);
  background:#09080C;
  color:rgba(243,239,230,.45);
  font:700 .55rem/1 var(--jv-type-font-ui);
  letter-spacing:.08em;
  cursor:pointer;
  transition:border-color .22s ease,color .22s ease,transform .22s var(--jmx-cinema-ease);
}
.jmx-stage-controls button[aria-pressed="true"]{
  color:#E8C880;
  border-color:rgba(201,165,90,.7);
  transform:translateY(-3px);
}
.jmx-stage-controls button:focus-visible{outline:2px solid #E8C880;outline-offset:3px}

.jmx-story-reel{
  padding:clamp(6rem,11vw,11rem) 0;
  border-block:1px solid rgba(243,239,230,.08);
  overflow:clip;
}
.jmx-story-reel__head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:clamp(2rem,7vw,8rem);
  align-items:end;
  margin-bottom:clamp(2rem,5vw,4.5rem);
}
.jmx-story-reel__stage{
  position:relative;
  border:1px solid rgba(243,239,230,.12);
  background:#09080C;
  min-height:620px;
  transform-style:preserve-3d;
  transform:
    perspective(1400px)
    rotateX(calc(var(--jmx-cinema-y) * -1.2deg))
    rotateY(calc(var(--jmx-cinema-x) * 1.7deg));
  transition:transform .22s ease-out,border-color .3s ease;
}
.jmx-story-reel__stage:hover{border-color:rgba(201,165,90,.28)}
.jmx-story-reel__stage::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(243,239,230,.055);
  pointer-events:none;
}
.jmx-story-reel__nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid rgba(243,239,230,.1);
}
.jmx-story-reel__nav button{
  appearance:none;
  min-height:72px;
  border:0;
  border-right:1px solid rgba(243,239,230,.08);
  background:#0A090D;
  color:rgba(243,239,230,.55);
  text-align:left;
  padding:1rem 1.1rem;
  cursor:pointer;
  font:650 .68rem/1.25 var(--jv-type-font-ui);
  letter-spacing:.04em;
  transition:background-color .22s ease,color .22s ease;
}
.jmx-story-reel__nav button:last-child{border-right:0}
.jmx-story-reel__nav button span{
  display:block;
  color:rgba(201,165,90,.65);
  font-size:.52rem;
  letter-spacing:.14em;
  margin-bottom:.48rem;
}
.jmx-story-reel__nav button[aria-pressed="true"]{
  color:#F3EFE6;
  background:#100E12;
}
.jmx-story-reel__nav button[aria-pressed="true"] span{color:#E8C880}
.jmx-story-reel__nav button:focus-visible{outline:2px solid #E8C880;outline-offset:-3px}

.jmx-story-reel__screen{
  position:relative;
  min-height:470px;
  outline:none;
  overflow:hidden;
}
.jmx-story-reel__screen:focus-visible{box-shadow:inset 0 0 0 2px #E8C880}
.jmx-reel-scene{
  position:absolute;
  inset:0;
  padding:clamp(2rem,5vw,5rem);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  grid-template-rows:auto auto 1fr;
  gap:1rem clamp(2rem,5vw,5rem);
  align-items:end;
  opacity:0;
  transform:translate3d(32px,0,0);
  pointer-events:none;
  transition:opacity .38s var(--jmx-cinema-ease),transform .38s var(--jmx-cinema-ease);
}
.jmx-reel-scene.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.jmx-reel-scene__index{
  grid-column:1/-1;
  color:#C9A55A;
  font:700 .56rem/1 var(--jv-type-font-ui);
  letter-spacing:.16em;
}
.jmx-reel-scene__eyebrow{
  grid-column:1;
  margin:0;
  color:rgba(243,239,230,.42);
  font:650 .64rem/1 var(--jv-type-font-ui);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.jmx-reel-scene h3{
  grid-column:1;
  margin:0;
  max-width:9.5ch;
  color:#F3EFE6;
  font-size:clamp(3rem,6vw,7rem);
  line-height:.9;
  letter-spacing:-.06em;
  align-self:start;
}
.jmx-reel-scene>p:last-of-type{
  grid-column:1;
  max-width:54ch;
  margin:0;
  color:rgba(243,239,230,.62);
  line-height:1.7;
  align-self:end;
}
.jmx-reel-diagram{
  grid-column:2;
  grid-row:2/5;
  position:relative;
  min-height:310px;
  align-self:stretch;
  border:1px solid rgba(243,239,230,.08);
  background:#0B0A0E;
  overflow:hidden;
}
.jmx-reel-diagram::before,
.jmx-reel-diagram::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:rgba(243,239,230,.12);
  transform:translate(-50%,-50%);
}
.jmx-reel-diagram::before{width:1px;height:82%}
.jmx-reel-diagram::after{height:1px;width:82%}
.jmx-reel-diagram i{
  position:absolute;
  width:54px;height:54px;
  border:1px solid rgba(201,165,90,.42);
  background:#0A090D;
}
.jmx-reel-diagram i:nth-child(1){left:12%;top:14%}
.jmx-reel-diagram i:nth-child(2){right:12%;top:18%}
.jmx-reel-diagram i:nth-child(3){left:18%;bottom:12%}
.jmx-reel-diagram i:nth-child(4){right:14%;bottom:14%}
.jmx-reel-diagram--friction i:nth-child(1){transform:rotate(8deg)}
.jmx-reel-diagram--friction i:nth-child(2){transform:rotate(-13deg)}
.jmx-reel-diagram--friction i:nth-child(3){transform:rotate(-5deg)}
.jmx-reel-diagram--friction i:nth-child(4){transform:rotate(15deg)}
.jmx-reel-diagram--system i{border-color:rgba(243,239,230,.22)}
.jmx-reel-diagram--system b,
.jmx-reel-diagram--connected b{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  padding:.75rem 1rem;
  border:1px solid rgba(201,165,90,.62);
  background:#0A090D;
  color:#E8C880;
  font:700 .65rem/1 var(--jv-type-font-ui);
  letter-spacing:.12em;
}
.jmx-reel-diagram--build span{
  position:absolute;
  left:50%;top:50%;
  width:118px;height:118px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(201,165,90,.7);
  background:#0C0B0F;
}
.jmx-reel-diagram--connected i{
  width:44px;height:44px;
  border-color:rgba(201,165,90,.7);
}
.jmx-story-reel__footer{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid rgba(243,239,230,.08);
  padding:.85rem 1rem;
  color:rgba(243,239,230,.34);
  font:650 .55rem/1 var(--jv-type-font-ui);
  letter-spacing:.12em;
}

.jmx-chapter-rail{
  position:fixed;
  z-index:48;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:10px 8px;
  border-left:1px solid rgba(243,239,230,.08);
}
.jmx-chapter-rail a{
  display:grid;
  grid-template-columns:18px auto;
  gap:6px;
  align-items:center;
  color:rgba(243,239,230,.24);
  text-decoration:none;
  font:650 .52rem/1 var(--jv-type-font-ui);
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .22s ease,transform .22s ease;
}
.jmx-chapter-rail a span:first-child{color:rgba(201,165,90,.5)}
.jmx-chapter-rail a b{font-weight:650;opacity:0;transform:translateX(-5px);transition:opacity .22s ease,transform .22s ease}
.jmx-chapter-rail a[aria-current="true"]{color:#F3EFE6;transform:translateX(2px)}
.jmx-chapter-rail a[aria-current="true"] b,
.jmx-chapter-rail a:hover b,
.jmx-chapter-rail a:focus-visible b{opacity:1;transform:none}
.jmx-chapter-rail a:focus-visible{outline:1px solid #E8C880;outline-offset:3px}

.jmx-kiro-shortcut{
  margin:1rem 0 0;
  color:rgba(243,239,230,.32);
  font:600 .58rem/1.4 var(--jv-type-font-ui);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.jmx-kiro-shortcut kbd{
  display:inline-grid;
  place-items:center;
  min-width:24px;height:24px;
  margin-right:.45rem;
  border:1px solid rgba(201,165,90,.38);
  color:#E8C880;
  background:#0A090D;
  font:700 .56rem/1 var(--jv-type-font-ui);
}

@media(max-width:980px){
  .jmx-story-reel__head{grid-template-columns:1fr}
  .jmx-story-reel__stage{min-height:670px;transform:none}
  .jmx-reel-scene{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;align-content:start}
  .jmx-reel-scene__index,.jmx-reel-scene__eyebrow,.jmx-reel-scene h3,.jmx-reel-scene>p:last-of-type,.jmx-reel-diagram{grid-column:1}
  .jmx-reel-diagram{grid-row:auto;min-height:240px;margin-top:1rem}
  .jmx-chapter-rail{display:none}
}
@media(max-width:640px){
  .jmx-stage-controls{left:1rem;top:4.4rem}
  .jmx-story-reel{padding:5rem 0}
  .jmx-story-reel__nav{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .jmx-story-reel__nav::-webkit-scrollbar{display:none}
  .jmx-story-reel__nav button{flex:0 0 45%;scroll-snap-align:start}
  .jmx-story-reel__stage{min-height:735px}
  .jmx-story-reel__screen{min-height:595px}
  .jmx-reel-scene{padding:1.45rem}
  .jmx-reel-scene h3{font-size:clamp(2.8rem,14vw,4.8rem)}
  .jmx-reel-diagram{min-height:220px}
  .jmx-story-reel__footer span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  .jmx-reel-scene,
  .jmx-stage-controls button,
  .jmx-chapter-rail a,
  .jmx-chapter-rail a b{transition:none!important}
  .jmx-story-reel__stage{transform:none!important}
}

@media(max-width:1180px){.jmx-chapter-rail{display:none}}

/* JMOREX public visual cadence — reference-informed, privacy-first */
:root{--jmx-reel-progress:0}

.jmx-public-process,.jmx-start-selector,.jmx-faq-showcase{padding:clamp(6rem,10vw,10rem) 0;border-top:1px solid rgba(215,217,220,.08)}
.jmx-public-process__grid,.jmx-start-selector__grid,.jmx-faq-showcase__grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,6vw,7rem);align-items:center}
.jmx-public-process__visual,.jmx-start-selector__visual,.jmx-faq-showcase__visual{position:relative;min-height:clamp(520px,58vw,720px);overflow:hidden;border:1px solid rgba(201,165,90,.2);background:radial-gradient(circle at 50% 32%,rgba(201,165,90,.12),transparent 34%),#09080d;isolation:isolate}
.jmx-public-process__visual::before,.jmx-start-selector__visual::before,.jmx-faq-showcase__visual::before{content:"";position:absolute;inset:1rem;border:1px solid rgba(243,239,230,.06);pointer-events:none;z-index:2}
.jmx-public-process__visual img,.jmx-start-selector__visual img,.jmx-faq-showcase__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.92) contrast(1.03)}
.jmx-visual-caption{position:absolute;z-index:3;left:1.2rem;right:1.2rem;bottom:1.2rem;padding:1rem 1.05rem;background:rgba(7,6,10,.82);backdrop-filter:blur(10px);border-left:1px solid var(--gold)}
.jmx-visual-caption span,.jmx-visual-caption b{display:block}.jmx-visual-caption span{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}.jmx-visual-caption b{margin-top:.4rem;font-size:.95rem;font-weight:500}
.jmx-process-list{list-style:none;margin:2.2rem 0 0;padding:0;border-bottom:1px solid rgba(215,217,220,.12)}
.jmx-process-list li{display:grid;grid-template-columns:54px 1fr;gap:1rem;padding:1.25rem 0;border-top:1px solid rgba(215,217,220,.12)}
.jmx-process-list>li>span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--gold)}
.jmx-process-list h3{margin:0 0 .35rem;font-size:1.1rem;font-weight:500}.jmx-process-list p{margin:0;color:var(--muted);line-height:1.62;max-width:58ch}

.jmx-start-selector__grid{grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr)}
.jmx-start-options{display:grid;gap:.65rem;margin-top:2rem}
.jmx-start-options button{width:100%;min-height:58px;padding:.9rem 1rem;border:1px solid rgba(215,217,220,.16);background:rgba(255,255,255,.015);color:var(--ink);text-align:left;font:500 .92rem/1.35 var(--jv-type-font-ui);cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.jmx-start-options button:hover,.jmx-start-options button:focus-visible{border-color:rgba(201,165,90,.6)}
.jmx-start-options button[aria-pressed="true"]{border-color:var(--gold);background:rgba(201,165,90,.08);color:var(--gold2)}
.jmx-start-answer{margin-top:1rem;padding:1.25rem 1.35rem;border:1px solid rgba(201,165,90,.22);background:linear-gradient(135deg,rgba(201,165,90,.08),rgba(255,255,255,.015))}
.jmx-start-answer>span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.jmx-start-answer h3{margin:.65rem 0 .55rem;font-size:1.45rem}.jmx-start-answer p{margin:0 0 1rem;color:var(--muted);line-height:1.65}

.jmx-faq-list{margin-top:2rem;border-bottom:1px solid rgba(215,217,220,.12)}
.jmx-faq-list details{border-top:1px solid rgba(215,217,220,.12)}
.jmx-faq-list summary{position:relative;display:flex;align-items:center;min-height:62px;padding:.9rem 2.25rem .9rem 0;cursor:pointer;list-style:none;font-size:1rem;font-weight:500}
.jmx-faq-list summary::-webkit-details-marker{display:none}.jmx-faq-list summary::after{content:"+";position:absolute;right:.15rem;color:var(--gold);font-size:1.15rem}.jmx-faq-list details[open] summary::after{content:"−"}
.jmx-faq-list details p{margin:0;padding:0 2.5rem 1.25rem 0;color:var(--muted);line-height:1.68;max-width:62ch}
.jmx-trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:3rem;border-top:1px solid rgba(215,217,220,.12);border-bottom:1px solid rgba(215,217,220,.12)}
.jmx-trust-strip span{padding:1.1rem 1rem;border-right:1px solid rgba(215,217,220,.12);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;text-align:center;color:rgba(243,239,230,.68)}.jmx-trust-strip span:last-child{border-right:0}

.jmx-reel-director{position:absolute;z-index:9;top:88px;right:18px;display:grid;grid-template-columns:58px minmax(0,1fr);gap:.7rem;align-items:center;width:min(240px,32%);padding:.55rem .65rem;border-left:1px solid rgba(201,165,90,.55);background:rgba(9,8,12,.86);pointer-events:none}
.jmx-reel-director img{display:block;width:58px;height:76px;object-fit:cover;object-position:center top;filter:saturate(.9) contrast(1.03);transition:opacity .18s ease}.jmx-reel-director span{min-width:0}.jmx-reel-director b,.jmx-reel-director i{display:block;font-family:var(--jv-type-font-ui);font-style:normal;text-transform:uppercase}.jmx-reel-director b{color:#E8C880;font-size:.56rem;letter-spacing:.11em;line-height:1.4}.jmx-reel-director i{margin-top:.35rem;color:rgba(243,239,230,.38);font-size:.48rem;letter-spacing:.12em}
.jmx-story-reel.is-scroll-directed{min-height:330vh;padding-bottom:10vh;overflow:visible}.jmx-story-reel.is-scroll-directed .jmx-story-reel__head{margin-bottom:2rem}.jmx-story-reel.is-scroll-directed .jmx-story-reel__stage{position:sticky;top:96px;min-height:min(700px,calc(100svh - 118px));height:min(700px,calc(100svh - 118px));max-height:700px}.jmx-story-reel.is-scroll-directed .jmx-story-reel__screen{min-height:calc(100% - 118px);height:calc(100% - 118px)}.jmx-story-reel.is-scroll-directed .jmx-story-reel__stage::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#C9A55A;transform:scaleX(var(--jmx-reel-progress));transform-origin:left center;opacity:.72;pointer-events:none}

@media(max-width:980px){.jmx-public-process__grid,.jmx-start-selector__grid,.jmx-faq-showcase__grid{grid-template-columns:1fr}.jmx-start-selector__visual{order:-1}.jmx-public-process__visual,.jmx-start-selector__visual,.jmx-faq-showcase__visual{min-height:560px;max-width:560px;width:100%;margin-inline:auto}.jmx-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.jmx-trust-strip span:nth-child(2){border-right:0}.jmx-trust-strip span:nth-child(-n+2){border-bottom:1px solid rgba(215,217,220,.12)}.jmx-story-reel.is-scroll-directed{min-height:0;padding-bottom:clamp(6rem,11vw,11rem);overflow:clip}.jmx-story-reel.is-scroll-directed .jmx-story-reel__stage{position:relative;top:auto;height:auto;max-height:none;min-height:670px}.jmx-story-reel.is-scroll-directed .jmx-story-reel__screen{height:auto;min-height:470px}.jmx-reel-director{top:84px;right:12px;width:190px;grid-template-columns:48px minmax(0,1fr)}.jmx-reel-director img{width:48px;height:64px}}
@media(max-width:640px){.jmx-public-process,.jmx-start-selector,.jmx-faq-showcase{padding:4.75rem 0}.jmx-public-process__visual,.jmx-start-selector__visual,.jmx-faq-showcase__visual{min-height:460px}.jmx-process-list li{grid-template-columns:40px 1fr}.jmx-trust-strip{grid-template-columns:1fr}.jmx-trust-strip span{border-right:0;border-bottom:1px solid rgba(215,217,220,.12)}.jmx-trust-strip span:last-child{border-bottom:0}.jmx-reel-director{display:none}}
@media(prefers-reduced-motion:reduce){.jmx-story-reel.is-scroll-directed{min-height:0!important;padding-bottom:clamp(6rem,11vw,11rem)!important}.jmx-story-reel.is-scroll-directed .jmx-story-reel__stage{position:relative!important;top:auto!important;height:auto!important;max-height:none!important}.jmx-reel-director img{transition:none!important}}
