/* ============================================================
   INSTOPCO · BRIEFING ROOM
   Immersive landing shell. Tactical OPSCTR chrome (dark, mono,
   amber/cyan/red) framing warm INSTOPCO briefs.

   Two placement modes (matches the OPSCTR "SEAT EDIT" tool):
     rect    — translate(x,y) + rotate(r) + size(w,h)   [most props]
     corners — 4-corner matrix3d homography             [the screen]
   ============================================================ */

.br-root {
  --amber:#F5A524; --amber-hi:#FFC861;
  --cyan:#22D3EE;  --red:#EF4444; --blue:#5AA9FF; --lime:#A3E635;
  --bg0:#000; --bg1:#0A0E10; --bg2:#111518; --bg3:#171B1E;
  --line:#2A3035; --line-soft:#1E2428;
  --fg1:#D9D7D2; --fg2:#8A8680; --fg3:#5C5A55;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;

  position:fixed; inset:0; overflow:hidden;
  background:var(--bg0); color:var(--fg1);
  font-family:var(--mono); -webkit-font-smoothing:antialiased;
  z-index:0; user-select:none;
}
.br-root *{ box-sizing:border-box; }

.br-root [data-beam="amber"]{ --beam:var(--amber); }
.br-root [data-beam="teal"] { --beam:var(--cyan); }
.br-root [data-beam="blue"] { --beam:var(--blue); }
.br-root [data-beam="red"]  { --beam:var(--red); }

/* ---------- camera + stage ---------- */
.br-camera{
  position:absolute; inset:0; transform-origin:0 0;
  transition:transform 720ms cubic-bezier(.65,0,.2,1); will-change:transform;
}
.br-stage{ position:absolute; top:0; left:0; transition:filter 1.9s ease; }
.br-plate{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; filter:saturate(.92) contrast(1.02);
}
.br-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.br-props{ position:absolute; inset:0; }

/* ============================================================
   BOOT — the room ignites: black → light SOURCED from the practical
   lamps (red pools rise linearly) → white work lights → full. The I·S·O
   titles fire in sequence and resolve into the printed signs as light lifts.
   .br-booting starts in the markup so the room paints black from frame 1.
   ============================================================ */
@property --boot-b   { syntax:"<number>"; inherits:true; initial-value:0.05; }  /* stage brightness   */
@property --boot-red { syntax:"<number>"; inherits:true; initial-value:0;    }  /* red-lamp intensity */
@property --boot-wht { syntax:"<number>"; inherits:true; initial-value:0;    }  /* white-light intensity */

.br-root.br-booting{ transition:--boot-b 1.1s ease, --boot-red 1.5s linear, --boot-wht .6s ease; }
.br-root.br-booting .br-stage{ filter:brightness(var(--boot-b)) saturate(calc(.45 + var(--boot-b)*.55)) contrast(1.03); }
.br-root.br-booting .br-props{ pointer-events:none; }   /* no mis-clicks mid-reveal */
.br-chrome{ transition:opacity 1.4s ease; }
.br-root.br-booting .br-chrome{ opacity:0; }

/* light layer — sibling of the (darkened) stage so it is NOT dimmed; JS sizes it to the stage.
   Pools are screen-blended over the scene and anchored to each lamp's position in the plate. */
.br-boot{ position:fixed; pointer-events:none; z-index:38; overflow:hidden; }
.br-boot-red, .br-boot-white{ position:absolute; inset:0; mix-blend-mode:screen; will-change:opacity; }
.br-boot-red{ opacity:var(--boot-red); }     /* background pools set by JS from the light-marker props */
.br-boot-white{ opacity:var(--boot-wht); }
/* per-title ignition — the word itself, in amber glow text (font close to the sign), fit to the
   title box; fires on cue, then fades as the printed sign lights up beneath it ("resolves") */
@property --rs{ syntax:"<number>"; inherits:true; initial-value:1; }   /* resolve scale */
.br-boot-ig{ position:absolute; display:flex; align-items:center; justify-content:center; overflow:visible;
  opacity:0; transition:opacity .5s ease; will-change:opacity; }
.br-ig-text{ white-space:nowrap; line-height:1; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.005em; color:#000; transform-origin:center center;
  transform:scaleX(calc(var(--fitx,1) * var(--rs))) scaleY(var(--rs));
  transition:color .42s ease, text-shadow .42s ease, --rs .42s ease;
  text-shadow:0 0 3px rgba(255,190,92,.95), 0 0 12px rgba(255,150,50,.82), 0 0 30px rgba(255,122,32,.55), 0 0 66px rgba(255,110,26,.4); }
.br-ig-text.is-stencil{ font-family:'Saira Stencil One',sans-serif; font-weight:400; }
.br-root.ig-intelligence .br-boot-ig[data-word="intelligence"],
.br-root.ig-strategy     .br-boot-ig[data-word="strategy"],
.br-root.ig-operations   .br-boot-ig[data-word="operations"],
.br-root.ig-company      .br-boot-ig[data-word="company"]{ opacity:1; }
/* resolve — words shrink toward the printed letter size, colormatch to the sign, and fade */
.br-root.br-resolve{ --rs:.86; }
.br-root.br-resolve .br-boot-ig{ opacity:0; transition:opacity .5s ease; }
.br-root.br-resolve .br-ig-text{ color:#e6edf3; text-shadow:0 0 2px rgba(228,238,246,.55), 0 0 9px rgba(198,218,240,.32); }
.br-root.br-resolve .br-ig-text.is-stencil{ color:#eae5d1; }

/* ---------- shimmer: a subtle vertical light arc sweeps the sign row every ~20s (post-boot) ---------- */
@property --sweepx{ syntax:"<length>"; inherits:true; initial-value:0px; }
.br-shimmer{ position:fixed; z-index:37; pointer-events:none; animation:br-shimmer-sweep 20s linear infinite; }
.br-shimmer-slot{ position:absolute; overflow:hidden; }   /* each clipped strictly to one mapped title box */
.br-shimmer-arc{ position:absolute; top:-30%; bottom:-30%; left:0; width:60px; mix-blend-mode:screen;
  background:linear-gradient(90deg, transparent, rgba(255,246,224,.4) 42%, rgba(255,250,236,.62) 50%, rgba(255,246,224,.4) 58%, transparent);
  filter:blur(3px); transform:translateX(calc(var(--sweepx,0px) - var(--slot-x,0px))); }
@keyframes br-shimmer-sweep{      /* one glint crosses the band in ~1.8s, then rests off-screen for the rest of the loop */
  0%   { --sweepx:-60px; }
  9%   { --sweepx:var(--sweep,0px); }
  100% { --sweepx:var(--sweep,0px); }
}
@media (prefers-reduced-motion:reduce){ .br-shimmer{ display:none; } }

/* ---------- page-hit fly-in intro: muted autoplay over black, hands off to the boot ---------- */
.br-intro{ position:fixed; inset:0; z-index:120; background:#000; opacity:1; transition:opacity .55s ease; }
.br-intro.is-gone{ opacity:0; pointer-events:none; }
.br-intro-vid{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.br-intro-logo{ position:absolute; top:50%; left:50%; width:min(34vw,320px); height:auto; transform:translate(-50%,-50%);
  z-index:3; opacity:0; pointer-events:none; filter:brightness(1.7) drop-shadow(0 0 18px rgba(0,0,0,.6));
  animation:br-logoflash 1.15s ease-out forwards; }
@keyframes br-logoflash{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(1.05); }
  13%  { opacity:1; }
  52%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}
.br-intro-skip{ position:absolute; bottom:22px; right:22px; z-index:2; padding:8px 15px; cursor:pointer;
  font:600 12px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.82); background:rgba(10,14,20,.42); border:1px solid rgba(255,255,255,.28); border-radius:3px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background .2s, color .2s; }
.br-intro-skip:hover{ background:rgba(10,14,20,.72); color:#fff; }
@media (prefers-reduced-motion:reduce){ .br-intro{ display:none !important; } }

/* ambient-sound toggle (appears once ambient arms on first gesture) */
.br-amb-wrap{ position:fixed; bottom:16px; right:18px; z-index:44; width:112px; display:flex; flex-direction:column; gap:8px; }
.br-amb{ display:block; width:100%; padding:7px 12px; cursor:pointer; text-align:center;
  font:600 10px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.16em; color:rgba(232,236,224,.72);
  background:rgba(10,14,20,.5); border:1px solid rgba(255,255,255,.16); border-radius:3px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:color .2s, border-color .2s, opacity .2s; }
.br-amb:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.br-amb.is-muted{ opacity:.62; }
.br-amb-vol{ width:100%; height:4px; margin:0; -webkit-appearance:none; appearance:none; cursor:pointer;
  background:rgba(255,255,255,.2); border-radius:3px; outline:none; }
.br-amb-vol::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%;
  background:rgba(236,240,228,.92); border:1px solid rgba(0,0,0,.35); box-shadow:0 1px 3px rgba(0,0,0,.4); cursor:pointer; }
.br-amb-vol::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:rgba(236,240,228,.92); border:none; box-shadow:0 1px 3px rgba(0,0,0,.4); cursor:pointer; }

/* mobile: nudge portrait phones to landscape — the room is built wide */
.br-rotate{ display:none; }
@keyframes br-rotate-hint{ 0%,30%{ transform:rotate(0); } 60%,100%{ transform:rotate(-90deg); } }
@media (orientation:portrait) and (max-width:900px){
  .br-rotate{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    background:#0a0b0d; color:#e6e9df; text-align:center; padding:34px; }
  .br-rotate-inner{ max-width:320px; }
  .br-rotate-phone{ display:block; width:46px; height:78px; margin:0 auto 26px; position:relative;
    border:3px solid rgba(230,233,223,.85); border-radius:9px; animation:br-rotate-hint 2.6s ease-in-out infinite; }
  .br-rotate-phone::after{ content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
    width:14px; height:2px; border-radius:2px; background:rgba(230,233,223,.6); }
  .br-rotate-title{ font-family:'Barlow Condensed','Barlow',sans-serif; font-weight:700; font-size:26px;
    letter-spacing:.04em; text-transform:uppercase; margin:0 0 10px; color:#f4efdf; }
  .br-rotate-sub{ font-family:'Barlow',system-ui,sans-serif; font-size:14px; line-height:1.6; color:#9aa08e; margin:0; }
}

@media (prefers-reduced-motion:reduce){
  .br-root.br-booting{ transition-duration:1ms; }
  .br-stage,.br-chrome{ transition-duration:1ms; }
}

/* ---------- a placed prop ---------- */
.br-prop{
  position:absolute; top:0; left:0;
  container-type:size;           /* lets inner text scale with the box (cq units) */
  overflow:visible;              /* never clip — content may deform, per spec */
  will-change:transform; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.br-prop:focus-visible{ outline:none; }
/* decorative props (e.g. the draped flag): click-through in normal mode, still draggable in SEAT EDIT */
.br-prop.is-static{ pointer-events:none; cursor:default; }
.br-root.br-edit .br-prop.is-static{ pointer-events:auto; }

/* light-source markers — invisible in the live room, draggable glow dots in SEAT EDIT */
.br-prop--light{ opacity:0; }
.br-root.br-edit .br-prop--light{ opacity:1; }
.br-light{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.br-light::before{ content:""; width:54%; height:54%; border-radius:50%; }
.br-light[data-color="red"]::before{   background:#ff4a2a; box-shadow:0 0 10px 3px rgba(255,74,42,.9), 0 0 46px 18px rgba(255,50,26,.55); }
.br-light[data-color="white"]::before{ background:#fff2d8; box-shadow:0 0 10px 3px rgba(255,242,216,.9), 0 0 46px 18px rgba(255,238,210,.5); }
.br-light-tag{ position:absolute; top:108%; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono),monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg2);
  background:rgba(8,11,12,.72); padding:2px 6px; pointer-events:none; }

/* ignition-target markers — align each box over a sign's printed title in SEAT EDIT; invisible in the live room */
.br-prop--ignite{ opacity:0; }
.br-root.br-edit .br-prop--ignite{ opacity:1; }
.br-ignite{ position:absolute; inset:0; border:1px dashed rgba(245,165,36,.8); background:rgba(245,165,36,.16); }
.br-ignite-tag{ position:absolute; left:1px; top:0; font-family:var(--mono),monospace; font-size:9px;
  letter-spacing:.05em; text-transform:uppercase; color:#0a0d0f; background:rgba(245,165,36,.85); padding:0 3px; white-space:nowrap; pointer-events:none; }

.br-plc{
  width:100%; height:100%; overflow:visible;
  border:2px dashed color-mix(in srgb, var(--beam) 70%, transparent);
  background:linear-gradient(180deg, rgba(10,14,16,.55), rgba(10,14,16,.78));
  display:flex; flex-direction:column; gap:2cqh;
  align-items:center; justify-content:center; text-align:center; padding:6%;
  color:var(--fg1); transition:box-shadow .18s, background .18s, border-color .18s;
}
.br-plc-num  { font-size:min(30cqw,34cqh); font-weight:700; line-height:1; color:var(--beam); }
.br-plc-label{ font-size:min(11cqw,14cqh); letter-spacing:.12em; text-transform:uppercase; color:var(--fg2); }
.br-plc-kind { font-size:min(8cqw,10cqh);  letter-spacing:.2em;  text-transform:uppercase; color:var(--fg3); }

.br-prop.is-hot .br-plc,
.br-prop:focus-visible .br-plc{
  border-color:var(--beam);
  background:linear-gradient(180deg, rgba(10,14,16,.35), rgba(10,14,16,.62));
  box-shadow:0 0 0 1px var(--beam);
}
.br-prop.is-hot .br-plc-label{ color:var(--amber-hi); }
.br-prop--clipboard .br-plc, .br-prop--phone .br-plc{ border-style:solid; }

/* ---------- a pinned print (image dropped into a poster / cork-board slot) ---------- */
.br-pin{ position:relative; width:100%; height:100%; padding:4cqmin; background:#e9e2d0;
  box-shadow:0 8px 22px rgba(0,0,0,.55); }
.br-pin--thin{ padding:1.6cqmin; }   /* cork pics (photos / screencaps): 60% less white mat than an infographic poster */
.br-pin-shot{ width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.04) saturate(1.03) brightness(.96); }
.br-pin-tack{ position:absolute; top:-3.5cqmin; left:50%; width:11cqmin; height:11cqmin;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #ff9089, #b5271d 72%);
  box-shadow:0 2cqmin 3cqmin rgba(0,0,0,.5); }
.br-prop.is-hot .br-pin{ box-shadow:0 0 0 1px var(--beam), 0 8px 22px rgba(0,0,0,.55); }

/* a flag (rendered full-bleed, no mat) */
.br-flag{ width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); }

/* a transparent hotspot (e.g. the phone → Engage) — the plate shows through; only lights on hover */
.br-hotspot{ width:100%; height:100%; }
.br-prop.is-hot .br-hotspot{ box-shadow:inset 0 0 0 2px var(--beam); border-radius:6px; }

/* full-frame image when a filled slot is opened */
.br-brief-shot{ max-width:100%; max-height:100%; object-fit:contain; display:block; margin:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.6); }

/* a video playing at rest in a laptop / screen slot */
.br-vid-shot{ width:100%; height:100%; object-fit:cover; display:block; background:#05070a;
  filter:contrast(1.03) saturate(1.03) brightness(.98); }
/* a static screen showing a logo/idle image — contained on a dark screen, not cover-cropped */
.br-monitor-shot{ width:100%; height:100%; object-fit:contain; display:block; background:#05070a;
  padding:13%; filter:brightness(1.3); }
.br-prop.is-hot .br-monitor-shot{ box-shadow:0 0 0 1px var(--beam); }
.br-prop.is-hot .br-vid-shot{ box-shadow:0 0 0 1px var(--beam); }

/* a document lying in a clipboard / doc slot (full doc opens in the brief) */
.br-doc{ width:100%; height:100%; overflow:hidden; background:#ece6d6; color:#14170f;
  display:flex; flex-direction:column; gap:2cqmin; padding:7cqmin 6cqmin;
  box-shadow:0 6px 16px rgba(0,0,0,.55); }
.br-doc-tag{ font-family:var(--mono); font-size:min(9cqw,7.5cqh); letter-spacing:.16em; text-transform:uppercase; color:#9a6a1a; }
.br-doc-title{ font-family:var(--mono); font-weight:700; font-size:min(13cqw,10cqh); line-height:1.05; color:#14170f; }
.br-doc-fill{ flex:1; margin:1.5cqmin 0; background:repeating-linear-gradient(180deg,
  transparent 0 2.4cqmin, rgba(20,23,15,.16) 2.4cqmin 2.7cqmin); }
.br-doc-cta{ font-family:var(--mono); font-size:min(9cqw,7.5cqh); letter-spacing:.1em; text-transform:uppercase; color:#b5271d; }
.br-prop.is-hot .br-doc{ box-shadow:0 0 0 1px var(--beam), 0 6px 16px rgba(0,0,0,.55); }

/* a black VHS tape case (the OPSCTR deck plays full-screen when opened) */
.br-vhs{ width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column; padding:6cqmin;
  background:linear-gradient(158deg,#20201f 0%,#111112 55%,#08080a 100%);
  border-radius:1.5cqmin 1.5cqmin 3cqmin 3cqmin;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -9cqh 14cqh rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.6); }
.br-vhs-sticker{ background:#e7e2d2; color:#151513; border-radius:1cqmin; padding:4cqmin 5cqmin;
  display:flex; flex-direction:column; gap:1.5cqmin; box-shadow:0 1px 4px rgba(0,0,0,.55); }
.br-vhs-tag{ font-family:var(--mono); font-weight:700; font-size:min(8.5cqw,8cqh); letter-spacing:.16em; color:#8a1f14; }
.br-vhs-title{ font-family:var(--mono); font-weight:700; font-size:min(11cqw,9.5cqh); line-height:1.06; color:#151513; }
.br-vhs-hand{ font-family:var(--mono); font-size:min(7.5cqw,7cqh); letter-spacing:.06em; color:#6a675c; }
.br-vhs-base{ flex:1; display:flex; align-items:flex-end; justify-content:center; padding-bottom:1cqmin; }
.br-vhs-slot{ width:64%; height:9cqh; min-height:3px; background:#050506; border-top:1px solid rgba(255,255,255,.06);
  border-radius:1px; box-shadow:inset 0 3px 7px rgba(0,0,0,.85); }
.br-prop.is-hot .br-vhs{ box-shadow:0 0 0 1px rgba(236,236,230,.6), 0 6px 16px rgba(0,0,0,.6); }

/* ---------- a tattered field envelope pinned to the cork board (Message to Garcia) ---------- */
.br-env{
  position:relative; width:100%; height:100%; overflow:hidden; container-type:size;
  color:#3a2c14; font-family:'Courier New',var(--mono),monospace;
  background:
    radial-gradient(ellipse 30% 22% at 74% 80%, rgba(96,62,20,.24), transparent 62%),
    radial-gradient(circle at 20% 28%, rgba(78,50,16,.18), transparent 44%),
    linear-gradient(158deg, #d8c49a 0%, #ccb684 46%, #c1aa78 100%);
  box-shadow:inset 0 0 22px rgba(60,40,15,.42), 0 8px 18px rgba(0,0,0,.5);
  border:1px solid rgba(90,66,30,.5);
  /* torn edges */
  clip-path:polygon(2% 1.4%,13% 0.5%,31% 1.8%,52% 0.4%,71% 1.9%,89% 0.6%,98.8% 2.6%,98.4% 22%,99.5% 47%,98.3% 70%,99.4% 90%,97.8% 98.8%,78% 98.4%,55% 99.5%,33% 98.2%,12% 99.4%,1.6% 98%,0.7% 74%,1.7% 49%,0.5% 26%,0.9% 9%);
}
.br-env-flap{ position:absolute; left:0; right:0; top:0; height:30%; pointer-events:none;
  background:linear-gradient(180deg, rgba(120,88,42,.30), rgba(120,88,42,0)); border-bottom:1px solid rgba(84,58,24,.45); }
.br-env::after{ content:""; position:absolute; left:50%; top:29%; width:8cqmin; height:8cqmin; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle at 40% 34%, #8a6a2e, #493311 72%); box-shadow:0 1px 2px rgba(0,0,0,.5); }
.br-env-stamp{ position:absolute; top:6%; right:6%; transform:rotate(9deg); font-family:var(--mono),monospace;
  font-size:min(6.5cqw,5.5cqh); letter-spacing:.1em; color:rgba(150,34,26,.72);
  border:2px solid rgba(150,34,26,.55); border-radius:2px; padding:1.4cqmin 2.4cqmin; }
.br-env-title{ position:absolute; left:7%; right:7%; top:45%; text-align:center; text-transform:uppercase;
  font-family:'Courier New',var(--mono),monospace; font-weight:700; font-size:min(15cqw,12cqh); line-height:.96; letter-spacing:.02em; color:#332512; }
.br-env-sub{ position:absolute; left:7%; right:7%; bottom:7%; text-align:center; font-family:var(--mono),monospace;
  font-size:min(6.5cqw,5.5cqh); letter-spacing:.12em; color:rgba(66,48,20,.85); }
.br-env-tack{ position:absolute; top:-4%; left:50%; width:10cqmin; height:10cqmin; transform:translateX(-50%); z-index:3;
  border-radius:50%; background:radial-gradient(circle at 38% 32%, #ff9089, #b5271d 72%); box-shadow:0 2cqmin 3cqmin rgba(0,0,0,.5); }
.br-prop.is-hot .br-env{ box-shadow:inset 0 0 22px rgba(60,40,15,.42), 0 0 0 1px var(--beam), 0 0 30px -4px var(--beam), 0 8px 18px rgba(0,0,0,.5); }

/* ---------- a stenciled unit placard on the sandbag wall (Alpha Company) ---------- */
.br-placard{
  position:relative; width:100%; height:100%; container-type:size; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4cqh;
  background:
    radial-gradient(120% 90% at 32% 22%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(150% 120% at 72% 92%, rgba(0,0,0,.34), transparent 60%),
    linear-gradient(158deg, #4c5442 0%, #3e4636 52%, #343c2c 100%);
  border:.7cqmin solid #262d1e;
  box-shadow:inset 0 0 5cqmin rgba(0,0,0,.44), 0 6px 15px rgba(0,0,0,.5);
  font-family:'Saira Stencil One','Barlow Condensed',sans-serif; text-transform:uppercase; color:#e9e5d2;
}
.br-placard::after{ content:""; position:absolute; inset:5.5cqmin; border:.4cqmin solid rgba(233,229,210,.26); pointer-events:none; }
.br-placard-line{ line-height:.9; letter-spacing:.04em; text-shadow:0 1px 0 rgba(0,0,0,.4); z-index:1; }
.br-placard-line.l1{ font-size:min(30cqw,42cqh); }
.br-placard-line.l2{ font-size:min(19cqw,27cqh); letter-spacing:.02em; color:#dbd6c1; }
.br-placard-bolt{ position:absolute; width:2.4cqmin; height:2.4cqmin; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #9aa088, #2c3222 78%); box-shadow:0 .4cqmin .6cqmin rgba(0,0,0,.5); }
.br-placard-bolt.tl{ top:3cqmin; left:3cqmin; }  .br-placard-bolt.tr{ top:3cqmin; right:3cqmin; }
.br-placard-bolt.bl{ bottom:3cqmin; left:3cqmin; } .br-placard-bolt.br{ bottom:3cqmin; right:3cqmin; }

/* zoomed video panel: player + 1-of-N feed selector */
.br-vbrief{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#05070a; }
.br-vbrief-vid{ max-width:100%; max-height:100%; display:block; }
.br-vsel{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:0 12px; }
.br-vchip{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; color:var(--fg1); background:rgba(10,14,16,.72); border:1px solid var(--line);
  cursor:pointer; transition:border-color .15s, box-shadow .15s, color .15s; }
.br-vchip:hover{ border-color:var(--cyan); color:#fff; }
.br-vchip.is-on{ border-color:var(--cyan); color:#fff; box-shadow:0 0 0 1px var(--cyan), 0 0 18px -6px var(--cyan); }

/* ---------- projector screen (portal → the C2 Fabric) ---------- */
.br-screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 30%, #1a2024, #0a0d0f 80%);
  border:1px solid #3a4045; color:#cfe3ea;
}
/* the live site picture, projected onto the screen */
.br-screen-shot{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  object-fit:cover; object-position:50% 40%;
  filter:contrast(1.05) saturate(1.03) brightness(.9);
}
.br-screen::before{               /* CRT scan sweep */
  content:""; position:absolute; left:0; right:0; top:0; height:38%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(120,200,230,.12), transparent);
  animation:br-scan 5.5s linear infinite;
}
.br-screen::after{                /* scanlines */
  content:""; position:absolute; inset:0; z-index:2; opacity:.32; mix-blend-mode:overlay; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}
@keyframes br-scan{ from{ transform:translateY(-40%);} to{ transform:translateY(320%);} }

.br-screen-tag{                   /* ◉ LIVE indicator, top-left */
  position:absolute; top:14px; left:16px; z-index:3;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:#ff5b52; text-shadow:0 0 10px rgba(239,68,68,.55);
}
.br-screen-cap{                   /* caption, bottom, over a scrim */
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; flex-direction:column; gap:5px; padding:20px 20px 16px; text-align:left;
  background:linear-gradient(0deg, rgba(6,9,11,.94) 6%, rgba(6,9,11,.5) 52%, transparent);
}
.br-screen-kicker{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--cyan); }
.br-screen-title { font-size:26px; letter-spacing:.05em; font-weight:600; color:#eaf4f7; line-height:1.05; }
.br-screen-sub   { font-size:11px; letter-spacing:.2em;  text-transform:uppercase; color:var(--fg2); }
.br-root.br-hovering .br-screen-title{ color:var(--amber-hi); }
/* split screen: two panes side by side (site | film), each its own brief */
.br-screen--split{ display:grid; grid-template-columns:1fr 1fr; }
.br-pane{ position:relative; overflow:hidden; cursor:pointer; outline:0; min-width:0; }
.br-pane + .br-pane{ border-left:1px solid rgba(217,215,210,.28); }
.br-pane .br-screen-shot{ transition:filter .25s ease; }
.br-pane:hover .br-screen-shot, .br-pane:focus-visible .br-screen-shot{ filter:contrast(1.05) saturate(1.03) brightness(1.08); }
.br-pane .br-screen-cap{ padding:16px 14px 12px; }
.br-pane .br-screen-title{ font-size:20px; }
.br-pane[data-beam="teal"] .br-screen-tag{ color:var(--cyan); text-shadow:0 0 10px rgba(34,211,238,.55); }
.br-pane[data-beam="teal"]:hover .br-screen-title{ color:var(--cyan); }
.br-pane:focus-visible{ box-shadow:inset 0 0 0 2px var(--amber); }

/* ---------- dusty beam ---------- */
.br-beam{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease; mix-blend-mode:screen; z-index:3; }
.br-root.br-hovering .br-beam{ opacity:.9; }
.br-beam-cone{ position:absolute; inset:0; background:linear-gradient(180deg,
  color-mix(in srgb, var(--beam,#F5A524) 42%, transparent),
  color-mix(in srgb, var(--beam,#F5A524) 10%, transparent) 70%, transparent); }
.br-beam-dust{ position:absolute; inset:0; opacity:.7; animation:br-dust 7s linear infinite;
  background-image:
    radial-gradient(1.4px 1.4px at 30% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 60% 65%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 45% 20%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 75% 50%, rgba(255,255,255,.5), transparent); }
@keyframes br-dust{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-6%,4%,0);} }

/* ---------- chrome ---------- */
.br-chrome{
  position:fixed; top:0; left:0; right:0; height:46px; z-index:40;
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:linear-gradient(180deg, rgba(6,8,9,.92), rgba(6,8,9,.35) 70%, transparent);
  pointer-events:none;
}
.br-chrome > *{ pointer-events:auto; }
.br-brand{ display:flex; align-items:center; gap:12px; }
.br-brand-logo{ height:22px; width:auto; display:block; filter:brightness(1.35); }
.br-brand b{ font-weight:600; letter-spacing:.28em; color:var(--amber); font-size:14px; }
.br-brand span{ font-size:11px; letter-spacing:.24em; color:var(--fg2); text-transform:uppercase; }
.br-actions{ display:flex; gap:8px; }
.br-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg1); background:rgba(16,20,22,.6); border:1px solid var(--line);
  padding:7px 12px; cursor:pointer; text-decoration:none; line-height:1;
  transition:border-color .15s, color .15s, background .15s;
}
.br-btn:hover{ border-color:var(--amber); color:var(--amber-hi); }
.br-btn--cyan{ color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 45%,transparent); }
.br-btn--cyan:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ---------- manifest panel ---------- */
.br-manifest{
  position:fixed; top:46px; right:0; bottom:0; width:340px; max-width:86vw; z-index:35;
  background:rgba(8,11,12,.96); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; backdrop-filter:blur(8px);
}
.br-root.br-manifest-open .br-manifest{ transform:none; }
.br-manifest-brand{ padding:13px 16px 3px; }
.br-manifest-brand img{ height:17px; width:auto; display:block; opacity:.82; }
.br-manifest-head{ padding:10px 16px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.br-manifest-head b{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); font-weight:600; }
.br-manifest-head .cls{ font-size:9px; letter-spacing:.2em; color:var(--fg3); }
.br-manifest-close{ background:none; border:0; color:var(--fg2); font-size:15px; line-height:1; cursor:pointer; padding:2px 4px; margin-left:6px; }
.br-manifest-close:hover{ color:var(--amber); }
.br-manifest-list{ overflow:auto; padding:8px; display:flex; flex-direction:column; gap:2px; }
.br-mrow{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-left:2px solid var(--beam);
  color:var(--fg1); font-family:var(--mono); cursor:pointer; padding:10px 12px;
}
.br-mrow:hover, .br-mrow.is-hot{ background:var(--bg2); border-color:var(--line); border-left-color:var(--beam); }
.br-mrow-num{ color:var(--beam); font-size:12px; font-weight:700; min-width:22px; }
.br-mrow-main{ display:flex; flex-direction:column; gap:2px; }
.br-mrow-label{ font-size:12px; letter-spacing:.06em; }
.br-mrow-type{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg3); }

/* ---------- brief overlay ---------- */
.br-brief{ position:fixed; inset:0; z-index:40; display:none; opacity:0; transition:opacity .35s ease; background:#050708; }
.br-brief.is-open{ display:block; opacity:1; }
.br-brief-body{ position:absolute; inset:0; }
.br-brief-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#050708; }

/* ---------- projector power-on: lamp strike + warm-up as the signal locks ---------- */
.br-proj{ position:absolute; inset:0; overflow:hidden; background:#04070a; }
.br-proj-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#04070a; }
.br-proj-scan, .br-proj-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; }
.br-proj-scan{ z-index:2; background:repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 2px, transparent 2px 4px); }
.br-proj-flash{ z-index:3; mix-blend-mode:screen;
  background:radial-gradient(120% 90% at 50% 46%, #dff1ff, rgba(120,180,220,.18) 42%, transparent 72%); }
/* gated on .is-open so it fires when the brief reveals (after the camera zoom), not on inject */
.br-brief.is-open .br-proj-frame{ animation:br-proj-on 1.05s cubic-bezier(.2,.7,.2,1) both; }
.br-brief.is-open .br-proj-scan{  animation:br-proj-scan 1.05s ease-out both; }
.br-brief.is-open .br-proj-flash{ animation:br-proj-flash .95s ease-out both; }
@keyframes br-proj-on{
  0%   { opacity:0; filter:brightness(.2) blur(4px) contrast(1.25); }
  10%  { opacity:1; filter:brightness(2.1) blur(2px); }   /* lamp strike */
  22%  { filter:brightness(.82) blur(.6px); }              /* dip */
  40%  { filter:brightness(1.4) blur(0); }                 /* warm surge */
  62%  { filter:brightness(.96); }
  100% { opacity:1; filter:brightness(1); }
}
@keyframes br-proj-flash{ 0%{opacity:0} 9%{opacity:.82} 34%{opacity:.12} 100%{opacity:0} }
@keyframes br-proj-scan{  0%{opacity:.48} 55%{opacity:.3} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){
  .br-brief.is-open .br-proj-frame,
  .br-brief.is-open .br-proj-scan,
  .br-brief.is-open .br-proj-flash{ animation-duration:1ms; }
}
.br-brief-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
/* interstitial: a still that plays its video on click (e.g. the OPSCTR globe → splash) */
.br-inter{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#000; cursor:pointer; }
.br-inter-shot{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.br-inter-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:84px; height:84px; padding-left:7px;
  border-radius:50%; border:2px solid rgba(255,255,255,.9); background:rgba(8,12,18,.5); color:#fff; font-size:30px; line-height:1;
  display:flex; align-items:center; justify-content:center; pointer-events:none; transition:background .2s, transform .2s; }
.br-inter:hover .br-inter-play{ background:rgba(8,12,18,.78); transform:translate(-50%,-50%) scale(1.08); }
.br-brief-slate{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; }
.br-brief-slate .k{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan); }
.br-brief-slate .t{ font-size:26px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg1); }
.br-brief-slate .d{ font-size:12px; letter-spacing:.06em; color:var(--fg2); max-width:56ch; line-height:1.7; }
.br-brief-slate code{ color:var(--amber); }
.br-brief-exit{ position:fixed; top:10px; right:12px; z-index:41; }
.br-form{ width:min(520px,92vw); display:flex; flex-direction:column; gap:12px; text-align:left; }
.br-form .fld{ display:flex; flex-direction:column; gap:5px; }
.br-form label{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg2); }
.br-form input, .br-form textarea{ background:var(--bg2); border:1px solid var(--line); color:var(--fg1); font-family:var(--mono); font-size:13px; padding:10px 12px; }
.br-form input:focus, .br-form textarea:focus{ outline:1px solid var(--amber); border-color:var(--amber); }
.br-form-msg{ font-size:11px; letter-spacing:.04em; color:var(--fg2); min-height:1em; }
.br-form-msg.is-err{ color:var(--red); }
.br-form-ok{ font-size:13px; letter-spacing:.06em; color:var(--cyan); }

/* ============================================================
   SEAT EDIT — the alignment tool
   ============================================================ */
.br-editlayer{ position:absolute; inset:0; pointer-events:none; z-index:6; display:none; }
.br-root.br-edit .br-editlayer{ display:block; }
.br-root.br-edit .br-prop{ cursor:default; }
.br-root.br-edit .br-beam{ opacity:0 !important; }
.br-root.br-preview .br-editlayer, .br-root.br-preview .br-toolbar{ display:none; }

.br-quad{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.br-quad polygon{ fill:rgba(245,165,36,.05); stroke:var(--amber); stroke-width:1; stroke-dasharray:4 3; }

.br-handle{
  position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid var(--amber); background:rgba(245,165,36,.18);
  pointer-events:auto; cursor:grab; z-index:8; touch-action:none;
}
.br-handle:hover{ background:rgba(245,165,36,.4); }
.br-handle.is-active{ background:var(--amber); box-shadow:0 0 0 3px rgba(245,165,36,.25); }
.br-handle::after{ content:attr(data-tag); position:absolute; left:20px; top:-2px; font-size:9px; letter-spacing:.12em; color:var(--amber); white-space:nowrap; }

/* toolbar */
.br-toolbar{
  position:fixed; left:12px; bottom:12px; z-index:45; display:none;
  width:min(560px,calc(100vw - 24px)); flex-direction:column; gap:8px;
  background:rgba(8,11,12,.96); border:1px solid var(--line); padding:12px;
  font-size:11px; letter-spacing:.04em; color:var(--fg1);
}
.br-root.br-edit .br-toolbar{ display:flex; }
.br-toolbar .hint{ color:var(--fg3); font-size:10px; letter-spacing:.06em; line-height:1.5; }
.br-toolbar .sel{ color:var(--amber); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.br-toolbar pre{ margin:0; max-height:120px; overflow:auto; background:#05070a; border:1px solid var(--line-soft); padding:8px 10px; color:var(--lime); font-size:10px; line-height:1.45; }
.br-toolbar .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.br-toolbar .grow{ flex:1; }
.br-toolbar button{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg1); background:var(--bg2); border:1px solid var(--line); padding:6px 12px; cursor:pointer; }
.br-toolbar button:hover{ border-color:var(--amber); color:var(--amber); }
.br-toolbar button.on{ border-color:var(--cyan); color:var(--cyan); }

/* toast for COPY */
.br-toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:70;
  background:var(--amber); color:#0a0e10; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px; opacity:0; transition:opacity .2s; pointer-events:none; }
.br-toast.is-on{ opacity:1; }

.br-edit-tip{ position:fixed; left:12px; bottom:12px; z-index:20; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg3); background:rgba(8,11,12,.6); border:1px solid var(--line-soft); padding:6px 9px; }
.br-root.br-edit .br-edit-tip, .br-root.br-zoomed .br-edit-tip{ display:none; }

/* ---------- responsive ---------- */
@media (max-width:720px){
  .br-camera{ filter:blur(1px) brightness(.7); }
  .br-manifest{ transform:none; width:100%; max-width:100%; border-left:0; }
  .br-props{ pointer-events:none; }
  .br-edit-tip{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .br-camera{ transition:none; }
  .br-screen::before, .br-beam-dust{ animation:none; }
  .br-manifest{ transition:none; }
}