/* What we do (#services), under the Stella language stage (css/stage.css): the 8 services as a two-by-two "bento" (QB's
   pick 10-16 14:5x, option C of quarterback/preview/2026-10-16-services-v3/). Each card: its kind-of-work tag, a small
   product window drawn in HTML (a call log, an overnight run, Mission Control's first screen, an AI answer), then its two
   services, words as approved. Colours are css/layers.css's. No arrows on titles; the four with pages are quiet links. */

/* ---------- shared: card, items ---------- */
.wk3 { margin-top: 28px; }
.wk3__card {
  display: grid; align-content: start; gap: 16px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.wk3__card:hover { border-color: color-mix(in srgb, var(--c) 60%, #fff); box-shadow: 0 28px 48px -40px color-mix(in srgb, var(--c) 70%, transparent); }
.wk3__items { display: grid; gap: 16px; }
.wk3__items--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.wk3__item { display: grid; align-content: start; gap: 6px; }
.wk3__item h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
.wk3__item h3 a { text-decoration: none; padding-block: 10px; } /* a 44px tap target; inline, so the title does not move */
.wk3__item h3 a:hover { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 4px; }
.wk3__item p { color: var(--ink-2); font-size: var(--step-0); line-height: 1.5; }
.wk3__item p + p { font-size: 0.95rem; }
.wk3__item p a { color: var(--c-ink); }
.wk3 .layer-tag { font-size: 0.78rem; }
.services .note { margin-top: 18px; }

/* ---------- the product window (one per kind of work) ---------- */
.vis {
  container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; border-radius: 16px;
  display: grid; align-items: center; padding: 6%; color: var(--ink); /* % not cqw: cq units on the container itself resolve against the viewport. The window is always WHOLE: even padding on all four sides, never docked or cut; spare card height goes to the frame, not the window. */
  background:
    radial-gradient(75% 85% at 70% 0%, color-mix(in srgb, var(--c) 42%, transparent) 0%, transparent 62%),
    radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--c) 22%, transparent) 0%, transparent 70%),
    var(--night);
}
.vis::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, #ffffff1a 1px, transparent 1.5px) 0 0 / 14px 14px; -webkit-mask-image: radial-gradient(70% 70% at 70% 20%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 20%, #000 0%, transparent 75%); }
.win { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; min-height: 54cqw; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 30px 60px -30px #000, 0 0 0 1px #ffffff22; font-family: var(--font-body); }
.win__bar { display: flex; align-items: center; gap: 2.4cqw; padding: 2.2cqw 3cqw; border-bottom: 1px solid var(--line); font: 500 max(11px, 2.5cqw)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.win__dots { display: inline-flex; gap: 1.2cqw; }
.more { font-style: normal; } /* the optional tail of a line (hidden in very narrow windows, never cut mid-word) */
.win__dots i { width: max(6px, 1.9cqw); height: max(6px, 1.9cqw); border-radius: 50%; background: var(--line); }
.win__body { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: space-between; min-height: 0; }
/* the numbers row under a log: side numbers, the one big number in the middle (house pattern) */
.nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2cqw; padding: 1.5cqw 3cqw 3cqw; text-align: center; }
.nums b { display: block; font: 600 max(15px, 5.2cqw)/1 var(--font-display); letter-spacing: -0.03em; }
.nums em { display: block; margin-top: 0.8cqw; font: 500 max(11px, 2.4cqw)/1.2 var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.nums__big b { font-size: max(24px, 9.5cqw); color: var(--c-ink); }
.nums__big em { color: var(--c-ink); }

/* 1 · Customer response: a day of calls, every one answered. Pins pop in through the day. */
.day { position: relative; margin: 2cqw 5cqw 0; min-height: 24cqw; }
.day__track { position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: var(--line); }
.day__tick { position: absolute; left: calc(var(--x) * 1%); bottom: 0; transform: translateX(-50%); font: 500 max(11px, 2.4cqw)/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.day__tick[style="--x:0"] { transform: none; } .day__tick[style="--x:100"] { transform: translateX(-100%); }
.call { position: absolute; left: calc(var(--x) * 1%); top: 52%; transform: translate(-50%, -50%); display: grid; place-items: center; animation: wk3-pop 10s ease-out infinite; animation-delay: calc(var(--i) * 0.8s); }
.call i { width: max(10px, 3cqw); height: max(10px, 3cqw); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 max(3px, 1.1cqw) color-mix(in srgb, var(--c) 22%, #fff); }
.call b { position: absolute; bottom: calc(100% + 1.2cqw); white-space: nowrap; padding: max(2px, 0.8cqw) max(6px, 1.8cqw); border-radius: 999px; font: 600 max(11px, 2.5cqw)/1.1 var(--font-body); color: var(--c-ink); background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.call:nth-child(odd) b { bottom: auto; top: calc(100% + 1.2cqw); }
@keyframes wk3-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 6%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }

/* 2 · Automation & AI teams: the overnight run, jobs ticking off. */
.jobs { list-style: none; margin: 0; padding: 2.4cqw 3.5cqw 0; display: grid; align-content: center; gap: max(6px, 2cqw); }
.jobs li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 2.4cqw; font: 500 max(11px, 3cqw)/1.2 var(--font-body); white-space: nowrap; overflow: hidden; }
.jobs li > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.jobs__t { font: 500 max(11px, 2.5cqw)/1 var(--font-mono); color: var(--ink-2); }
.jobs i { position: relative; width: max(14px, 4.4cqw); height: max(14px, 4.4cqw); border-radius: 50%; border: 1.5px solid var(--line); animation: wk3-tick 10s ease-out infinite; animation-delay: calc(var(--i) * 1s); }
.jobs i::after { content: ""; position: absolute; left: 50%; top: 46%; width: 28%; height: 50%; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -55%) rotate(45deg); opacity: 0; animation: wk3-check 10s ease-out infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes wk3-tick { 0%, 4% { background: #fff; border-color: var(--line); } 8%, 90% { background: var(--c); border-color: var(--c); } 100% { background: #fff; border-color: var(--line); } }
@keyframes wk3-check { 0%, 5% { opacity: 0; } 9%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* 3 · Your own software: Mission Control, the first screen (nav, three cards, the money bar with its goal). */
.mc { display: grid; align-content: start; gap: 2.4cqw; padding: 2.4cqw 3.2cqw; min-width: 0; overflow: hidden; }
.mc__nav { display: flex; align-items: center; gap: 2.4cqw; overflow: hidden; min-width: 0; font: 500 max(11px, 2.6cqw)/1 var(--font-body); color: var(--ink-2); white-space: nowrap; }
.mc__nav .mc__on { color: var(--ink); font-weight: 600; padding: 0.9cqw 1.6cqw; border-radius: 999px; background: var(--mist); }
.mc__gigi { margin-left: auto; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 0.9cqw 2cqw; border-radius: 999px; background: var(--teal-wash); color: #055768; font-weight: 600; }
.mc__gigi i { width: max(6px, 1.6cqw); height: max(6px, 1.6cqw); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 max(2px, 0.6cqw) #3cc3d455; }
.mc__cards { display: grid; grid-template-columns: 1fr 1fr 1.55fr; gap: 1.8cqw; min-width: 0; }
.mc__card { display: grid; align-content: start; gap: 0.6cqw; min-width: 0; overflow: hidden; padding: 2cqw 2.4cqw; border-radius: max(6px, 2cqw); border: 1px solid var(--line); background: linear-gradient(160deg, #fff, var(--mist)); }
.mc__k { font: 500 max(11px, 2.3cqw)/1.1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.mc__card b { font: 600 max(15px, 5.2cqw)/1 var(--font-display); white-space: nowrap; letter-spacing: -0.03em; color: var(--c-ink); }
.mc__s { font: 500 max(11px, 2.4cqw)/1.2 var(--font-body); color: var(--ink-2); white-space: nowrap; }
.mc__wait { display: grid; gap: 1.2cqw; padding: 2cqw 2.4cqw; border-radius: max(6px, 2cqw); border: 1px solid var(--line); }
.mc__line { display: flex; align-items: center; gap: 1.6cqw; font: 500 max(11px, 2.6cqw)/1.2 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc__line i { flex: none; width: max(8px, 2.2cqw); height: max(8px, 2.2cqw); border-radius: 50%; border: 1.5px solid var(--c); }
.mc__bar { position: relative; display: block; height: max(6px, 1.8cqw); margin-top: 0.8cqw; border-radius: 999px; background: var(--line); }
.mc__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; border-radius: 999px; background: var(--c); animation: wk3-fill 10s ease-out infinite; }
.mc__bar em { position: absolute; right: 1%; top: 50%; transform: translateY(-50%); width: max(3px, 0.8cqw); height: max(12px, 3.6cqw); background: var(--ink); border-radius: 2px; }
@keyframes wk3-fill { 0% { width: 0; } 12%, 90% { width: 56%; } 100% { width: 56%; } }

/* 4 · Website, brand & visibility: an AI answer, with you as the pick. */
.ai { display: grid; align-content: start; gap: 2.4cqw; padding: 2.6cqw 3.2cqw; }
.ai__q { display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 2.6cqw; border-radius: 999px; border: 1px solid var(--line); background: var(--mist); font: 500 max(11px, 3cqw)/1.2 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai__q svg { flex: none; width: max(12px, 3.4cqw); height: max(12px, 3.4cqw); fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.ai__a { display: grid; gap: 1.6cqw; animation: wk3-answer 10s ease-out infinite; }
.ai__lbl { font: 500 max(11px, 2.3cqw)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.ai__pick { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2cqw; align-items: center; padding: 2cqw 2.4cqw; border-radius: max(6px, 2cqw); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); background: color-mix(in srgb, var(--c) 7%, #fff); }
.ai__pick svg { grid-row: span 2; width: max(16px, 5.2cqw); height: max(16px, 5.2cqw); fill: var(--c); stroke: #fff; stroke-width: 1.4; animation: wk3-pin 10s ease-out infinite; }
.ai__pick b { font: 600 max(12px, 3.6cqw)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.ai__pick span { font: 500 max(11px, 2.5cqw)/1.25 var(--font-body); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai__row { display: flex; align-items: center; gap: 1.8cqw; font: 500 max(11px, 2.6cqw)/1.2 var(--font-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.ai__row > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ai__row b { color: var(--ink); }
.ai__g { flex: none; display: inline-grid; place-items: center; width: max(14px, 4cqw); height: max(14px, 4cqw); border-radius: 50%; border: 1px solid var(--line); background: #fff; font: 700 max(11px, 2.4cqw)/1 var(--font-display); color: var(--ink); }
@keyframes wk3-answer { 0%, 8% { opacity: 0; transform: translateY(4px); } 16%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wk3-pin { 0%, 14% { transform: scale(0.4); opacity: 0; } 22%, 90% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }

/* Narrow windows (option A at 1440, phones): the pins keep their colour but lose their labels; the nav keeps three tabs. */
@container (max-width: 340px) {
  .call b { display: none; }
  .more { display: none; }
  .mc__nav > span:nth-child(4), .mc__nav > span:nth-child(5) { display: none; }
  .mc__cards { grid-template-columns: 1fr 1fr 1.4fr; gap: 1.4cqw; }
  .jobs { gap: max(4px, 1.6cqw); }
}
/* Very narrow windows (option A at 1440 only, ≈ 225 px): the dashboard keeps its three numbers and loses its small lines. */
@container (max-width: 260px) {
  .mc__gigi { padding-inline: 1.6cqw; font-size: 0; gap: 0; }
  .mc__gigi i { width: 8px; height: 8px; }
  .mc__s { display: none; }
  .mc__wait { display: none; }
  .mc__cards { grid-template-columns: 1fr 1fr 1.7fr; }
}

@container (max-width: 560px) { .mc__nav > span:nth-child(5) { display: none; } }

/* ---------- C · bento: two by two, bigger windows, bigger words (room for them) ---------- */
.wk3-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wk3-c .wk3__card { padding: 24px; gap: 18px; }
.wk3-c .wk3__card { grid-template-rows: auto minmax(0, 1fr) auto; }
.wk3-c .vis { align-self: stretch; padding: 5%; }
.wk3-c .wk3__item h3 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }
.wk3-c .wk3__item p { font-size: 1.06rem; }
.wk3-c .wk3__item p + p { font-size: 0.97rem; }
@media (max-width: 760px) { .wk3-c { grid-template-columns: 1fr; } .wk3-c .wk3__card { padding: 20px; } }
@media (max-width: 480px) { .wk3-c .wk3__items--row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .call, .jobs i, .jobs i::after, .mc__bar i, .ai__a, .ai__pick svg{ animation: none; }
  .call { opacity: 1; } .jobs i { background: var(--c); border-color: var(--c); } .jobs i::after { opacity: 1; } .ai__a { opacity: 1; } .ai__pick svg { opacity: 1; transform: none; }
  .wk3__card { transition: none; }
}