Action Title.

Layout

• Light, businesslike sheet on #f7f7f5, ink #12263a. A fixed .sheet covers the viewport with padding 5vh 5vw 0 and two rows: the section tracker (auto) and the stage (1fr), 2.2vh apart. Every slide sits in the same grid area of the stage and is itself a grid with rows: title block (auto), exhibit panel (1fr), takeaway bar (auto), footer (auto), gap 2.2vh, padding-bottom 2.6vh. Nothing is decorative; radius stays at 4 everywhere.
• Section tracker. one chevron per slide across the full width, built by JS from each slide's data-title. Each is a <button data-goto> with flex:1, min-width 0, padding .5rem 1.2rem, font-size .72rem, weight 500, uppercase, letter-spacing .08em, nowrap with ellipsis, and the chevron shape clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%), the first chevron drops the left notch, the last drops the right point. Gap 2px. Future chevrons: background color-mix(in oklab, #12263a 6%, #f7f7f5), text #5b6b7c. Visited (.done): 13% ink tint, darker text. Active: solid #0b6bcb, text #ffffff, weight 600. Only background and color animate, .45s ease.
• Title block. a 0.72rem uppercase kicker in #0b6bcb (the short data-title label), then the action title as <h2> at clamp(1.5rem, 2.5vw, 2.4rem), weight 600, line-height 1.25, letter-spacing -.01em, max-width 54ch, left aligned, deliberately not poster-sized, because it is a sentence. Under it a 2px rule in #12263a drawn with transform: scaleX(0)→1 from the left. The cover slide alone may take clamp(2.2rem, 4.2vw, 3.8rem), max-width 24ch.
• Exhibit panel. one white #ffffff surface, 1px rgba(18,38,58,.14) hairline, radius 4, padding clamp(1rem, 2vw, 2rem), overflow hidden, contents vertically centred with clamp(.8rem, 1.6vh, 1.3rem) gaps. It holds the slide's lede (0.9–1.02rem, #5b6b7c) and exactly one object. This is the only panel on the slide, so it gets the whole middle row.
• Takeaway bar. full width, background color-mix(in oklab, #0b6bcb 8%, #f7f7f5), a 3px #0b6bcb bar down the left edge, padding .9rem 1.2rem; the word "So what" at 0.7rem uppercase letter-spacing .12em in #0b6bcb, then the takeaway sentence at 1rem weight 500.
• Footer. a 1px rgba(18,38,58,.14) top hairline, .7rem padding, then a 1fr/auto/1fr row at 0.72rem #5b6b7c with tabular figures, source line left ("Source: …"), deck name plus "Confidential, for discussion only" centred, "Page 03 of 07" right via [data-idx]/[data-total].
• Signature exhibit, the 2×2 matrix (.qmap): grid of columns [y-axis title][y tick labels][1fr][1fr] and rows [1fr][1fr][x ticks][x-axis title], max-width 58rem, centred, column-gap .7rem. The y-axis title is writing-mode: vertical-rl + rotate(180deg), 0.72rem uppercase weight 600; the two y tick labels sit in a 5rem column at 0.72rem #5b6b7c; each quadrant is a 1px rgba(18,38,58,.14) cell with a weight-600 name at clamp(.92rem,1.15vw,1.08rem) and one muted line beneath. The "where we are now" cell takes background color-mix(in oklab, #0b6bcb 8%, #ffffff), a #0b6bcb border, and a pin at the bottom: a .5rem solid accent dot plus the label "Today" in 0.7rem uppercase. A second, hollow-dot pin in #5b6b7c can mark where the business used to sit. Axes must carry real words and units, e.g. x = "Engagement length" (Short, 4 weeks or less → Long, 7 weeks or more), y = "Deliverable" (Document → Working software).

Motion, "the case lands", under 1.1s end to end, transform/opacity/clip-path only

• Outgoing slide. opacity 1→0 over 250ms ease.
• Incoming slide, all on the [data-state="active"] selector: the tracker fill slides (background .45s ease); the action title rises translateY(10px)→0 with opacity 0→1, 400ms ease/cubic-bezier(.22,1,.36,1), delay 50ms; the rule draws scaleX(0)→1, 600ms cubic-bezier(.22,1,.36,1), transform-origin left, delay 100ms; the exhibit panel wipes up clip-path: inset(100% 0 0 0) → inset(0 0 0 0), 600ms cubic-bezier(.22,1,.36,1), delay 150ms, with its contents already in place; the takeaway bar arrives last, translateY(12px)→0 and opacity 0→1, 500ms, delay 450ms; the footer fades in at 500ms. Set <body data-reveal-delay="500" data-animate-delay="500"> so the shared .reveal stagger and the charts start after the wipe.
• Under 900px the tracker becomes a horizontally scrollable row of auto-width chevrons (scroll the active one into view by setting scrollLeft, not scrollIntoView), the takeaway bar wraps, the footer stacks left-aligned, the exhibit loses padding down to .9rem and the matrix drops its y tick column.

Writing rules (these are what make the deck professional, follow them for every slide)

• Action titles. The headline is the finding, written as a full sentence with a verb. Good: "A smaller roster lifted retention to 92% and cut delivery time by 38%." Bad: "Retention". If a reader reads only the titles in order, they must get the whole argument.
• Two titles per slide. data-title stays a 1–3 word section label for the tracker and the kicker ("The numbers"); the action title is the long sentence. Both exist on every slide.
• The "so what". One takeaway line per slide in the bar, the implication, not a summary of the exhibit. "Retention, not new business, now funds the studio", never "Retention is 92%".
• MECE groups. Parallel items come in threes or fours, are the same kind of thing, do not overlap, and together cover the ground. Same grammatical shape, same length.
• Exhibits, not pictures. Every chart carries labels, units, an axis or legend where one is needed, and a source line: "Source: …" plus the base ("n = 6 engagements") when figures are compared. Figures use tabular-nums.

Navigation. → ↓ Space PageDown = next; ← ↑ PageUp = prev; Home/End; 1-9 jump; F fullscreen; touch swipe. No wheel. Clicking any chevron in the tracker jumps to that slide; the tracker is the only affordance, so there is no hint line.