#ll-loader .llq-loading {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 16px;
      margin: 13px 0 3px;
      color: rgba(245,245,245,.76);
      font-family: "Martian Mono", ui-monospace, monospace;
      font-size: 10px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .34em;
      text-indent: .34em;
      white-space: nowrap;
      opacity: 1 !important;
      overflow: visible;
    }
    #ll-loader:not(.llq-hidden) .llq-loading {
      opacity: 1 !important;
      visibility: visible !important;
    }
    #ll-loader .llq-loading-word {
      position: relative;
      display: inline-block;
      color: rgba(245,245,245,.42);
    }
    #ll-loader .llq-loading-word::after {
      content: "LOADING";
      position: absolute;
      inset: 0;
      color: rgb(var(--lq-c,245,245,245));
      text-shadow: 0 0 9px rgba(var(--lq-c,245,245,245),.74);
      clip-path: inset(0 100% 0 0);
      animation: llqLoadingScan 1.65s cubic-bezier(.45,0,.55,1) infinite;
    }
    #ll-loader .llq-loading-dots {
      display: inline-flex;
      gap: 4px;
      text-indent: 0;
    }
    #ll-loader .llq-loading-dots i {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgb(var(--lq-c,245,245,245));
      box-shadow: 0 0 7px rgba(var(--lq-c,245,245,245),.75);
      opacity: .2;
      animation: llqLoadingDot 1.05s ease-in-out infinite;
    }
    #ll-loader .llq-loading-dots i:nth-child(2) { animation-delay: .14s; }
    #ll-loader .llq-loading-dots i:nth-child(3) { animation-delay: .28s; }
    #ll-loader .llq-line {
      opacity: 1 !important;
    }
    #ll-loader .llq-line::after {
      width: 44% !important;
      animation: llqContinuousSweep .92s linear infinite !important;
      animation-delay: 0s !important;
      will-change: transform;
    }
    @keyframes llqLoadingScan {
      0% { clip-path: inset(0 100% 0 0); opacity: .3; }
      42%,62% { clip-path: inset(0 0 0 0); opacity: 1; }
      100% { clip-path: inset(0 0 0 100%); opacity: .3; }
    }
    @keyframes llqLoadingDot {
      0%,100% { opacity: .18; transform: scale(.72); }
      45% { opacity: 1; transform: scale(1); }
    }
    @keyframes llqContinuousSweep {
      from { transform: translateX(-115%); }
      to { transform: translateX(325%); }
    }
    @media (max-width: 600px) {
      #ll-loader .llq-loading { font-size: 8px; letter-spacing: .28em; }
    }
    @media (prefers-reduced-motion: reduce) {
      #ll-loader .llq-loading-word::after,
      #ll-loader .llq-loading-dots i,
      #ll-loader .llq-line::after { animation: none !important; }
      #ll-loader .llq-loading-word::after { clip-path: none; opacity: .85; }
      #ll-loader .llq-loading-dots i { opacity: .65; transform: none; }
      #ll-loader .llq-line::after { transform: none; width: 100% !important; }
    }
    

/* =========================================================================
   LumiLas — "Prismatic Field" section backgrounds (2026-07)
   Replaces the old fixed cyan+magenta twin-bloom / conic-beam section look
   with a modern, restrained spectral field: a soft aurora that walks the
   FULL brand spectrum from section to section, a fine technical grid keyed
   to the console voice, and a whisper-thin spectral seam at each section top.
   Dark-themed throughout; motion is slow and subtle; reduced-motion safe.
   ========================================================================= */

/* Per-section spectral pair (--sa primary, --sb secondary). Default = a
   tasteful cyan->violet; each home section below rotates further along the
   spectrum so the page reads as one continuous prism sweep. */
.band{ --sa: var(--spectrum-1); --sb: var(--spectrum-3); }

/* Generic rotation for sub-pages whose bands ARE siblings */
.band:nth-of-type(6n+1){ --sa:#00E8FF; --sb:#8A7BFF; }
.band:nth-of-type(6n+2){ --sa:#8A7BFF; --sb:#B44BF8; }
.band:nth-of-type(6n+3){ --sa:#B44BF8; --sb:#FC03FB; }
.band:nth-of-type(6n+4){ --sa:#FC03FB; --sb:#FFA94D; }
.band:nth-of-type(6n+5){ --sa:#FFA94D; --sb:#48F06E; }
.band:nth-of-type(6n+6){ --sa:#48F06E; --sb:#00E8FF; }

/* Explicit home walk (bands here are not siblings, so key off their classes) */
.band.ll-numbers{ --sa:#00E8FF; --sb:#8A7BFF; }   /* counters   : cyan  -> violet */
.band.pdx       { --sa:#B44BF8; --sb:#FC03FB; }    /* prod design: purple-> magenta */
.band.tlx       { --sa:#FC03FB; --sb:#FFA94D; }    /* tools      : magenta-> amber */
.band.band-raised{ --sa:#FFA94D; --sb:#48F06E; }   /* works      : amber -> green */
.band.thx       { --sa:#48F06E; --sb:#00E8FF; }    /* theatre    : green -> cyan */

/* --- Aurora (the light) : replaces the twin-bloom, recoloured to the pair --- */
.band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(56% 66% at 16% 14%, color-mix(in srgb, var(--sa) 32%, transparent), transparent 70%),
    radial-gradient(62% 70% at 84% 88%, color-mix(in srgb, var(--sb) 28%, transparent), transparent 74%),
    radial-gradient(42% 52% at 62% 46%, color-mix(in srgb, var(--sb) 11%, transparent), transparent 78%) !important;
  animation: llpf-drift 34s var(--ease-out) infinite alternate !important;
}

/* --- Technical grid (the precision) : replaces the conic beam sweep --- */
.band::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(245,245,245,.040) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,245,245,.040) 1px, transparent 1px) !important;
  background-size: 74px 74px, 74px 74px !important;
  -webkit-mask-image: radial-gradient(135% 108% at 50% -8%, #000 0%, rgba(0,0,0,.35) 40%, transparent 66%);
          mask-image: radial-gradient(135% 108% at 50% -8%, #000 0%, rgba(0,0,0,.35) 40%, transparent 66%);
  transform:none !important; animation:none !important; inset:0 !important;
}

/* --- Spectral seam : a whisper-thin full-spectrum rule at each section top ---
   (border-image so it never clobbers existing band background-image layers,
    e.g. the works/gallery edge-fade "pools of darkness") */
.band{
  border-top: 1px solid transparent;
  border-image-source: linear-gradient(90deg,
    transparent 2%,
    rgba(0,232,255,.50) 12%, rgba(79,168,255,.50) 24%, rgba(138,123,255,.50) 36%,
    rgba(180,75,248,.50) 48%, rgba(252,3,251,.50) 58%, rgba(255,122,110,.50) 70%,
    rgba(255,169,77,.50) 82%, rgba(255,235,59,.45) 92%,
    transparent 100%);
  border-image-slice: 1;
}

/* --- CTA band : the spectrum "finale" — a centred prism bloom --- */
.band.cta-band{ --sa:#00E8FF; --sb:#FC03FB; }
.band.cta-band::before{
  background:
    radial-gradient(64% 74% at 50% 120%, color-mix(in srgb, var(--sb) 30%, transparent), transparent 70%),
    radial-gradient(52% 62% at 20% -10%, color-mix(in srgb, var(--sa) 24%, transparent), transparent 72%),
    radial-gradient(52% 62% at 80% -10%, color-mix(in srgb, #FFEB3B 15%, transparent), transparent 72%) !important;
}


/* =========================================================================
   PATTERN VARIANTS — vary glow geometry + grid + drift per section so
   neighbours never read as identical (colours still come from --sa/--sb).
   Home sections sit alone in their wrappers → keyed by class under body.home;
   sub-page sibling bands use nth-of-type. Home map: numbers=P1, services=P2,
   pdx=P3, tools=P4, works=P5, theatre=P6, cta=finale (all adjacent differ).
   ========================================================================= */

/* keep the counters on the base pattern (P1) even though nth would say otherwise */
body.home .band.ll-numbers::before{
  background:
    radial-gradient(56% 66% at 16% 14%, color-mix(in srgb, var(--sa) 32%, transparent), transparent 70%),
    radial-gradient(62% 70% at 84% 88%, color-mix(in srgb, var(--sb) 28%, transparent), transparent 74%),
    radial-gradient(42% 52% at 62% 46%, color-mix(in srgb, var(--sb) 11%, transparent), transparent 78%) !important;
  animation: llpf-drift 34s var(--ease-out) infinite alternate !important;
}
body.home .band.ll-numbers::after{
  background-image:
    linear-gradient(to right,  rgba(245,245,245,.040) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,245,245,.040) 1px, transparent 1px) !important;
  background-size: 74px 74px, 74px 74px !important;
  -webkit-mask-image: radial-gradient(135% 108% at 50% -8%, #000 0%, rgba(0,0,0,.35) 40%, transparent 66%) !important;
          mask-image: radial-gradient(135% 108% at 50% -8%, #000 0%, rgba(0,0,0,.35) 40%, transparent 66%) !important;
}

/* P2 — top ribbon of light + dot grid */
body.home .band:not(.band-deep):not(.band-raised):not(.cta-band):not(.page-hero)::before,
body:not(.home) .band[data-llpf="2"]::before{
  background:
    radial-gradient(92% 46% at 28% -10%, color-mix(in srgb, var(--sa) 30%, transparent), transparent 66%),
    radial-gradient(84% 44% at 78% -6%,  color-mix(in srgb, var(--sb) 26%, transparent), transparent 66%),
    radial-gradient(52% 42% at 50% 114%, color-mix(in srgb, var(--sa) 8%,  transparent), transparent 72%) !important;
  animation: llpf-drift-x 30s var(--ease-out) infinite alternate !important;
}
body.home .band:not(.band-deep):not(.band-raised):not(.cta-band):not(.page-hero)::after,
body:not(.home) .band[data-llpf="2"]::after{
  background-image: radial-gradient(rgba(245,245,245,.055) 1px, transparent 1.5px) !important;
  background-size: 26px 26px !important;
  -webkit-mask-image: radial-gradient(150% 100% at 50% -6%, #000 0%, rgba(0,0,0,.3) 42%, transparent 66%) !important;
          mask-image: radial-gradient(150% 100% at 50% -6%, #000 0%, rgba(0,0,0,.3) 42%, transparent 66%) !important;
}

/* P3 — glow anchored to the right + vertical rule lines */
body.home .band.pdx::before,
body:not(.home) .band[data-llpf="3"]::before{
  background:
    radial-gradient(56% 98% at 100% 42%, color-mix(in srgb, var(--sb) 30%, transparent), transparent 62%),
    radial-gradient(42% 72% at 90% 90%,  color-mix(in srgb, var(--sa) 16%, transparent), transparent 70%),
    radial-gradient(30% 50% at 6% 22%,   color-mix(in srgb, var(--sa) 8%,  transparent), transparent 72%) !important;
  animation: llpf-drift-y 33s var(--ease-out) infinite alternate !important;
}
body.home .band.pdx::after,
body:not(.home) .band[data-llpf="3"]::after{
  background-image: linear-gradient(to right, rgba(245,245,245,.045) 1px, transparent 1px) !important;
  background-size: 58px 58px !important;
  -webkit-mask-image: radial-gradient(120% 130% at 100% 50%, #000 0%, rgba(0,0,0,.3) 46%, transparent 72%) !important;
          mask-image: radial-gradient(120% 130% at 100% 50%, #000 0%, rgba(0,0,0,.3) 46%, transparent 72%) !important;
}

/* P4 — twin stage beams from the top + wide grid */
body.home .band.tlx::before,
body:not(.home) .band[data-llpf="4"]::before{
  background:
    radial-gradient(15% 120% at 32% -22%, color-mix(in srgb, var(--sa) 28%, transparent), transparent 60%),
    radial-gradient(15% 120% at 68% -22%, color-mix(in srgb, var(--sb) 26%, transparent), transparent 60%),
    radial-gradient(46% 44% at 50% 64%,   color-mix(in srgb, var(--sb) 7%,  transparent), transparent 74%) !important;
  animation: llpf-drift 36s var(--ease-out) infinite alternate !important;
}
body.home .band.tlx::after,
body:not(.home) .band[data-llpf="4"]::after{
  background-image:
    linear-gradient(to right,  rgba(245,245,245,.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,245,245,.038) 1px, transparent 1px) !important;
  background-size: 96px 96px, 96px 96px !important;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 0%, rgba(0,0,0,.34) 44%, transparent 72%) !important;
          mask-image: radial-gradient(120% 120% at 50% 50%, #000 0%, rgba(0,0,0,.34) 44%, transparent 72%) !important;
}

/* P5 — bloom rising from the bottom-centre + large grid */
body.home .band.band-raised::before,
body:not(.home) .band[data-llpf="5"]::before{
  background:
    radial-gradient(96% 74% at 50% 122%, color-mix(in srgb, var(--sb) 28%, transparent), transparent 68%),
    radial-gradient(52% 56% at 12% 8%,   color-mix(in srgb, var(--sa) 18%, transparent), transparent 66%),
    radial-gradient(40% 46% at 92% 18%,  color-mix(in srgb, var(--sa) 8%,  transparent), transparent 72%) !important;
  animation: llpf-drift-up 32s var(--ease-out) infinite alternate !important;
}
body.home .band.band-raised::after,
body:not(.home) .band[data-llpf="5"]::after{
  background-image:
    linear-gradient(to right,  rgba(245,245,245,.036) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,245,245,.036) 1px, transparent 1px) !important;
  background-size: 110px 110px, 110px 110px !important;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 110%, #000 0%, rgba(0,0,0,.32) 42%, transparent 66%) !important;
          mask-image: radial-gradient(130% 120% at 50% 110%, #000 0%, rgba(0,0,0,.32) 42%, transparent 66%) !important;
}

/* P6 — diagonal wash (opposite axis) + diagonal hatch */
body.home .band.thx::before,
body:not(.home) .band[data-llpf="6"]::before{
  background:
    radial-gradient(64% 74% at 90% 8%,  color-mix(in srgb, var(--sa) 30%, transparent), transparent 68%),
    radial-gradient(64% 74% at 10% 92%, color-mix(in srgb, var(--sb) 26%, transparent), transparent 70%),
    radial-gradient(40% 40% at 50% 50%, color-mix(in srgb, var(--sb) 8%,  transparent), transparent 76%) !important;
  animation: llpf-drift-rev 34s var(--ease-out) infinite alternate !important;
}
body.home .band.thx::after,
body:not(.home) .band[data-llpf="6"]::after{
  background-image: repeating-linear-gradient(45deg, rgba(245,245,245,.040) 0 1px, transparent 1px 80px) !important;
  background-size: auto !important;
  -webkit-mask-image: radial-gradient(140% 120% at 50% 0%, #000 0%, rgba(0,0,0,.32) 44%, transparent 70%) !important;
          mask-image: radial-gradient(140% 120% at 50% 0%, #000 0%, rgba(0,0,0,.32) 44%, transparent 70%) !important;
}

@keyframes llpf-drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(1.2%,-1.0%,0) scale(1.04)} }
@keyframes llpf-drift-x{ from{transform:translate3d(-1.8%,0,0) scale(1.02)} to{transform:translate3d(1.8%,-0.4%,0) scale(1.04)} }
@keyframes llpf-drift-y{ from{transform:translate3d(0,-1.6%,0) scale(1.02)} to{transform:translate3d(0.6%,1.6%,0) scale(1.04)} }
@keyframes llpf-drift-up{ from{transform:translate3d(0,1.4%,0) scale(1.0)} to{transform:translate3d(0,-1.2%,0) scale(1.05)} }
@keyframes llpf-drift-rev{ from{transform:translate3d(1.4%,-1.0%,0) scale(1.04)} to{transform:translate3d(-0.4%,0.4%,0) scale(1.0)} }
@media (prefers-reduced-motion: reduce){ .band::before{ animation:none !important; } }

/* =========================================================================
   Sub-page HEROES — same Prismatic Field language (keeps each page's
   service-coloured bloom pair, adds the console grid + spectral seam).
   ========================================================================= */
.page-hero{ --sa: var(--bloom-a, var(--spectrum-1)); --sb: var(--bloom-b, var(--spectrum-3)); }

/* technical grid, faded from the top — matches the section grid */
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(245,245,245,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,245,245,.030) 1px, transparent 1px);
  background-size: 74px 74px, 74px 74px;
  -webkit-mask-image: radial-gradient(140% 120% at 50% 2%, #000 0%, rgba(0,0,0,.3) 44%, transparent 70%);
          mask-image: radial-gradient(140% 120% at 50% 2%, #000 0%, rgba(0,0,0,.3) 44%, transparent 70%);
}

/* spectral seam at the hero's lower edge (transition into the page body) */
.page-hero{
  border-bottom: 1px solid transparent;
  border-image-source: linear-gradient(90deg,
    transparent 2%,
    rgba(0,232,255,.50) 12%, rgba(79,168,255,.50) 24%, rgba(138,123,255,.50) 36%,
    rgba(180,75,248,.50) 48%, rgba(252,3,251,.50) 58%, rgba(255,122,110,.50) 70%,
    rgba(255,169,77,.50) 82%, rgba(255,235,59,.45) 92%,
    transparent 100%);
  border-image-slice: 1;
}



    html:not(.ll-hero-ready) .ll-hero3,
    html:not(.ll-hero-ready) .ll-hero3 *,
    html:not(.ll-hero-ready) #ll-cinema-stage,
    html:not(.ll-hero-ready) #ll-cinema-stage *,
    html:not(.ll-hero-ready) [data-ll-service-hero],
    html:not(.ll-hero-ready) [data-ll-service-hero] *,
    html:not(.ll-hero-ready) .llao-hero,
    html:not(.ll-hero-ready) .llao-hero *,
    html:not(.ll-hero-ready) .page-hero,
    html:not(.ll-hero-ready) .page-hero * {
      animation-play-state: paused !important;
    }