/* ============================================================
   THE DETAIL UNDER THE ROOM (2026-08-24)

   The old desk-styled services.html carried six sections the
   conference room never had: what we actually build, the four
   industry agents, the three layers, the tool-choice paragraph,
   the running stack, and the Copilot numbers. Nina: "I wanna
   keep the information. We can merge it... I do like that
   information, like Vera, having a example."

   So this file is that material, styled to sit UNDER the room in
   ordinary white sections. It is deliberately quieter than the
   room. The room does the wow once; everything a person actually
   has to read sits on plain paper at full contrast.

   Nina chose option C on 2026-08-24, after seeing three built as
   working pages: the room keeps its four objects and the four
   agents take seats at the table, and everything else is read
   here rather than tapped. Her word was just "c".

   Loaded after assets/styles.css and assets/services-room.css.
   ============================================================ */

/* ---- a section in the same key as .roompage ---- */
.mergeband{ background:var(--white); padding:74px 0 76px; border-top:1px solid var(--border) }
.mergeband.alt{ background:var(--soft) }
.mergeband .eyebrow{ color:var(--orange-text); letter-spacing:.24em; margin:0 0 13px }
.mergeband 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:22ch; text-wrap:balance}
.mergeband .lede{ font-size:16.5px; line-height:1.66; color:#374151; margin:0 0 38px; max-width:64ch }
.mergeband .lede a{ color:var(--orange-text); font-weight:700 }

/* ============================================================
   1. WHAT WE BUILD. Six things, numbered, read straight down in
   two columns. No tilt: every one of these has a sentence in it.
   ============================================================ */
.buildlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2px;
  margin:0; padding:0 }
.buildlist li{ list-style:none; position:relative; padding:22px 22px 22px 44px;
  border-top:1px solid var(--border) }
.buildlist li::before{
  content:attr(data-n); position:absolute; left:0; top:22px;
  width:28px; height:28px; border-radius:3px; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; color:#fff; background:var(--orange-cta)}
.buildlist li:nth-child(1)::before{ background:var(--teal-text) }
.buildlist li:nth-child(3)::before{ background:var(--blue-text) }
.buildlist li:nth-child(4)::before{ background:var(--purple) }
.buildlist li:nth-child(5)::before{ background:var(--green-text) }
.buildlist li:nth-child(6)::before{ background:var(--amber-text) }
.buildlist b{ display:block; font-family:var(--font-display); font-size:17.5px; color:var(--text); margin:0 0 5px }
.buildlist span{ display:block; font-size:14.6px; line-height:1.65; color:#374151; max-width:44ch }

/* ============================================================
   2. THE FOUR AGENTS. Nina asked for these by name. Each one is
   an Implementation with the discovery already done for one
   industry, so it reads as a worked example rather than a
   product page: who it is for, what it does, and the core module
   marked as the only one you start with.
   ============================================================ */
.agentgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
  align-items:start }

/* A card is a button that opens the same panel the chair does. Nina: "there's
   too much information, so make it where you have to click it to expand it."
   Expanding in place was the other option and it broke the row she asked for:
   a middle card going full width leaves the fourth one stranded on its own.
   Opening the panel keeps four across at every width, and it means the page
   has one behaviour instead of two, since the room above does exactly this. */
.agentcard{
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  padding:22px 20px 20px; border-radius:4px;
  background:var(--white); border:1px solid var(--border);
  box-shadow:0 14px 28px -20px rgba(20,26,40,.5);
  transition:border-color .15s ease, transform .15s ease}
.agentcard:hover{ border-color:#D2D7DE; transform:translateY(-2px) }
.agentcard:focus-visible{ outline:3px solid var(--orange); outline-offset:3px }
.agentcard .badge{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1;
  color:#231C11; margin:0 0 13px}
.agentcard .nm{
  display:block; font-family:var(--font-display); font-weight:700; font-size:20px;
  color:var(--text)}
.agentcard .nm .role{
  display:block; font-family:var(--font-body); font-weight:600; font-size:13px;
  color:var(--muted); margin-top:3px}
/* two lines' worth, so a long industry name does not make one card taller */
.agentcard .for{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-text); margin:12px 0 0;
  min-height:2.5em; line-height:1.25}
.agentcard .more{
  display:inline-flex; align-items:center; gap:7px; margin:14px 0 0;
  font-size:13.5px; font-weight:700; color:var(--orange-text)}
.agentcard .more::after{
  content:""; width:7px; height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(-45deg) translate(-2px,0);
  transition:transform .15s ease}
.agentcard:hover .more::after{ transform:rotate(-45deg) translate(1px,0) }
@media (prefers-reduced-motion:reduce){
  .agentcard, .agentcard .more::after{ transition:none }
  .agentcard:hover{ transform:none }
}

/* An old deep link (/services.html#retainer) still has to land somewhere, but
   an anchor must never be a grid child: as a direct child of .svc-lanes it
   took a cell of the three-column grid and pushed Operations onto a second
   row. It lives inside the card now, out of flow. */
.deeplink{ position:absolute; top:-90px; left:0; width:1px; height:1px }

/* ============================================================
   3. THE THREE LAYERS. The old page said this in two paragraphs.
   It is a diagram, so it is drawn as one: three stacked bars,
   widest at the bottom, because most work is workflow and only
   the top slice needs judgment.
   ============================================================ */
.layers{ display:grid; gap:12px; max-width:760px; margin:0 0 30px; padding:0 }
.layers li{ list-style:none; position:relative; padding:20px 22px 18px 22px; border-radius:4px;
  border:1px solid var(--border); background:var(--white)}
.layers .l1{ border-left:5px solid var(--teal) }
.layers .l2{ border-left:5px solid var(--blue) }
.layers .l3{ border-left:5px solid var(--orange) }
.layers b{ display:block; font-family:var(--font-display); font-size:18px; color:var(--text); margin:0 0 4px }
.layers .tagline{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:block; margin:0 0 8px }
.layers span.d{ display:block; font-size:14.6px; line-height:1.65; color:#374151; max-width:56ch }
.layers .cost{ display:block; font-size:13.4px; line-height:1.6; color:var(--muted); margin-top:8px }

/* The proof band that carried the running stack and the Copilot numbers was
   removed on 2026-08-24. Nina: "we'll come back to adding more stuff back
   there." Its rules went with it rather than sitting here unused. */

/* ---- the agent panels that open from the seats ---- */
.agentsheet{ width:min(620px,100%) }
.agentsheet .role{ display:block; font-family:var(--font-body); font-weight:600; font-size:13.5px;
  color:#8A7D66; margin-top:4px }
.agentsheet .for{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-text); margin:0 0 16px}
.agentsheet ul{ list-style:none; margin:18px 0 0; padding:0 }
.agentsheet li{ font-size:14.5px; line-height:1.62; color:#4A3D28; padding:13px 0 13px 24px;
  border-top:1px solid rgba(120,100,64,.22); position:relative }
.agentsheet li::before{
  content:""; position:absolute; left:0; top:1.15em; width:11px; height:11px; border-radius:2px;
  border:1.5px solid rgba(120,100,64,.4)}
.agentsheet li.core::before{ background:var(--orange); border-color:var(--orange) }
.agentsheet li b{ color:#231C11 }

@media (max-width:1080px){
  .agentgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:620px){
  .agentgrid{ grid-template-columns:1fr }
}
@media (max-width:900px){
  .mergeband{ padding:54px 0 56px }
  .buildlist li{ padding:19px 12px 19px 42px }
  .buildlist li::before{ top:19px }
}

/* ---- the markers on the four seats ---- */
/* Eight markers is already dense, so the four seats carry a name only, in
   a smaller chip with no pulse, and the ring does the pointing. The four
   original objects keep the louder marker: they are the path through the
   page, and the agents are examples hanging off it. */
.spot.seat .tag{ font-size:10px; padding:5px 9px; letter-spacing:.1em;
  background:rgba(10,14,24,.6) }
.spot.seat .ring{ width:20px; height:20px }
.spot.seat .ring::after{ inset:5px }
.spot.seat .ring::before{ animation:none; opacity:0 }



/* ============================================================
   THE ABOUT PAGE BELOW THE ROOM (Nina, 2026-08-27)

   "the About/receptionist items under the page is very random and doesn't
   look neat."

   It was six section systems stacked from three stylesheets: .roompage, then
   three .mergebands, then .section, .loop-section and .cta-band. Different
   padding, different heading sizes, eyebrows on some and not others, two dark
   bands in a row at the end, and two card rows laid out with ad-hoc inline
   flex and hardcoded font sizes.

   One vocabulary now: every section below the room is a .mergeband,
   alternating white and soft, ending in a single dark band. The classes below
   replace the inline styles so a card row is a named thing rather than a
   `style="display:flex"` repeated twice with different numbers.

   Content is unchanged. This is rhythm, not a rewrite, and the overlap
   between a panel and the section under it stays: everything a panel says has
   to be flat on the page too, for a reader skimming on a bus and for anything
   crawling the HTML.
   ============================================================ */

/* a row of equal cards, replacing two hand-rolled inline flex rows */
.cardrow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:20px; margin-top:26px;
}
.cardrow .quote-card{ margin:0 }

/* who works here: the agent's own face above their line */
.agent-face{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  margin-bottom:12px; display:block;
}
.agent-name{ margin:0 0 6px }
.agent-role{ margin:0 }

/* the founder block: portrait beside the line, centred on each other */
.mergeband .founder{ align-items:center; margin-top:20px }
.mergeband .founder-photo{ max-width:140px }
.founder-line{
  font-size:15.5px; color:#44403C; line-height:1.65; margin:0 0 14px; max-width:56ch;
}
.founder-cta{ margin:0 }

/* one button row, so the second button never needs an inline margin */
.btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }

/* The dark close: the loop diagram and "where we are" were two dark bands in
   a row, which read as one section that changed its mind halfway. */
.loop-section .loopclose{
  margin-top:54px; padding-top:38px;
  border-top:1px solid rgba(249,250,251,.16);
  text-align:center;
}
.loop-section .loopclose h3{
  font-family:var(--font-display); font-weight:700; font-size:24px;
  color:var(--text-inverted,#F9FAFB); margin:0 0 12px;
}
.loop-section .loopclose p{
  max-width:64ch; margin:0 auto 22px; font-size:15.5px; line-height:1.66;
}