/* ---- Handoff Room, namespaced 2026-08-22 ----
   Nine class names collided with the site stylesheet: btn, done, eyebrow,
   ghost, go, mark, sub, who, wrap. Each carries an hr- prefix now, so no site
   rule can match a Handoff Room element. Every rule below is also scoped under
   #handoff-room, so no Handoff Room rule can escape into the rest of the page.
   The "who" key in the caption JSON is data, not a class, and was left alone. */
#handoff-room{
  --orange:#F47A28; --orange-text:#B34D14; --orange-cta:#B85416;
  --teal:#00C2C7; --teal-text:#007478; --purple:#7B3FE4; --green:#1DB87A;
  --green-text:#127A50; --amber:#F5A623; --amber-text:#8A5A05; --blue:#00C4FF;
  --dark:#0A0A1A; --nav:#020810; --page-dark:#1A2438; --card-dark:#0A1628;
  --cream:#FBF7F0; --white:#fff; --text:#111827; --muted:#6B7280; --border:#E5E7EB;
  --ink-soft:#374151;
  --fd:'Syne',system-ui,sans-serif; --fb:'DM Sans',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
#handoff-room *{box-sizing:border-box}
#handoff-room{margin:0;font-family:var(--fb);color:var(--text);background:var(--cream);
  -webkit-font-smoothing:antialiased;}
#handoff-room .hr-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
#handoff-room h1, #handoff-room h2, #handoff-room h3{font-family:var(--fd);margin:0}
/* ---------- masthead ---------- */
#handoff-room .mast{padding:44px 0 20px}
#handoff-room .kick{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-text);margin:0 0 12px}
#handoff-room .mast h1{font-weight:800;font-size:clamp(28px,4.2vw,44px);line-height:1.06;
  max-width:24ch;text-wrap:balance}
#handoff-room .mast p{font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:60ch;margin:14px 0 0}
/* ---------- tabs ---------- */
#handoff-room .tabs{position:sticky;top:0;z-index:60;background:var(--nav);display:flex;overflow-x:auto;
  scrollbar-width:none}
#handoff-room .tabs::-webkit-scrollbar{display:none}
#handoff-room .tab{flex:0 0 auto;appearance:none;background:none;border:none;cursor:pointer;
  padding:15px 22px;text-align:left;color:#8FA0BE;border-bottom:3px solid transparent;
  font-family:var(--fb);transition:color .2s,border-color .2s,background .2s}
#handoff-room .tab .n{display:block;font-family:var(--fd);font-weight:700;font-size:14.5px;color:#C9D4E6}
#handoff-room .tab .g{display:block;font-size:11.5px;margin-top:3px;color:#75859E}
#handoff-room .tab:hover{background:rgba(255,255,255,.04)}
#handoff-room .tab.on{border-bottom-color:var(--acc,#F47A28);background:rgba(255,255,255,.07)}
#handoff-room .tab.on .n{color:#fff}
#handoff-room .tab.on .g{color:#A8B6CC}
/* ---------- panels ---------- */
#handoff-room .panel{display:none;padding:34px 0 70px}
#handoff-room .panel.on{display:block}
#handoff-room .lede{max-width:62ch}
#handoff-room .hr-eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-text);margin:0 0 11px}
#handoff-room .panel h2{font-weight:800;font-size:clamp(23px,3.3vw,34px);line-height:1.1;
  max-width:19ch;text-wrap:balance}
#handoff-room .hr-sub{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:13px 0 0}
#handoff-room .why{margin:16px 0 0;padding:13px 16px;background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--teal);border-radius:3px;font-size:13.5px;line-height:1.6;
  color:var(--ink-soft);max-width:66ch}
#handoff-room .why b{color:var(--text)}
#handoff-room .bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0 6px}
#handoff-room .hr-btn{appearance:none;font-family:var(--fb);font-weight:700;font-size:14px;cursor:pointer;
  border-radius:999px;padding:11px 22px;border:1.5px solid transparent;transition:.16s}
#handoff-room .hr-btn.solid{background:var(--orange-cta);color:#fff}
#handoff-room .hr-btn.solid:hover{background:#96430F}
#handoff-room .hr-btn.hr-ghost{background:transparent;border-color:var(--border);color:var(--text)}
#handoff-room .hr-btn.hr-ghost:hover{border-color:var(--muted)}
#handoff-room .hr-btn:disabled{opacity:.4;cursor:default}
#handoff-room .say{font-family:var(--fm);font-size:12px;color:var(--ink-soft);margin:9px 0 0;min-height:34px;
  line-height:1.5}
/* ---------- the window, shared ---------- */
#handoff-room .win{position:relative;overflow:hidden;border-radius:4px;background:var(--card-dark);
  border:1px solid rgba(140,180,220,.22);aspect-ratio:1/1}
#handoff-room .win .glass{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,var(--glow,rgba(80,120,180,.24)),transparent 68%)}
#handoff-room .win .mull{position:absolute;inset:0;pointer-events:none}
/* No cross-bar in the offices. It is a nice window cue over an abstract loop
   and a line down the middle of a face over anything else, and every office
   ends up holding a face. The door already says "office". */
#handoff-room .off .win .mull{display:none}
#handoff-room .win .mull::before, #handoff-room .win .mull::after{content:"";position:absolute;background:var(--card-dark)}
#handoff-room .win .mull::before{left:50%;top:0;bottom:0;width:2px;margin-left:-1px}
#handoff-room .win .mull::after{top:47%;left:0;right:0;height:2px}
#handoff-room .win .sill{position:absolute;left:-4%;right:-4%;bottom:0;height:13%;
  background:linear-gradient(180deg,#16243F,#0B1526)}
#handoff-room .win .oc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#handoff-room .win .tile{position:relative;width:88%;aspect-ratio:1/1;overflow:hidden;border-radius:3px;
  background:linear-gradient(180deg,#12244A,#0A1526)}
#handoff-room .win .tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#handoff-room .win .tile .none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-size:8px;letter-spacing:.06em;color:#5C6E8C;text-align:center;padding:6px}
/* ---------- the video slot: the film ----------
   This used to be an elaborate stand-in: a call bar, a notepad that filled and
   struck itself through, a drawn Ava. All of it existed because there was no
   footage. There is footage now, so the slot is simply a frame with a video in
   it and captions over the bottom. Landscape at every width, because the film
   is 16:9 and letterboxing a phone is better than cropping the room. */
#handoff-room .vslot{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;
  background:#05080F;border:1px solid rgba(140,180,220,.2);
  display:flex;align-items:center;justify-content:center;transition:.5s}
#handoff-room .vslot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:#05080F}
#handoff-room .vslot .hr-mark{position:relative;z-index:2;text-align:center;padding:18px;max-width:34ch;
  transition:opacity .45s}
#handoff-room .vslot.playing .hr-mark{opacity:0;pointer-events:none}
#handoff-room .vslot .play{width:46px;height:46px;border-radius:50%;background:rgba(244,122,40,.9);
  margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
#handoff-room .vslot .play::after{content:"";border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-left:13px solid #fff;margin-left:4px}
#handoff-room .vslot .t{font-family:var(--fd);font-weight:700;font-size:14px;color:#EAF0F8}
#handoff-room .vslot .d{font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;color:#7E90AC;
  margin-top:7px;line-height:1.6;text-transform:uppercase}
/* The opening invitation, sized for the film now that it runs full screen
   (2026-08-25: "the overlay needs to be bigger"). Scoped off .work so the
   small "Agents at work" label once the meeting starts is untouched. */
#handoff-room .vslot .hr-mark{max-width:min(52ch,86vw)}
#handoff-room .vslot .hr-mark .t:not(.work){
  font-size:clamp(24px,3.6vw,44px);line-height:1.16;text-wrap:balance}
#handoff-room .vslot.playing{border-color:var(--orange)}
/* One spoken line at a time, with the word being said lit up.
   Nina, 2026-08-21: "I don't want one block of captions. If you're going to add
   captions, just add the line and then highlight the word that's being said...
   It's hard to see the video." So: no paragraph, no gradient scrim tall enough
   to eat the frame, one short phrase sitting on the lower edge. Word times are
   real, from ElevenLabs forced alignment against the actual audio, not guessed
   from character counts. */
#handoff-room .vslot .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 16px 14px;text-align:center;opacity:0;transition:opacity .25s;
  pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 26px rgba(0,0,0,.6)}
#handoff-room .vslot .cap.on{opacity:1}
#handoff-room .vslot .cap .ln{display:inline-block;font-family:var(--fd);font-weight:700;
  font-size:clamp(15px,2.4vw,24px);line-height:1.25;letter-spacing:-.01em;
  color:rgba(238,244,252,.5)}
#handoff-room .vslot .cap .ln b{font-weight:700;color:#fff;transition:color .08s}
#handoff-room .vslot .cap .ln b.said{color:rgba(238,244,252,.5)}
#handoff-room .vslot .cap .ln b.now{color:var(--amber)}
#handoff-room .vslot .hr-who{font-family:var(--fm);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);display:block;margin-bottom:6px;opacity:.85}
@media (max-width:600px){
#handoff-room .vslot .cap{padding:10px 12px;font-size:12px;line-height:1.45}
#handoff-room .vslot .hr-mark{padding:14px}}
/* ---------- checklist ---------- */
#handoff-room .list{background:var(--white);border:1px solid var(--border);border-radius:4px;overflow:hidden}
#handoff-room .list h3{font-family:var(--fd);font-weight:700;font-size:13px;padding:13px 16px;
  border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
#handoff-room .list h3 .ct{font-family:var(--fm);font-size:10.5px;color:var(--orange-text);font-weight:700}
#handoff-room .row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #F1F3F6;
  transition:background .35s}
#handoff-room .row:last-child{border-bottom:none}
#handoff-room .row .bx{width:17px;height:17px;flex:0 0 auto;border:1.5px solid #C9CFD8;border-radius:3px;
  position:relative;transition:.3s}
#handoff-room .row .tx{flex:1;min-width:0}
/* both block: as inline spans the owner ran straight onto the end of the task
   ("Write the week of postsJO") and the strikethrough crossed it out too */
#handoff-room .row .tt{display:block;font-size:13.5px;font-weight:500;line-height:1.35}
#handoff-room .row .ow{display:block;font-family:var(--fm);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
#handoff-room .row .st{font-family:var(--fm);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto;text-align:right;min-width:76px}
#handoff-room .row.live{background:#FFF7F0}
#handoff-room .row.live .bx{border-color:var(--orange)}
#handoff-room .row.live .st{color:var(--orange-text);font-weight:700}
#handoff-room .row.hr-done .bx{border-color:var(--green);background:var(--green)}
#handoff-room .row.hr-done .bx::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#handoff-room .row.hr-done .tt{color:var(--muted);text-decoration:line-through;text-decoration-color:#C9CFD8}
#handoff-room .row.hr-done .st{color:var(--green-text);font-weight:700}
#handoff-room .row.tap{cursor:pointer}
#handoff-room .row.tap:hover{background:#FFF7F0}
#handoff-room .row .hr-go{font-family:var(--fb);font-weight:700;font-size:11.5px;color:var(--orange-text);
  border:1.5px solid #E8D5C4;border-radius:999px;padding:5px 13px;flex:0 0 auto;background:#fff}
#handoff-room .row.tap:hover .hr-go{border-color:var(--orange)}
/* ---------- the gate ----------
   The one screen that carries the argument, so it gets the most weight. */
#handoff-room .gate{margin-top:16px;padding:20px 22px;border-radius:4px;background:var(--white);
  border:1px solid var(--border);border-left:4px solid var(--muted);opacity:.42;
  transition:opacity .5s,border-color .5s,box-shadow .5s}
#handoff-room .gate.armed{opacity:1;border-left-color:var(--orange);
  box-shadow:0 14px 34px rgba(184,84,22,.13)}
#handoff-room .gate.passed{opacity:1;border-left-color:var(--green)}
#handoff-room .gate .lb{font-family:var(--fm);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted)}
#handoff-room .gate.armed .lb{color:var(--orange-text);font-weight:700}
#handoff-room .gate.passed .lb{color:var(--green-text);font-weight:700}
#handoff-room .gate h3{font-family:var(--fd);font-weight:700;font-size:17px;margin:8px 0 6px}
#handoff-room .gate p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:56ch}
#handoff-room .gate .acts{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;align-items:center}
#handoff-room .gate .hold{font-family:var(--fm);font-size:10.5px;color:var(--orange-text);line-height:1.5}
#handoff-room .pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);
  margin-right:7px;animation:pl 1.5s ease-in-out infinite;vertical-align:middle}
@keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
/* ---------- the room ---------- */
#handoff-room .room{position:relative;border:1px solid var(--border);border-radius:4px;
  background:linear-gradient(180deg,#F6F1E7,#EBE3D4);padding:17px 17px 20px;overflow:hidden;
  transition:box-shadow .5s}
#handoff-room .room.live{box-shadow:inset 0 0 0 1px rgba(244,122,40,.3)}
#handoff-room .room .rl{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#8A8272;margin:0 0 12px}
#handoff-room .seats{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end}
#handoff-room .seat{text-align:center;transition:opacity .55s,transform .55s cubic-bezier(.2,.8,.25,1)}
#handoff-room .seat .nm{font-family:var(--fd);font-weight:700;font-size:10.5px;margin-top:5px}
#handoff-room .seat .rl2{font-family:var(--fm);font-size:7px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:1px;line-height:1.3}
#handoff-room .seat.head .win{border-color:var(--orange);box-shadow:0 0 0 2px rgba(244,122,40,.24)}
#handoff-room .seat.asking .win{border-color:var(--amber);box-shadow:0 0 0 2px rgba(245,166,35,.3)}
#handoff-room .seat.briefed .win{border-color:var(--orange)}
#handoff-room .seat.gone{opacity:.18;transform:translateY(7px)}
#handoff-room .table{height:11px;margin-top:10px;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#CDBE9E,#A8977A)}
/* a question hanging over a seat, which is the point of a standup */
#handoff-room .bub{position:absolute;z-index:5;background:var(--white);border:1px solid #E3D8C4;
  border-radius:11px;padding:7px 11px;font-size:11.5px;line-height:1.4;max-width:210px;
  box-shadow:0 8px 20px rgba(17,24,39,.12);opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s;pointer-events:none}
#handoff-room .bub.on{opacity:1;transform:translateY(0)}
#handoff-room .bub .q{font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-text);display:block;margin-bottom:3px}
#handoff-room .bub.ans{border-color:#C9E6D8}
#handoff-room .bub.ans .q{color:var(--green-text)}
/* ---------- offices ---------- */
/* ---------- the offices ----------
   Each agent has a door. It is shut while they are in the meeting and it opens
   when they leave it to go and work (Nina, 2026-08-21: "we're gonna have doors
   on each of the agents. So those doors are closed, but after the meeting they
   get up, people start walking out, as they walk out their doors open"). A door
   is the one state cue that still reads at 64px on a phone. */
#handoff-room .filmwrap{position:relative}
#handoff-room .offs{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:26px;
  position:relative;z-index:2}
/* The tile itself is never dimmed. Dimming it washed the door out to grey, which is what made a solid oak door read as a smudge. What is dim is the
   AGENT behind the door, because they are not there yet. */
#handoff-room .off{transition:transform .5s cubic-bezier(.2,.8,.25,1)}
#handoff-room .off .win{opacity:1;filter:none}
#handoff-room .off.on{transform:translateY(-4px)}

#handoff-room .off.hr-done{transform:none}
#handoff-room .off.on .win{border-color:var(--orange);
  box-shadow:0 0 0 1px rgba(244,122,40,.28),0 8px 18px rgba(244,122,40,.14)}
#handoff-room .off.hr-done .win{border-color:var(--green)}
/* Nina, 2026-08-25, watching this on a big screen: "the big thing needs to
   be what they're doing so people understand that... let's take up more
   space in each of those squares." Then a second look the same day: "it's
   a little too busy. For the same thing for each agent, remove the
   subtext." So .out (what they're doing, updated live as the meeting runs
   through the office) is the only line, no name/role underneath it, sized
   for a room rather than a phone held close. */
#handoff-room .off .out{font-family:var(--fd);font-weight:700;font-size:clamp(13px,1.2vw,16px);
  line-height:1.28;color:#EAF0F8;margin-top:8px;min-height:38px}
#handoff-room .off.hr-done .out{color:var(--green-text)}
/* The door itself. Nina, 2026-08-21: "I want them to look like office doors
   that represent each person... their name on it... like a real-life office
   door not like a square." The first version was two grey leaves parting, which read as a panel. This is a real door: frame, stile and rail, frosted
   glass, brass nameplate, lever handle. It swings on a hinge rather than
   sliding, because that is what a door does. */
#handoff-room .off .door{position:absolute;inset:0;z-index:3;pointer-events:none;
  perspective:520px;perspective-origin:70% 50%;overflow:hidden}
#handoff-room .off .slab{position:absolute;inset:0;transform-origin:left center;
  transform:rotateY(0deg);transition:transform .95s cubic-bezier(.55,.06,.24,.99);
  background:linear-gradient(100deg,#3A2A1E 0%,#4A3626 18%,#5A4231 55%,#3F2E20 100%);
  border:1px solid #2A1D14;border-radius:2px;
  box-shadow:inset 0 0 0 3px rgba(255,225,190,.06),
             inset 3px 0 8px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.4);
  overflow:hidden}
#handoff-room .off.on .slab{transform:rotateY(-104deg)}
#handoff-room .off.hr-done .slab{transform:rotateY(0deg)}
/* the frosted glass, lit warm from the office side once they are working */
#handoff-room .off .glass{position:absolute;left:11%;right:11%;top:9%;height:39%;border-radius:1px;
  background:linear-gradient(170deg,rgba(214,232,246,.30),rgba(150,180,205,.14));
  border:1px solid rgba(20,14,10,.55);
  box-shadow:inset 0 0 12px rgba(255,240,215,.16);
  backdrop-filter:blur(1px)}
/* the assignment, stencilled on the glass the way a department name would be */
#handoff-room .off .glass span{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:3px 5px;
  font-family:var(--fm);font-size:6.5px;line-height:1.35;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(30,22,16,.72);font-weight:700}
/* brass plate, the thing that makes it that person's door */
#handoff-room .off .plate{position:absolute;left:18%;right:18%;top:55%;padding:3px 2px;
  border-radius:1.5px;text-align:center;
  background:linear-gradient(180deg,#E3C071,#B78E3E 55%,#8E6B29);
  box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,246,214,.65);
  border:1px solid rgba(60,42,14,.5)}
#handoff-room .off .plate b{display:block;font-family:var(--fd);font-weight:700;font-size:9px;
  line-height:1.1;color:#2A1E08;letter-spacing:.01em}
#handoff-room .off .plate i{display:block;font-style:normal;font-family:var(--fm);font-size:5.2px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(42,30,8,.78);margin-top:1px}
/* lever handle on the swinging edge */
#handoff-room .off .knob{position:absolute;right:7%;top:50%;width:14%;height:3.5px;
  margin-top:-1.75px;border-radius:2px;
  background:linear-gradient(180deg,#E6C880,#A8802F);
  box-shadow:0 1px 2px rgba(0,0,0,.55)}
#handoff-room .off .knob::after{content:"";position:absolute;right:-2px;top:-2.5px;
  width:4.5px;height:8.5px;border-radius:2px;
  background:linear-gradient(180deg,#E6C880,#9C7629)}
/* the room beyond, so an open door reveals somewhere rather than nothing */
#handoff-room .off .jamb{position:absolute;inset:0;z-index:2;border-radius:3px;
  background:radial-gradient(120% 90% at 50% 40%,rgba(245,166,35,.16),rgba(4,8,16,.9) 70%)}
/* ---------- the assignment lines ----------
   Nina asked to see the handoff travel, not just happen. These are drawn from
   the bottom of the film out to each office as that agent picks up their task. */
#handoff-room .wires{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible}
#handoff-room .wire{fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;
  opacity:0;transition:opacity .4s}
#handoff-room .wire.on{opacity:.7;animation:draw .6s ease forwards}
#handoff-room .wire.back{stroke:var(--green)}
#handoff-room .wire.held{opacity:.2}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@media (max-width:700px){
#handoff-room .offs{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
#handoff-room .off .task{font-size:7px}}
#handoff-room .grid2{display:grid;grid-template-columns:1fr;gap:18px;margin-top:20px}
@media (min-width:940px){
#handoff-room .grid2{grid-template-columns:1.25fr .85fr;gap:22px;align-items:start}}
#handoff-room .stack{display:grid;gap:14px}
@media (max-width:860px){
#handoff-room .seats{grid-template-columns:repeat(4,1fr)}
#handoff-room .offs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){
#handoff-room .seats{grid-template-columns:repeat(3,1fr)}
#handoff-room .offs{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){
#handoff-room *{animation:none!important;transition-duration:.01ms!important}}
/* ---------- meeting notes ----------
   Nina asked for C's behaviour "with the notes etc." The questions were already
   there; what was missing was that they left nothing behind. Every answer Ava
   gives lands here as a decision, so by the time the room empties there is a
   record of what was agreed and who it binds. It is also the thing that makes
   the approval step readable: at the gate you are not approving a black box, you are approving six decisions you can see. */
#handoff-room .notes{background:var(--white);border:1px solid var(--border);border-radius:4px;overflow:hidden}
#handoff-room .notes h3{font-family:var(--fd);font-weight:700;font-size:13px;padding:13px 16px;
  border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
#handoff-room .notes h3 .ct{font-family:var(--fm);font-size:10.5px;color:var(--teal-text);font-weight:700}
#handoff-room .notes .empty{padding:15px 16px;font-family:var(--fm);font-size:10.5px;color:var(--muted);
  line-height:1.6}
#handoff-room .nt{padding:12px 16px;border-bottom:1px solid #F1F3F6;opacity:0;transform:translateY(-5px);
  transition:opacity .4s,transform .4s}
#handoff-room .nt:last-child{border-bottom:none}
#handoff-room .nt.on{opacity:1;transform:none}
#handoff-room .nt .q{font-family:var(--fm);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber-text);display:block;margin-bottom:4px}
#handoff-room .nt .a{font-size:13px;line-height:1.45;font-weight:500}
#handoff-room .nt .by{font-family:var(--fm);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-top:4px;display:block}
/* the stage: video and room stacked, notes and list beside them */
#handoff-room .mgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:20px}
@media (min-width:980px){
#handoff-room .mgrid{grid-template-columns:1.3fr .8fr;gap:24px;align-items:start}}
/* a chapter marker, so the sequence is legible while it plays */
#handoff-room .steps{display:flex;gap:0;margin:18px 0 0;border:1px solid var(--border);border-radius:4px;
  overflow:hidden;background:var(--white)}
#handoff-room .step{flex:1;padding:9px 8px;text-align:center;font-family:var(--fm);font-size:8.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  border-right:1px solid var(--border);transition:background .35s,color .35s}
#handoff-room .step:last-child{border-right:none}
#handoff-room .step.on{background:#FFF3E9;color:var(--orange-text);font-weight:700}
#handoff-room .step.past{color:var(--green-text)}
#handoff-room .step.past::before{content:"✓ "}
/* ---------- watch one office full size ----------
   The offices are deliberately small: six of them across a phone, behind doors.
   That is right for the story and wrong for checking the footage, which is what
   Nina asked for ("so I can make sure I can see them on the phone"). Tapping an
   office that has real footage opens it big. Tapping anywhere closes it. */
#handoff-room .lbx{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(8,10,14,.93);padding:18px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#handoff-room .lbx.on{display:flex}
#handoff-room .lbx .bx{width:min(94vw,560px);max-height:92vh;display:flex;flex-direction:column;gap:10px}
#handoff-room .lbx video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:5px;
  background:#000;border:1px solid rgba(140,180,220,.28)}
#handoff-room .lbx .lg{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:#fff}
#handoff-room .lbx .lg b{font-family:var(--fd);font-weight:700;font-size:15px}
#handoff-room .lbx .lg i{font-family:var(--fm);font-style:normal;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
#handoff-room .lbx .cl{align-self:flex-start;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.62);background:none;border:0;padding:4px 0;
  cursor:pointer}
/* A hint that the office is tappable, only on the ones that have footage. */
#handoff-room .off.has{cursor:pointer}
#handoff-room .off.has .nm::after{content:" \25B6";font-size:8px;color:var(--orange);vertical-align:1px}
#handoff-room{padding:56px 0 64px}

/* ---------- done ----------
   The door swings shut and the shot behind it stops, so a finished agent stops
   competing for attention with the ones still working. The plate goes green and
   the glass carries a tick, so a closed door reads as finished rather than as
   never opened. */
#handoff-room .off.hr-done .glass{background:linear-gradient(170deg,rgba(29,184,122,.34),rgba(18,122,80,.18));
  border-color:rgba(9,60,39,.55)}
#handoff-room .off.hr-done .glass span{color:rgba(6,48,31,.9)}
#handoff-room .off.hr-done .plate{background:linear-gradient(180deg,#8FE3BC,#1DB87A 55%,#127A50);
  border-color:rgba(6,48,31,.5)}
#handoff-room .off.hr-done .plate b, #handoff-room .off.hr-done .plate i{color:#062E1E}
#handoff-room .off.hr-done .slab::after{content:"\2713 Done";position:absolute;left:0;right:0;bottom:9%;
  text-align:center;font-family:var(--fm);font-size:6.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8FE3BC}

/* ---------- offices: the clip, and nothing over it ----------
   Nina, 2026-08-22, after two days of this: "When I click on them they look
   exactly how I want them to look on the page." Same file both times. What
   differed was the frame: an 88% tile in a navy box with a sill across the
   bottom of the picture. All of it is gone here. */
#handoff-room .off .win{border-color:transparent;background:#000}
#handoff-room .off .win .glass, #handoff-room .off .win .sill{display:none}
#handoff-room .off .win .oc{inset:0}
#handoff-room .off .win .tile{width:100%;height:100%;border-radius:4px;background:#000}

/* ---------- the sign, replacing the door ----------
   Nina: "They don't look like doors, first of all, and it's too much text. You
   can't read it that small. Maybe it just says their name very clearly and then
   it says 'in a meeting', like 'do not disturb in a meeting'... or those live
   buttons come on where the lights are on, like recording."
   So: the name at a readable size, and an on-air lamp. No door furniture, no
   stencilled assignment nobody can read at 135px. */
#handoff-room .off .sign{position:absolute;inset:0;z-index:4;border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;text-align:center;
  background:linear-gradient(165deg,#12233C,#070E1A);
  border:1px solid rgba(140,180,220,.28);
  transition:opacity .5s;opacity:1}
#handoff-room .off.on .sign{opacity:0;pointer-events:none}
/* Just the task, no name/role line underneath (Nina, 2026-08-25: "too
   busy... remove the subtext"). Sized up off an 8px role label that read
   as a hairline on an actual screen in an actual meeting. */
#handoff-room .off .sname{font-family:var(--fd);font-weight:800;font-size:clamp(15px,1.7vw,21px);
  line-height:1.14;color:#fff}
#handoff-room .off .stat{display:inline-flex;align-items:center;gap:5px;margin-top:2px;
  font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#FFD9C2;
  background:rgba(244,122,40,.14);border:1px solid rgba(244,122,40,.45);
  border-radius:999px;padding:4px 9px}
#handoff-room .off .lamp{width:6px;height:6px;border-radius:50%;background:#FF4D4D;
  box-shadow:0 0 0 3px rgba(255,77,77,.22);animation:onair 1.7s ease-in-out infinite}
@keyframes onair{0%,100%{opacity:1}50%{opacity:.25}}
#handoff-room .off .stat.d{display:none}

/* done: the sign comes back green with a ticked box, and the clip is paused */
#handoff-room .off.hr-done .sign{opacity:1;
  background:linear-gradient(165deg,#0E3A28,#06170F);border-color:rgba(29,184,122,.5)}
#handoff-room .off.hr-done .stat.m{display:none}
#handoff-room .off.hr-done .stat.d{display:inline-flex;color:#BFF3DC;
  background:rgba(29,184,122,.16);border-color:rgba(29,184,122,.5)}
#handoff-room .off.hr-done .box{width:11px;height:11px;border-radius:2.5px;background:#1DB87A;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:8px;line-height:1;color:#04120C;font-weight:900}

/* ---------- legibility and labelling, 2026-08-23 ----------
   Nina, on a phone: "The boxes above the room, I don't think you could really
   see. I don't think it's clear. I don't know if the text is clear." Measured:
   8.5px, colour #6B7280, in a 68px box at 390px wide. That is not her screen. */
#handoff-room .stepnow{display:none;margin:18px 0 0;font-family:var(--fm);font-size:13px;
  line-height:1.5;color:var(--ink-soft);letter-spacing:.02em}
#handoff-room .stepnow b{color:var(--orange-text);font-family:var(--fb);font-weight:700;
  font-size:14.5px;letter-spacing:0}
@media (max-width:760px){
  #handoff-room .steps{display:none}
  #handoff-room .stepnow{display:block}
}
/* Above that width the five-box strip stays, but readable rather than 8.5px. */
@media (min-width:761px){
  #handoff-room .step{font-size:10.5px;padding:10px 8px;color:#4B5563}
}

/* Say what the section is before anyone has pressed anything. */
#handoff-room .tryline{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:10px 0 0}
#handoff-room .tryline b{color:var(--text)}

/* The film label used to sit back over the slot once the film ended, so the
   moment the agents started working the screen described a film. Nina: "when
   the agents are working on the screen it should say... agents at work." */
#handoff-room .vslot .hr-mark .work{display:none}
#handoff-room .vslot.working .hr-mark .t:not(.work),
#handoff-room .vslot.working .hr-mark .d:not(.work){display:none}
#handoff-room .vslot.working .hr-mark .work{display:block}

/* ---------- sitting the room inside the page, 2026-08-23 ----------
   Nina: "The page still feels disconnected around the center attraction...
   should we revise how it looks under there so it matches the look and feel
   of the rest of the page?" Measured, three things set it apart:

     ground      the room was #FBF7F0 cream, the only cream block on a page
                 whose alternating surface is --soft #F9FAFB everywhere else.
                 Cream is a real PITL token but nothing else here uses it, so
                 the room read as a different site pasted in.
     width       the room's container was 1180px against the site's 1100px, so
                 the content edges did not line up with the sections above and
                 below it.
     weight      the room's headings were 800 against the site's 700.

   All three now match. */
#handoff-room{background:#F9FAFB}
#handoff-room .hr-wrap{max-width:1100px;padding-left:24px;padding-right:24px}
#handoff-room .mast h1{font-weight:700}
#handoff-room .panel h2{font-weight:700}

/* ---------- Start the meeting has to be found ----------
   Nina: "the start the meeting should, I want to make sure it flashes or
   something. I don't think it stands out." A ring breathes out of the button
   until it is pressed for the first time, then stops for good. Motion is off
   for anyone who asks for reduced motion; the button stays a solid orange CTA
   either way, so nothing depends on the animation. */
#handoff-room .hr-btn.solid{position:relative;font-size:15px;padding:13px 22px}
/* Teal, not orange (Nina, 2026-08-27: "all buttons should have the teal color
   pulsing"). This ring was orange everywhere except #run, which was made cyan
   on 2026-08-25 for exactly the reason that now applies to all of them: orange
   sits inside the room's own warm palette and reads as scenery. --btn-pulse is
   cyan inside the room and teal on light ground, set in styles.css. */
#handoff-room .hr-btn.solid::after{content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid var(--btn-pulse,var(--cyan));opacity:0;pointer-events:none;
  animation:hrcall 2.6s cubic-bezier(.3,.7,.4,1) infinite}
#handoff-room .hr-btn.solid.went::after{animation:none;display:none}
@keyframes hrcall{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(1.16);opacity:0}
  100%{transform:scale(1.16);opacity:0}
}
/* Still not enough against the film (Nina, 2026-08-25: "I can't see it that
   much. The pulsating needs to be bigger"). Orange sits inside the room's own
   warm, orange-lit palette, so it reads as scenery, not a control. Cyan is
   the one color that never otherwise appears against this film, the same
   reason the nav chip at the top of every page wore it until 2026-09-02:
   it always reads as chrome, not content. Scoped to the id so "Let's talk" and
   "Approve and send" below keep the orange the rest of the site uses for a
   commitment. This has to out-specificity the shared .went rule above with
   its own, or the ID would keep the ring animating after the first click. */
#handoff-room #run{
  background:var(--cyan);color:var(--nav-dark);border-color:transparent;
  font-size:17px;padding:16px 30px}
#handoff-room #run:hover{background:#fff}
#handoff-room #run::after{
  border-width:2.5px;inset:-5px;
  animation-name:hrcallcyan}
#handoff-room #run.went::after{animation:none;display:none}
@keyframes hrcallcyan{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(1.3);opacity:0}
  100%{transform:scale(1.3);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  #handoff-room #run::after{animation:none;opacity:.6;transform:none}
  #handoff-room .hr-btn.solid::after{animation:none;opacity:.5;transform:none}
}

/* ============================================================
   THE WAY ON (Nina, 2026-08-27)

   "if you're on the home page on a desktop... after video runs you're just
   stuck at the 'agents at work' people wont know to scroll".

   The console fills the viewport by design, so when the opener ends there is
   nothing on screen saying the page continues underneath. This is that, and
   only that: it appears when the film has played out, and disappears the
   moment you scroll, so it is a prompt rather than a permanent fixture.
   ============================================================ */
/* FIXED, not absolute (Nina, 2026-08-27: "homepage - nothing changed").
   Pinned to the bottom of the room it sat at the bottom of the ROOM, and at
   1440x900 the room runs 108px past the fold, so the cue rendered off screen
   and nobody ever saw it. It is a cue about the viewport, so it belongs to
   the viewport. It still only shows while the room is what you are looking
   at: the scroll handler hides it past 120px. */
.scrollcue{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  /* Below the lightbox (60) and the nav (100), above the page. Fixed puts it
     in the root stacking context, where its old z-index:7 lost to the office
     grid on a phone. */
  z-index:50; display:flex; align-items:center; gap:9px;
  padding:9px 16px 9px 18px; border-radius:999px; cursor:pointer;
  font-family:var(--font-body,inherit); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan,#00F5FF); background:var(--nav-dark,#020810);
  border:1px solid rgba(0,196,255,.4);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
  animation:cuein .5s ease both;
}
.scrollcue[hidden]{ display:none }
.scrollcue:hover{ background:var(--cyan,#00F5FF); border-color:transparent; color:var(--nav-dark,#020810) }
.scrollcue .scarrow{
  width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  animation:cuebob 2.4s ease-in-out infinite;
}
@keyframes cuein{ from{ opacity:0; transform:translateX(-50%) translateY(8px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } }
@keyframes cuebob{ 0%,100%{ transform:rotate(45deg) translate(-1px,-1px) } 50%{ transform:rotate(45deg) translate(2px,2px) } }

@media (max-width:820px){
  .scrollcue{ bottom:14px; font-size:11px; padding:8px 13px 8px 15px }
}
/* A cue that bobs at somebody who asked for less motion is the wrong trade:
   it still appears and still works, it just holds still. */
@media (prefers-reduced-motion:reduce){
  .scrollcue{ animation:none }
  .scrollcue .scarrow{ animation:none }
}