/* BUILD 25 — VISUAL SYSTEM PASS
   Work order:
   1. Lock Stage 04 blue/gold bulb layers to one shared geometry and reveal gold bottom-to-top.
   2. Promote system/status typography so interface language is a visible part of the brand.
   3. Give 02 / YOUR CHOICE stronger presence and restrained architectural glow.
   4. Increase spacing between the two hero route nodes on every breakpoint.
   5. Preserve journey logic, ambient network, content and routing unchanged. */

/* Shared mark geometry: BOTH colour layers live in the same box. */
#stage4Next .bulb-mark-stack{
  position:absolute;left:50%;top:50%;z-index:4;
  width:31%;aspect-ratio:300.0903 / 474.17859;
  transform:translate(-50%,-50%) scale(var(--mark-scale));
  transform-origin:50% 50%;pointer-events:none;
  will-change:transform;
}
#stage4Next .bulb-mark-stack img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:contain!important;transform:none!important;transform-origin:50% 50%!important;
  margin:0!important;padding:0!important;
}
#stage4Next .bulb-mark-stack img.bulb-blue-base{
  z-index:1!important;opacity:1;filter:none!important;
}
#stage4Next .bulb-mark-stack img.bulb-gold-fill{
  z-index:2!important;opacity:1!important;filter:none!important;
  clip-path:inset(var(--gold-top) 0 0 0)!important;
  will-change:clip-path;
}
#stage4Next.ready .bulb-mark-stack img.bulb-blue-base,
#stage4Next.ready:hover .bulb-mark-stack img.bulb-blue-base,
#stage4Next.ready:focus-visible .bulb-mark-stack img.bulb-blue-base,
#stage4Next.ready:active .bulb-mark-stack img.bulb-blue-base{opacity:0!important;transform:none!important}
#stage4Next.ready .bulb-mark-stack img.bulb-gold-fill,
#stage4Next.ready:hover .bulb-mark-stack img.bulb-gold-fill,
#stage4Next.ready:focus-visible .bulb-mark-stack img.bulb-gold-fill,
#stage4Next.ready:active .bulb-mark-stack img.bulb-gold-fill{clip-path:inset(0)!important;transform:none!important}
#stage4Next .bulb-mark-stack img.bulb-halo-copy{display:none!important}

/* Interface typography is not footnote typography. */
.stage-tag{
  font-size:clamp(12px,.92vw,14px)!important;
  letter-spacing:.20em!important;font-weight:600!important;
  color:var(--gold2)!important;
  text-shadow:0 0 15px rgba(229,189,105,.13);
}
.stage-tag.blue{color:var(--blue)!important;text-shadow:0 0 15px rgba(43,183,255,.13)}
.orientation .stage-tag{
  font-size:clamp(13px,1.05vw,15px)!important;
  letter-spacing:.23em!important;
  text-shadow:0 0 20px rgba(229,189,105,.23);
}
.system-state,.hub-state,.work-status,.ready-label{
  font-size:11px!important;letter-spacing:.18em!important;
  font-weight:540!important;
}
.loader-states span{font-size:11px!important;letter-spacing:.20em!important;font-weight:600!important}
.loader-readout{font-size:10.5px!important;letter-spacing:.17em!important}
.loader-readout b{font-size:32px!important}
.system-node .tiny{font-size:10px!important;letter-spacing:.17em!important;font-weight:600!important}
.perspective-center b{font-size:10px!important;font-weight:600!important}
.work-card small{font-size:9.5px!important;font-weight:600!important}

/* 02 / YOUR CHOICE — keep the architectural circles, add restrained luminous depth. */
.verb-node{
  border-color:rgba(129,173,198,.13)!important;
  box-shadow:0 0 0 1px rgba(43,183,255,.018),0 0 38px rgba(43,183,255,.025),inset 0 0 26px rgba(43,183,255,.018);
}
.verb-node::before{
  border-color:rgba(229,189,105,.34)!important;
  filter:drop-shadow(0 0 5px rgba(229,189,105,.10));
}
.verb-node::after{
  box-shadow:0 0 10px rgba(229,189,105,.88),0 0 24px rgba(229,189,105,.34)!important;
}
.verb-node:hover,.verb-node:focus-visible{
  filter:brightness(1.16)!important;
  box-shadow:0 0 0 1px rgba(43,183,255,.06),0 0 52px rgba(43,183,255,.07),0 0 34px rgba(229,189,105,.045),inset 0 0 32px rgba(43,183,255,.025)!important;
}
.verb-node.selected{
  border-color:rgba(229,189,105,.60)!important;
  box-shadow:0 0 0 1px rgba(229,189,105,.08),0 0 58px rgba(229,189,105,.13),inset 0 0 30px rgba(229,189,105,.03)!important;
}

/* Hero nodes need distinct territories, not touching halos. */
.hero .choice-row{gap:44px!important}

@media(max-width:760px){
  #stage4Next .bulb-mark-stack{width:34%}
  .stage-tag{font-size:11px!important;letter-spacing:.18em!important;margin-bottom:11px!important}
  .orientation .stage-tag{font-size:12px!important;letter-spacing:.22em!important;text-shadow:0 0 18px rgba(229,189,105,.22)}
  .hub-state,.work-status,.ready-label{font-size:9.5px!important;letter-spacing:.16em!important}
  .loader-states span{font-size:9px!important;letter-spacing:.18em!important}
  .loader-readout{font-size:9px!important;gap:7px!important}
  .loader-readout b{font-size:27px!important;min-width:60px!important}
  .system-node .tiny{font-size:8.5px!important}
  .perspective-center b{font-size:8.5px!important}
  .hero .choice-row{gap:28px!important}
}
@media(max-width:760px) and (max-height:760px){
  .stage-tag{font-size:10.5px!important;margin-bottom:8px!important}
  .orientation .stage-tag{font-size:11.5px!important}
  .hub-state,.work-status,.ready-label{font-size:9px!important}
  .hero .choice-row{gap:24px!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}
}