/* ============================================================
   THE CONFERENCE ROOM (prototype, 2026-08-23)

   Nina, after seeing the first three variants: "Think of the
   conference room we did for the video. We're walking into the
   conference room. You could see that the room is a conference
   room and then you click on different things in a conference
   room." And: "I love that the playbook is an actual book... I
   love the idea of clicking on the playbook."

   So the room is not drawn. It is the real boardroom frame from
   the Handoff Room film, and every marker is pinned to an object
   that is genuinely in that picture: the open book on the table,
   the screen, the laptop.

   THE ONE STRUCTURAL DECISION worth knowing: the markers live in
   the IMAGE's coordinate space, not the section's. The frame is
   locked to the plate's 16:9 and the plate fills it, so a marker
   at 68.5%/74.5% sits on the book at every screen size instead of
   drifting off it. On a phone the frame crops rather than letterboxes,
   and the crop is biased toward the table, which is where the
   things you can tap are.
   ============================================================ */

:root{
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.13'/></svg>");
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ink:#231C11; --ink-soft:#4A3D28;
}

.variant-flag{
  background:#241D12;color:#F3E7CE;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 16px}
.variant-flag b{color:#fff}

/* ---- the room ---- */
.room{ position:relative; background:#070B14; overflow:hidden }
.frame{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  /* on a phone the room gets taller than 16:9 so it still feels like a
     room rather than a letterbox strip */
  --frame-h: min(74svh, 560px);
  min-height:var(--frame-h);
  --focus-x: 50%;
  --focus-y: 72%;   /* bias the crop toward the table */
}

/* THE MARKER COORDINATE SPACE IS THE PICTURE, NOT THE FRAME (Nina,
   2026-08-27: "the placement looks random... they should align with the
   shelves", with a photo of the Library on her phone).

   Every --x/--y in these rooms is a percentage of the PHOTOGRAPH, measured off
   a grid laid over the plate. That only holds if the box the markers are
   positioned against is the photograph's own rendered box. It was the frame,
   and on a phone the two are nothing like each other: the frame is portrait
   (390 x 557 at 390px wide), the plate is object-fit:cover, so the picture
   renders 990px wide with 300px hanging off each side. A bay at 43% landed at
   168px while its shelf was at 990 x 0.43 - 300 = 126px, and the five of them
   were squeezed into the middle while the real bays ran off to the right.
   That is exactly what she drew.

   So .stage is now sized to the rendered picture rather than the frame, and
   the frame clips it. The width is the cover calculation written out:

     max(frame width, frame height x 16/9)

   which picks the frame's own width when the frame is 16:9 or wider (nothing
   is cropped, and this is a no-op, which is why the desktop always looked
   right), and picks height x 16/9 when the frame is taller, giving exactly the
   width object-fit:cover would have produced.

   --focus-x and --focus-y replace object-position and mean the same thing: the
   picture's X%/Y% point sits on the frame's X%/Y% point. Percentages in
   `translate` resolve against the element's own size, which is what makes that
   equivalence exact. They are the right place to aim a phone crop, since a
   phone only ever sees about 42% of the picture's width.

   A room's markers must be inside .stage. A room without one positions them
   against the frame and drifts again. */
.stage{
  position:absolute;
  left:var(--focus-x); top:var(--focus-y);
  translate:calc(-1 * var(--focus-x)) calc(-1 * var(--focus-y));
  width:max(100%, calc(var(--frame-h) * 16 / 9));
  aspect-ratio:16/9;
  transform-origin:50% 50%;
}
.plate{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* the room is a night room. A little more of it, so the markers read. */
.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(84% 68% at 52% 46%, transparent 52%, rgba(30,24,14,.22) 100%),
    linear-gradient(180deg, rgba(20,16,10,.20) 0%, transparent 18%, transparent 66%, rgba(20,16,10,.34) 100%);
}

/* ============================================================
   the markers. A ring on the object, a label beside it.
   ============================================================ */
/* The button is a 44px tap target centred exactly on the object, which is
   both the accessible minimum and what keeps the ring ON the thing. The ring
   is centred inside it and the label hangs off the side. Laying ring and
   label out as a flex row instead centres the PAIR on the point, which walked
   every ring off its object by half a label width. */
.spot{
  position:absolute; left:var(--x); top:var(--y); width:44px; height:44px;
  transform:translate(-50%,-50%);
  padding:0; border:0; background:none;
  cursor:pointer; font:inherit; z-index:3; -webkit-tap-highlight-color:transparent;
}
.spot .ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%;
  /* the daylight room is bright, so the ring is dark with a light rim. A
     white ring vanished against the window wall and the pale table. */
  border:2px solid rgba(28,22,12,.82); background:rgba(255,252,246,.5);
  backdrop-filter:blur(2px);
  box-shadow:0 2px 12px rgba(20,16,8,.45), 0 0 0 2px rgba(255,255,255,.55);
}
.spot .ring::after{  /* the dot in the middle */
  content:""; position:absolute; inset:7px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 10px rgba(244,122,40,.9)}
/* one slow pulse, so the eye finds them without the page feeling busy */
.spot .ring::before{
  content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--orange);
  opacity:0; animation:ping 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.s-screen .ring::before{ animation-delay:.9s }
.s-phone .ring::before{ animation-delay:1.8s }
@keyframes ping{
  0%{ transform:scale(1); opacity:.85 }
  70%{ transform:scale(2.5); opacity:0 }
  100%{ transform:scale(2.5); opacity:0 }
}
.spot .tag{
  position:absolute; top:50%; left:calc(100% - 6px); transform:translateY(-50%);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; white-space:nowrap; padding:7px 12px; border-radius:4px;
  background:rgba(10,14,24,.72); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px); box-shadow:0 6px 18px -8px rgba(0,0,0,.8)}
.spot:hover .ring, .spot:focus-visible .ring{ border-color:var(--orange); background:rgba(255,255,255,.9) }
.spot:hover .tag, .spot:focus-visible .tag{ background:rgba(244,122,40,.94); border-color:transparent }
.spot:focus-visible{ outline:3px solid var(--orange); outline-offset:6px; border-radius:6px }
/* the book is the one she wants found first, so its label sits open */
.s-book .tag{ background:rgba(244,122,40,.92); border-color:transparent }
/* a marker on the right half hangs its label to the LEFT, so the label never
   runs off the frame and never covers the object it is pointing at */
/* the book and the phone sit close together on the table, so their labels
   go opposite ways rather than stacking on each other */
.s-book .tag{ left:auto; right:calc(100% - 6px) }

/* ---- the words, under the room rather than over it ---- */
.roomcopy{
  position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:26px 24px 34px }
.roomcopy .eyebrow{ color:var(--orange); letter-spacing:.24em; margin:0 0 11px }
.roomcopy h1{
  font-family:var(--font-display); font-weight:700; color:#fff; margin:0 0 9px;
  font-size:clamp(26px,4vw,40px); line-height:1.12; max-width:18ch; text-wrap:balance}
.roomcopy .sub{ color:#B9C3D6; font-size:16.5px; line-height:1.6; margin:0 0 14px; max-width:46ch }
/* Gartner's 2026 buyer surveys put 70% on wanting a fully self-service
   experience, so the number is readable here without tapping anything. */
.roomcopy .atglance{
  font-size:15px; line-height:1.6; color:#8FA0BE; margin:0; max-width:52ch }
.roomcopy .atglance b{ color:#fff }

/* ============================================================
   what opens when you tap something
   ============================================================ */
.sheetwrap{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:22px }
.sheetwrap[hidden]{ display:none }
.scrim{
  position:absolute; inset:0; border:0; padding:0; cursor:pointer;
  background:rgba(4,8,16,.72); backdrop-filter:blur(4px);
  animation:fade .22s ease}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.close{
  position:absolute; right:10px; top:8px; z-index:4; width:38px; height:38px; border:0;
  background:none; color:#8B7A57; font-size:27px; line-height:1; cursor:pointer; border-radius:50%}
.close:hover{ color:var(--ink); background:rgba(120,100,64,.12) }

/* --- THE BOOK. Two facing pages, opening out of the table. --- */
.book{
  position:relative; z-index:2; width:min(1000px,100%); max-height:86svh; overflow:auto;
  display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
  border-radius:3px;
  background:var(--grain),linear-gradient(180deg,#FDFAF3 0%,#F7F1E4 60%,#EFE7D5 100%);
  background-size:140px 140px,auto;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 40px 70px -30px rgba(0,0,0,.85);
  animation:open .34s cubic-bezier(.2,.7,.3,1)}
/* it opens from the table, so it grows up out of the bottom of the screen */
@keyframes open{
  from{ opacity:0; transform:translateY(34px) scale(.965) }
  to{ opacity:1; transform:none }
}
.book::after{  /* the page block along the bottom edge */
  content:""; position:absolute; left:12px; right:12px; bottom:-10px; height:11px;
  background:repeating-linear-gradient(90deg,#F2ECDF 0 1.6px,#D4CAB4 1.6px 3.2px);
  border-radius:0 0 4px 4px}
.gutter{
  background:linear-gradient(90deg,
    rgba(120,100,64,0) 0%, rgba(120,100,64,.16) 32%, rgba(96,78,48,.34) 50%,
    rgba(120,100,64,.16) 68%, rgba(120,100,64,0) 100%)}
.leaf{ padding:40px 36px 42px }
.leaf.left{ padding-right:24px }
.leaf.right{ padding-left:24px }

.folio{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:#A08F6C; margin:0 0 18px }
.book h2, .card h2{
  font-family:var(--font-display); font-weight:700; color:var(--ink); margin:0 0 14px;
  font-size:clamp(21px,2.7vw,27px); line-height:1.16; max-width:20ch; text-wrap:balance}
.book p, .card p{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px; max-width:44ch }
.book p b{ color:var(--ink) }

.pricetag{
  margin:24px 0 0; padding:20px 22px 18px; border-radius:3px;
  background:linear-gradient(158deg,#FDF6E6 0%,#F1E4C8 62%,#E2D2AE 100%);
  box-shadow:0 1px 0 rgba(255,250,236,.8) inset, 0 12px 22px -14px rgba(60,46,20,.6)}
.pricetag .lab{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#7A6743; margin:0 0 6px }
.pricetag .fig{ display:block; font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(38px,5vw,52px); line-height:1; letter-spacing:-.02em }
.pricetag .fig sup{ font-size:.42em; vertical-align:.85em; margin-right:2px }
.pricetag .fine{ display:block; font-size:12.5px; color:#7A6743; margin:10px 0 0; line-height:1.55 }

.toc{ margin:0 0 26px; padding:0; list-style:none; display:grid; gap:18px; counter-reset:t }
.toc li{ position:relative; padding-left:44px; counter-increment:t }
.toc li::before{
  content:counter(t,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#fff;
  background:#B9A67E; border-radius:3px; padding:4px 7px}
.toc li[data-hue="teal"]::before{ background:var(--teal-text) }
.toc li[data-hue="orange"]::before{ background:var(--orange-text) }
.toc li[data-hue="green"]::before{ background:var(--green-text) }
.steps{ margin:0 0 24px; padding:0; list-style:none; display:grid; gap:16px; counter-reset:s }
.steps li{ position:relative; padding-left:40px; counter-increment:s }
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0; width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--mono); font-size:12px; color:#fff; background:#B9A67E}
.steps b{ display:block; font-family:var(--font-display); font-size:16.5px; color:var(--ink); margin:0 0 4px }
.steps span{ display:block; font-size:14.5px; line-height:1.6; color:var(--ink-soft) }
.ask{ margin-top:22px }
.scoped{ font-size:13.5px; line-height:1.6; color:#7A6743; margin:20px 0 0;
  padding-top:16px; border-top:1px solid rgba(120,100,64,.24) }
.book .does{ margin:0 0 24px; padding:0; list-style:none; display:grid; gap:12px }
.book .does li{ font-size:15px; line-height:1.62; color:var(--ink-soft); padding-left:24px; position:relative }
.book .does li::before{
  content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:2px;
  background:var(--orange); box-shadow:0 1px 2px rgba(90,72,40,.4)}
.toc b{ display:block; font-family:var(--font-display); font-size:18px; color:var(--ink); margin:0 0 5px }
.toc span{ display:block; font-size:14.5px; line-height:1.62; color:var(--ink-soft) }

/* --- the two smaller objects open as a single page, not a spread --- */
.card{
  position:relative; z-index:2; width:min(560px,100%); max-height:86svh; overflow:auto;
  padding:38px 34px 36px; border-radius:3px;
  background:var(--grain),linear-gradient(180deg,#FDFAF3,#F1EADC);
  background-size:140px 140px,auto;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 40px 70px -30px rgba(0,0,0,.85);
  animation:open .3s cubic-bezier(.2,.7,.3,1)}

@media (max-width:820px){
  .frame{
    aspect-ratio:auto; min-height:0;
    --frame-h: min(66svh,520px);
    height:var(--frame-h);
    --focus-y: 78%;
  }
  /* On a phone the two table markers sit close enough that side-by-side
     labels collide and one disappears. Hanging every label BELOW its ring
     removes the collision without moving a single marker off its object. */
  .spot .tag{
    font-size:10.5px; padding:6px 9px; letter-spacing:.1em;
    left:50%; right:auto; top:calc(100% - 6px); transform:translateX(-50%)}
  .s-book .tag{ left:50%; right:auto }
  /* on a phone the book sits above its ring and the handset below, so the
     two table markers never stack their labels on each other */
  .s-book .tag{ top:auto; bottom:calc(100% - 6px) }
  .spot .ring{ width:22px; height:22px }
  .spot .ring::after{ inset:6px }
  .book{ grid-template-columns:1fr; max-height:88svh }
  .gutter{ height:1px; background:linear-gradient(90deg,transparent,rgba(96,78,48,.3),transparent) }
  .leaf{ padding:28px 22px 10px }
  .leaf.right{ padding:6px 22px 30px }
  .leaf.left{ padding-right:22px }
  .roomcopy{ padding:22px 22px 30px }
}
@media (prefers-reduced-motion:reduce){
  .spot .ring::before{ animation:none; opacity:0 }
  .book, .card, .scrim{ animation:none }
}


/* ============================================================
   THE BOOK YOU PAGE THROUGH

   Nina: "it talks about the steps, and then it talks about the
   playbook... I don't think the price should be on the first
   page. I think you should have to flip the page, and then it
   talks about the pricing."

   So three spreads in that order, and a turn that actually turns:
   the right-hand leaf swings away on its inner edge, which is the
   only bit of a page turn the eye needs to believe it.
   ============================================================ */
.bookshell{
  position:relative; z-index:2; width:min(1020px,100%);
  display:flex; flex-direction:column; gap:14px;
  animation:open .34s cubic-bezier(.2,.7,.3,1)}

/* The original .book was itself the two-column spread. Now it is the COVER
   holding several spreads, so it must stop being a grid or every spread gets
   squeezed into its first column. */
.bookshell .book{
  display:block; grid-template-columns:none;
  position:relative; border-radius:3px;
  background:var(--grain),linear-gradient(180deg,#FDFAF3 0%,#F7F1E4 60%,#EFE7D5 100%);
  background-size:140px 140px,auto;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 40px 70px -30px rgba(0,0,0,.85);
  perspective:1600px}
.bookshell .book::after{   /* the page block along the bottom */
  content:""; position:absolute; left:12px; right:12px; bottom:-10px; height:11px;
  background:repeating-linear-gradient(90deg,#F2ECDF 0 1.6px,#D4CAB4 1.6px 3.2px);
  border-radius:0 0 4px 4px}

/* spreads stack, and only the current one is in flow, so the book is as
   tall as the page you are on rather than as tall as the longest one */
.bookshell .spread{
  display:none; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
  transform-style:preserve-3d}
.bookshell .spread.is-on{ display:grid }
.bookshell .spread.is-on .leaf{ animation:pagein .34s ease both }
@keyframes pagein{ from{ opacity:0 } to{ opacity:1 } }

/* the turn itself. The outgoing right leaf swings on its inner edge. */
.bookshell .spread.turning-out .leaf.right{
  transform-origin:left center; animation:turnout .42s cubic-bezier(.4,0,.6,1) both;
  backface-visibility:hidden; z-index:3; position:relative}
@keyframes turnout{
  from{ transform:rotateY(0deg); box-shadow:none }
  to{ transform:rotateY(-118deg); box-shadow:-24px 0 40px -18px rgba(60,46,20,.6) }
}
.bookshell .spread.turning-back .leaf.left{
  transform-origin:right center; animation:turnback .42s cubic-bezier(.4,0,.6,1) both;
  backface-visibility:hidden; z-index:3; position:relative}
@keyframes turnback{
  from{ transform:rotateY(0deg) }
  to{ transform:rotateY(118deg); box-shadow:24px 0 40px -18px rgba(60,46,20,.6) }
}

/* ---- the turn control, which doubles as the page count ---- */
.pageturn{ display:flex; align-items:center; justify-content:space-between; gap:14px }
.pt{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28); background:rgba(12,10,6,.5); color:#F3E7CE;
  padding:11px 17px; border-radius:999px; cursor:pointer; backdrop-filter:blur(6px)}
.pt:hover:not(:disabled){ background:var(--orange-cta); border-color:transparent; color:#fff }
.pt:disabled{ opacity:.32; cursor:default }
.pt.prev{ padding:11px 15px }
.pips{ display:flex; gap:7px }
.pips i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3) }
.pips i.on{ background:var(--orange); box-shadow:0 0 8px rgba(244,122,40,.8) }

/* ============================================================
   THE SCREEN, which is where the services film will play
   ============================================================ */
.screenpanel{
  position:relative; z-index:2; width:min(980px,100%); max-height:88svh; overflow:auto;
  border-radius:4px; background:#0C1119;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9);
  animation:open .32s cubic-bezier(.2,.7,.3,1)}
.screenpanel .close{ color:#7E8CA6 }
.screenpanel .close:hover{ color:#fff; background:rgba(255,255,255,.1) }
/* capped, or a 16:9 slot eats the whole panel and the three lanes fall
   below the fold, which is the one thing this panel exists to show */
.videoslot{
  position:relative; aspect-ratio:16/9; max-height:44svh; background:
    radial-gradient(80% 70% at 50% 40%, #17202E, #080C13 78%);
  display:grid; place-items:center; border-bottom:1px solid rgba(255,255,255,.08)}
.videoslot .pending{ text-align:center; padding:24px }
.videoslot .chip{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#8A5A05; background:#FBE3B7; border:1px solid #E5C377;
  border-radius:3px; padding:5px 10px; margin:0 0 14px}
.videoslot .pending p{ color:#93A2BC; font-size:15px; line-height:1.6; margin:0; max-width:34ch }
.screencopy{ padding:30px 32px 34px }
.screencopy .folio{ color:#7E8CA6; margin:0 0 12px }
.screencopy h2{ color:#fff; margin:0 0 20px }
.screencopy .toc li::before{ color:#fff }
.screencopy .toc b{ color:#fff }
.screencopy .toc span{ color:#A9B6CC }

@media (max-width:820px){
  .bookshell{ width:100% }
  .bookshell .spread.is-on{ grid-template-columns:1fr }
  .pt{ font-size:10.5px; padding:10px 13px }
  .screencopy{ padding:24px 20px 28px }
}
@media (prefers-reduced-motion:reduce){
  .bookshell .spread.turning-out .leaf.right,
  .bookshell .spread.turning-back .leaf.left{ animation:none }
  .bookshell .spread.is-on .leaf{ animation:none }
}

/* ============================================================
   THE PAGE UNDER THE ROOM

   The room is the front door, and everything inside it is behind
   a tap. That is fine for someone who wants to explore and no use
   at all to someone skimming on a phone, or to an answer engine
   reading the page. So everything the panels say is also here,
   flat, in reading order, with no interaction required.

   Deliberately quieter than the room: white sections, ordinary
   type, no props. The room already did the wow. This part has to
   be legible at arm's length on a bus.
   ============================================================ */
.roompage{ background:var(--white); padding:76px 0 78px }
.roompage.alt{ background:var(--soft); border-top:1px solid var(--border) }
.roompage .eyebrow{ color:var(--orange-text); letter-spacing:.24em; margin:0 0 13px }
.roompage h2{
  font-family:var(--font-display); font-weight:700; color:var(--text); margin:0 0 12px;
  font-size:clamp(25px,3.5vw,35px); line-height:1.14; max-width:20ch; text-wrap:balance}
.roompage .lede{ font-size:16.5px; line-height:1.66; color:var(--ink-soft); margin:0 0 40px; max-width:62ch }

/* ---- the three lanes ---- */
.svc-lanes{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.svc-lane{
  position:relative; padding:30px 26px 28px; border-radius:4px;
  background:var(--white); border:1px solid var(--border);
  border-top:4px solid var(--border);
  box-shadow:0 14px 28px -20px rgba(20,26,40,.5)}
.roompage.alt .svc-lane{ background:var(--white) }
.l-teal{ border-top-color:var(--teal) }
.l-orange{ border-top-color:var(--orange) }
.l-green{ border-top-color:var(--green) }
.svc-lane .n{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink-mute);
  display:block; margin:0 0 10px}
.svc-lane h3{
  font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text);
  margin:0 0 6px}
.svc-lane .promise{
  font-size:15px; line-height:1.45; font-weight:600; margin:0 0 14px; color:var(--text)}
.l-teal .promise{ color:var(--teal-text) }
.l-orange .promise{ color:var(--orange-text) }
.l-green .promise{ color:var(--green-text) }
.svc-lane p{ font-size:14.8px; line-height:1.68; color:var(--ink-soft); margin:0 0 16px }
.svc-lane ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:9px }
.svc-lane li{ font-size:14.2px; line-height:1.58; color:var(--ink-soft); padding-left:21px; position:relative }
.svc-lane li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:2px;
  background:var(--border)}
.l-teal li::before{ background:var(--teal) }
.l-orange li::before{ background:var(--orange) }
.l-green li::before{ background:var(--green) }
.svc-lane .who{
  font-size:13.6px; line-height:1.6; color:var(--ink-mute); margin:0;
  padding-top:15px; border-top:1px solid var(--border)}
.svc-lane .who b{ color:var(--text) }

/* ---- the method, as four steps you read straight down ---- */
.method{ margin:0; padding:0; list-style:none; display:grid; gap:4px; max-width:760px }
.method li{
  display:flex; gap:20px; align-items:flex-start; padding:22px 0;
  border-bottom:1px solid var(--border)}
.method li:first-child{ border-top:1px solid var(--border) }
.method .s{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; color:#fff; background:var(--orange-cta)}
.method b{
  display:block; font-family:var(--font-display); font-size:18px; color:var(--text); margin:0 0 5px}
.method p{ font-size:15px; line-height:1.66; color:var(--ink-soft); margin:0; max-width:56ch }

@media (max-width:900px){
  .svc-lanes{ grid-template-columns:1fr }
  .roompage{ padding:56px 0 58px }
  .method li{ gap:15px; padding:19px 0 }
  .method .s{ width:29px; height:29px; font-size:12px }
}

/* ============================================================
   THE PLAYBOOK'S NEW PAGES

   Spread 1 names all seven parts, spread 2 opens two of them,
   spread 3 asks. Nina: "our playbook and then, like, let us
   create your playbook", and "I don't wanna give away, like,
   secret sauces."

   So the withholding is stated in words rather than done with a
   blur. A blurred paragraph is a tease and reads as a trick; a
   plain sentence saying two of seven are shown reads as someone
   who knows what their work is worth.
   ============================================================ */

/* the seven parts, named but not opened */
.parts{ margin:0; padding:0; list-style:none; counter-reset:pt; display:grid; gap:12px }
.parts li{ position:relative; padding-left:38px; counter-increment:pt }
.parts li::before{
  content:counter(pt,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--orange-text)}
.parts b{ display:block; font-family:var(--font-display); font-size:16px; color:var(--ink); margin:0 0 2px }
.parts span{ display:block; font-size:13.8px; line-height:1.5; color:#7A6743 }

/* an opened section of the real thing, set off as a quotation would be */
.excerpt{
  margin:20px 0 0; padding:18px 20px; border-radius:3px;
  background:rgba(214,196,156,.2); border-left:3px solid #C9B487}
.excerpt:first-child{ margin-top:0 }
.excerpt .xh{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#7A6743; margin:0 0 11px}
.excerpt .lead{
  font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.35;
  color:var(--ink); margin:0 0 10px; max-width:30ch}
.excerpt p{ font-size:14.5px; line-height:1.66; color:var(--ink-soft); margin:0 }
.excerpt .dont{ margin:0; padding:0; list-style:none; display:grid; gap:13px }
.excerpt .dont li{
  font-size:14.3px; line-height:1.6; color:var(--ink-soft); padding-left:16px;
  border-left:2px solid #D8C4C4}
.excerpt .dont b{ color:var(--ink) }

/* what is not shown, said out loud rather than blurred */
.withheld{
  font-size:14px; line-height:1.64; color:#6B5A3C; margin:22px 0 0;
  padding-top:16px; border-top:1px dashed rgba(120,100,64,.4)}
.withheld b{ color:var(--ink) }
.invented{
  font-size:12.8px; line-height:1.55; color:#8A7D66; margin:14px 0 0; font-style:italic }
.invented.small{ margin-top:20px }
.folio .chip.small{ margin-left:8px; vertical-align:1px }
.chip{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#8A5A05; background:#FBE3B7; border:1px solid #E5C377;
  border-radius:3px; padding:5px 10px}
.chip.small{ font-size:9px; padding:3px 7px; letter-spacing:.1em }

/* ---- a one-spread book, for panels that do not page ---- */
.plainbook{
  position:relative; z-index:2; width:min(1000px,100%); max-height:88svh; overflow:auto;
  display:block; border-radius:3px;
  background:var(--grain),linear-gradient(180deg,#FDFAF3 0%,#F7F1E4 60%,#EFE7D5 100%);
  background-size:140px 140px,auto;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 40px 70px -30px rgba(0,0,0,.85);
  animation:open .32s cubic-bezier(.2,.7,.3,1)}
.plainbook .spread{
  display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) }
.plainbook .leaf{ padding:40px 36px 42px }
.plainbook .leaf.left{ padding-right:24px }
.plainbook .leaf.right{ padding-left:24px }

@media (max-width:820px){
  .plainbook .spread{ grid-template-columns:1fr }
  .plainbook .leaf{ padding:28px 22px 10px }
  .plainbook .leaf.right{ padding:6px 22px 30px }
  .parts li{ padding-left:34px }
}


/* ---- one panel pointing at the next ----
   The room used to be four drawers that knew nothing about each other. A
   line at the foot of each panel says what comes next and opens it, which
   is the difference between a menu and a path. */
.handoff{
  font-size:14px; line-height:1.62; color:#7A6743; margin:20px 0 0;
  padding-top:16px; border-top:1px solid rgba(120,100,64,.24)}
.book .handoff, .plainbook .handoff{ max-width:44ch }
.screencopy .handoff{ color:#93A2BC; border-top-color:rgba(255,255,255,.12) }

.linkish{
  font:inherit; font-size:14px; font-weight:700; color:var(--orange-text);
  background:none; border:none; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px}
.linkish:hover{ color:#96430F }
.screencopy .linkish{ color:#F49A56 }
.screencopy .linkish:hover{ color:#fff }
button.btn{ font:inherit; font-weight:700; font-size:15px; cursor:pointer }

/* ============================================================
   5. THE ROOM INDEX.

   The frame crops on a phone: at 390px wide it shows roughly the
   middle 29% to 71% of the picture, so a marker on the shelf or
   on an end chair is genuinely off screen there, not just small.
   This is a plain row of the same targets under the frame, so
   nothing in the room is unreachable on the device most people
   are holding. It carries the same data-open values, and the
   existing handler picks it up with no new JavaScript.
   ============================================================ */
.roomindex{ display:none; gap:8px; flex-wrap:wrap; padding:0 22px 4px; max-width:1100px;
  margin:0 auto; position:relative; z-index:2 }
.roomindex .ri{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#F3E7CE; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:9px 14px; cursor:pointer}
.roomindex .ri:hover, .roomindex .ri:focus-visible{ background:var(--orange-cta); border-color:transparent; color:#fff }
.roomindex .rilabel{ display:block; width:100%; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:#7E8CA6; margin:16px 0 2px }
@media (max-width:820px){ .roomindex{ display:flex } }

/* A marker on the right half of the frame hangs its label to the LEFT, or the
   label runs off the picture and covers the object it points at. Shared, because
   every room needs it: the boardroom for the chairs, the library for the ladder. */
.spot.tag-left .tag{ left:auto; right:calc(100% - 6px) }
@media (max-width:820px){ .spot.tag-left .tag{ left:50%; right:auto } }

/* On a phone the labels come off entirely. At that crop several of them
   collide whichever way they hang, so the rings stay tappable and the chip
   row above does the naming. This lives with .roomindex on purpose: they are
   two halves of one decision, and a room that has one needs the other. */
@media (max-width:820px){
  .spot .tag{ display:none }
  .spot .ring{ width:24px; height:24px }
  .spot .ring::after{ inset:6px }
}

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

   "I do think we need to connect items more like each room has links to
   other rooms. like the wall in the receptionist should lead to other
   things etc. the receptionist area should also have links to the library
   the founders office etc."

   Before this the whole site had exactly one cross-room link, a sentence in
   reception's front-desk panel. Every room now carries the same directory,
   authored identically on each page, reachable from its chip row and from a
   real object where the picture has one. Reception's is the panel on the
   far-left wall.

   The room you are standing in is listed but not a link, so the directory
   never offers you a door back into the room you are already in.
   ============================================================ */
.dirlist{ margin:20px 0 4px; padding:0; list-style:none; display:grid; gap:0 }
.dirlist li{
  position:relative; padding:15px 0 15px 26px;
  border-top:1px solid var(--border);
  font-size:14.4px; line-height:1.6; color:var(--ink-soft);
}
.dirlist li:last-child{ border-bottom:1px solid var(--border) }
/* a door plate down the left edge of each row */
.dirlist li::before{
  content:""; position:absolute; left:0; top:1.3em; width:11px; height:15px;
  border-radius:1px 2px 2px 1px;
  background:linear-gradient(180deg,var(--orange),#B85416);
  box-shadow:0 1px 2px rgba(60,46,20,.45);
}
.dirlist b{
  display:block; font-family:var(--font-display); font-size:16px;
  color:var(--ink); margin:0 0 3px;
}
.dirlist a{ text-decoration:none }
.dirlist a b{ color:var(--orange-text) }
.dirlist a:hover b{ text-decoration:underline }
/* the room you are in: present, but not a door */
.dirlist .dirhere{ color:#8A7D66 }
.dirlist .dirhere::before{ background:linear-gradient(180deg,#C9B487,#A98F5C) }
.dirlist .dirhere b{ display:inline; color:#8A7D66 }
.dirlist .dirnote{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#A08F6C; margin-left:9px;
}
/* The way to the directory that survives every width: the chip row is phone
   only, and a marker needs a real object in that room's plate. */
/* THIS LINE SITS ON THE DARK ROOM, NOT ON A LIGHT PANEL (fixed 2026-09-01).
   It was taking --ink-soft (#4A3D28), a dark brown meant for cream panels, and
   painting it on .room's near-black #070B14. Measured on the live pages: the
   text came out at 1.86:1 and the link at 3.74:1, against the 4.5:1 AA needs
   for body text. It was there on /about, /services and /nina and you could
   not read any of them.

   The Library does not have this line at all any more: Nina's answer there was
   to put the directory on the globe and delete the sentence. Here the kiosk
   marker already says DIRECTORY inside the picture, so this is a second way in
   rather than the only one, and it just needs to be legible.

   Matched to its own siblings instead of guessed: .roomcopy .sub is #B9C3D6 on
   this ground, and the room's interactive colour is the markers' cyan, not the
   orange that reads as a link on white. */
.roomdir{ margin:12px 0 0; font-size:14px; color:#B9C3D6 }
.roomdir .linkish{ font-weight:700; color:var(--cyan) }
.roomdir .linkish:hover{ color:#fff }