/* Build 22 — mobile viewport/Journey compression pass.
   Goal: each interactive station keeps its action and handoff visible in one portrait viewport.
   Desktop remains untouched; proof/cases may still scroll. */
@media(max-width:760px){
  .header{height:60px!important;padding:0 14px!important;backdrop-filter:none!important}
  .brand-word{width:142px!important;max-width:47vw!important}
  .brand-mark{width:23px!important;height:38px!important}
  .motion-toggle{padding:8px 10px!important;font-size:8px!important;letter-spacing:.11em!important}

  .stage{min-height:100svh!important;padding:72px 16px 34px!important;align-items:start!important}
  .stage-inner{width:100%!important}
  .stage-tag{font-size:8px!important;letter-spacing:.18em!important;margin-bottom:10px!important}
  .stage h1,.stage h2{line-height:1!important;letter-spacing:-.042em!important}
  .stage h2{font-size:clamp(30px,8.8vw,40px)!important}
  .receive{top:66px!important;width:8px!important;height:8px!important}
  .handoff{bottom:14px!important;width:9px!important;height:9px!important}
  .handoff::after{top:8px!important;height:26px!important}

  /* 01 / Hero — keep headline, controls, hub and final handoff inside the first screen. */
  .hero{padding-top:72px!important}
  .hero .stage-inner{grid-template-columns:1fr!important;gap:4px!important;align-content:start!important}
  .hero-copy{padding-top:0!important;max-width:100%!important}
  .hero h1{font-size:clamp(39px,11.4vw,49px)!important;max-width:9.6em!important}
  .hero-system{height:clamp(350px,49svh,410px)!important;min-height:0!important;margin-top:2px!important}
  .hub{width:clamp(174px,47vw,205px)!important;left:50%!important;top:51%!important}
  .hub-state{top:calc(50% + 111px)!important;font-size:8px!important}
  .choice-row{grid-template-columns:repeat(2,100px)!important;gap:10px!important;margin-top:10px!important}
  .system-node{width:100px!important;height:100px!important;padding:10px!important}
  .system-node::before{inset:7px!important}
  .system-node .tiny{font-size:7px!important;margin-bottom:4px!important}
  .system-node .label{font-size:12px!important;line-height:1.15!important}

  /* 02 / Orientation — three compact entry states, no vertical card stack. */
  .orientation .stage-inner{min-height:0!important;display:grid!important;align-content:center!important;place-items:stretch!important;height:calc(100svh - 106px)!important}
  .triad{grid-template-columns:1fr!important;gap:9px!important;max-width:430px!important;margin:auto!important;width:100%!important}
  .verb-node{aspect-ratio:auto!important;min-height:88px!important;border-radius:22px!important;padding:10px 18px!important}
  .verb-node::before{inset:9px!important;border-radius:15px!important}
  .verb-node::after{right:17px!important;width:7px!important;height:7px!important}
  .verb-node span{font-size:clamp(23px,7vw,30px)!important}

  /* 03 / Perspectives — dedicated compact mobile geometry. */
  .perspective-heading{position:relative!important;top:auto!important;margin:0!important;font-size:clamp(30px,8.8vw,39px)!important;max-width:10.5em!important}
  .perspective-map{height:clamp(430px,56svh,500px)!important;margin:10px auto 0!important;max-width:430px!important}
  .perspective-node{width:clamp(76px,21.5vw,90px)!important;padding:8px!important}
  .perspective-node strong{font-size:11px!important;line-height:1.08!important}
  .perspective-node small{font-size:7px!important;letter-spacing:.12em!important}
  .perspective-center{width:clamp(104px,29vw,120px)!important;top:50%!important}
  .perspective-center span{font-size:9px!important;letter-spacing:.12em!important;line-height:1.32!important}
  .perspective-center b{font-size:7px!important;margin-bottom:4px!important}
  .perspective-node:nth-of-type(1){--x:24%!important;--y:11%!important}
  .perspective-node:nth-of-type(2){--x:76%!important;--y:24%!important}
  .perspective-node:nth-of-type(3){--x:18%!important;--y:47%!important}
  .perspective-node:nth-of-type(4){--x:82%!important;--y:66%!important}
  .perspective-node:nth-of-type(5){--x:30%!important;--y:84%!important}

  /* 04 / Synthesis — smaller bulb stage with the loader still readable. */
  .synthesis .stage-inner{min-height:0!important;height:calc(100svh - 106px)!important;align-content:center!important}
  .synthesis h2{max-width:10em!important}
  .bulb-loader{width:clamp(270px,70vw,310px)!important;margin-top:14px!important}
  .bulb-loader img{width:31%!important}
  .loader-readout{bottom:13%!important;font-size:7px!important;gap:6px!important}
  .loader-readout b{font-size:22px!important;min-width:54px!important}
  .loader-readout span{min-width:58px!important}
  .loader-action{bottom:1%!important;padding:8px 12px!important;font-size:9px!important}
  .loader-states span{font-size:7px!important}

  /* 05 / Realisation — keep headline + whole workpiece + outgoing hub in view. */
  .realisation .stage-inner{grid-template-columns:1fr!important;gap:4px!important}
  .realisation h2{font-size:clamp(30px,8.6vw,39px)!important;max-width:10.8em!important}
  .workpiece{height:clamp(390px,51svh,445px)!important;margin-top:0!important}
  .work-core{width:min(310px,84%)!important;top:50%!important;border-radius:24px!important}
  .module{width:106px!important;height:68px!important;border-radius:17px!important;font-size:10px!important}
  .work-heart{width:66px!important}
  .m1{left:0!important;top:10%!important}.m2{right:0!important;top:13%!important}
  .m3{left:1%!important;bottom:12%!important}.m4{right:0!important;bottom:10%!important}
  .work-output{width:92px!important;bottom:-1%!important;font-size:10px!important}
  .work-status{font-size:7px!important;letter-spacing:.14em!important}

  /* 06 / Proof is intentionally scrollable, but substantially denser. */
  .proof{padding-bottom:36px!important}
  .proof-head{display:block!important;margin-bottom:16px!important}
  .proof-head h2{font-size:clamp(30px,8.8vw,39px)!important}
  .proof-note{margin-top:10px!important;font-size:11px!important;line-height:1.45!important;max-width:34em!important}
  .proof-map{min-height:930px!important;padding-bottom:118px!important}
  .case-grid{gap:12px!important}
  .case{grid-template-columns:1fr!important;min-height:250px!important;border-radius:22px!important;padding:12px 12px 17px!important}
  .case-visual{height:145px!important;border-radius:15px!important}
  .case h3{font-size:24px!important;margin:12px 6px 2px!important}
  .case small{margin:0 6px!important;font-size:8px!important}
  .proof-hub{width:96px!important}

  /* 07 / Ready state — all key content visible at once. */
  .final .stage-inner{min-height:0!important;height:calc(100svh - 106px)!important;align-content:center!important}
  .final h2{font-size:clamp(32px,9.3vw,42px)!important;max-width:9em!important}
  .final-bulb{width:clamp(260px,68vw,300px)!important;margin-top:18px!important}
  .ready-label{bottom:10%!important;font-size:7px!important}

  /* Contact: keep modal typography proportionate to mobile. */
  .contact-panel{padding:78px 18px 28px!important;overflow:auto!important}
  .contact-panel h2{font-size:clamp(34px,9.5vw,44px)!important;line-height:1!important}
}

/* Short portrait phones: shave another layer of vertical space without changing the concept. */
@media(max-width:760px) and (max-height:760px){
  .header{height:56px!important}
  .brand-word{width:132px!important}.brand-mark{width:21px!important;height:35px!important}
  .stage{padding:64px 14px 27px!important}
  .receive{top:58px!important}.handoff{bottom:10px!important}
  .stage h2{font-size:clamp(28px,8.2vw,36px)!important}.stage-tag{margin-bottom:7px!important}
  .hero{padding-top:64px!important}.hero h1{font-size:clamp(36px,10.7vw,45px)!important}
  .hero-system{height:clamp(320px,47svh,365px)!important}
  .hub{width:170px!important}.hub-state{top:calc(50% + 101px)!important}
  .choice-row{grid-template-columns:repeat(2,92px)!important}.system-node{width:92px!important;height:92px!important}
  .orientation .stage-inner,.synthesis .stage-inner,.final .stage-inner{height:calc(100svh - 91px)!important}
  .verb-node{min-height:78px!important}.verb-node span{font-size:22px!important}
  .perspective-heading{font-size:30px!important}.perspective-map{height:405px!important;margin-top:5px!important}
  .perspective-node{width:72px!important}.perspective-center{width:100px!important}
  .bulb-loader{width:250px!important;margin-top:8px!important}
  .realisation h2{font-size:29px!important}.workpiece{height:365px!important}
  .work-core{width:min(286px,82%)!important}.module{width:96px!important;height:62px!important}.work-output{width:84px!important}
  .final-bulb{width:240px!important;margin-top:10px!important}
}

/* === BUILD 29 — construction labels + first real results cases === */
.work-card small,.case-info small,.case-deeper,.case-story .story-line b,.case-open{font-size:12px}
.case-story{display:grid;gap:10px;margin-top:16px}
.case-story .story-line{padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(7,21,34,.42);color:#cdd7dd;line-height:1.45;font-size:14px}
.case-story .story-line b{display:block;color:var(--gold2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;font-size:10px}
.case-open{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:11px 15px;border-radius:999px;border:1px solid rgba(43,183,255,.26);background:rgba(6,17,29,.56);text-decoration:none;color:#dbe2e6;letter-spacing:.09em;text-transform:uppercase;font-size:10px}
.case-open:hover,.case-open:focus-visible{outline:none;border-color:rgba(43,183,255,.6);box-shadow:0 0 20px rgba(43,183,255,.08)}
.case small{font-size:11px;line-height:1.3;color:#9ab0bc;display:block;max-width:16ch;margin:8px auto 0}
.case h3{margin-bottom:0}
@media (max-width:760px){
  .case-story .story-line{font-size:13px;padding:9px 11px}
  .case-open{width:100%;justify-content:center}
}