Sage Studio.

Layout

• The viewport is a matte desk in #c6ccc5. Every slide is one rounded sheet of paper lying on it: position absolute, inset 2.2vh 2vw, radius 28px, padding 4.6vh 4.5vw 3.8vh, a grid of three rows (auto 1fr auto). White sheets are paper (98% white mixed with 2% #c6ccc5); section sheets add class dark and are ink (97% #0f0f0f mixed with #c6ccc5) with the tokens flipped inside them (fg becomes paper, muted/line/card become translucent paper, the accent is lightened 30% toward paper). Text is #0f0f0f in Geist, weights 400-600 only, tight tracking (-.02em on body headings, -.04em to -.06em on display sizes).
• Sheet chrome, identical on every sheet. Top row: an outlined pill top-left labelling the slide ("WELCOME", "SECTION 03", "PART 4") at .66rem uppercase, letter-spacing .14em, weight 500, 1px border at 32% ink, fully rounded; a brand mark top-right (an eight-spoke asterisk SVG plus the name, .8rem weight 600). Bottom row: .7rem muted meta, a section descriptor left ("Results & Retention") and "Confidential · P.03" right (the number from data-idx). The body sits between them.
• Recurring motifs. huge numerals ("01." at 6.4vw weight 500 letter-spacing -.06em; on ink sheets a giant "04" at 22vw weight 400 coloured exactly #c6ccc5, top-right of the body, behind the content); 45-degree arrow icons (a 24-unit stroked SVG, 1.6vw, pointing NE by default, with NW/SE/SW variants); 1px hairline rules in rgba(15,15,15,.12) under headers, between columns and between list rows; 24px tiles in three fills (ink, sage = #c6ccc5 pushed 8% toward ink, light grey #eef0ed); grayscale imagery (every .frame gets filter: grayscale(1), no captions); and a circle button (3.4vw, min 44px, 1px border, inverts on hover) holding an arrow. #3f7d5a appears only as signal: ring and bar fills, timeline dots and week labels, the carousel's active dot, focus rings; on ink sheets it is lightened 30% toward paper.
• Compositions, one per slide, chosen from this menu: (1) cover: a 30vh strip of three grayscale frames across the top, the title at 9vw weight 500 line-height .9 on two lines bottom-left, and a right column with the lede, a hairline and "YEAR / 2026 / domain" in tiny uppercase. (2) numerals: a header row (title clamp(1.9rem,3.1vw,3.6rem) left, muted lede right-aligned, hairline under) over three hairline-divided columns, each "01." with an arrow, a weight-600 heading, a muted paragraph and a 26vh grayscale frame pushed to the bottom. (3) bento: a 4x2 grid of tiles with 1vw gaps: one ink tile spanning two columns with the hero number at 5.2vw and an arrow in the corner, sage tiles with a thin line icon top-right and the number bottom-left, one light tile holding the three ring charts, one photo tile. (4) section sheet: ink, the giant numeral, the title clamp(2.6rem,5.4vw,6.4rem) bottom-left with a circle button on the same baseline, the lede, then the timeline across the lower half. (5) words: header row, then one centred sentence at clamp(1.7rem,3.2vw,4rem) weight 500 whose last clause is wrapped in <span class="tail"> at 30% ink, the attribution under it, carousel dots and arrows centred. (6) three fills: the compare object as a sage "before" tile and an ink "after" tile (2.8vw headings bottom-aligned above hairline-separated rows, a corner arrow each) over a full-width light "Facts" tile with a pill and one line. (7) section sheet, split: title and lede bottom-left, a numbered hairline list (counters "01"-"04" at .68rem) bottom-right with a circle button under it.
• Signature motion, "sheets on a desk": the incoming sheet starts at opacity 0, transform translateY(6vh) scale(.96), and settles to none over 800ms cubic-bezier(.22,1,.36,1) (opacity 350ms); the outgoing sheet stays underneath (lower z-index) and settles back to translateY(-1vh) scale(.94), fading to 0 over 500ms after a 150ms delay, as if the new sheet were laid on top of it. Inside the incoming sheet every big numeral and title sits in an overflow-hidden .mask and rises from translateY(125%) to 0 over 700ms with the same ease, delayed 300ms + k x 120ms in document order; arrows rotate in from -45 degrees at scale .7 and opacity 0 over 600ms, delayed 450ms + k x 120ms; the pill/brand row and the meta row fade in last (500ms, 700ms delay). Objects with class reveal stagger from 600ms (body data-reveal-delay="600"); rings and count-ups start at 700ms (data-animate-delay="700"). Only transform and opacity animate.
• On the mat, outside the sheets: a row of dot buttons bottom-centre (6px dots at 30% ink; the active one stretches into a 20px pill in full ink) and a tiny "→ next sheet" hint bottom-left that fades after the first slide. Nothing else.
• Under 760px the sheet inset becomes 1.5vh 3vw, the sheet scrolls, columns and tiles stack (the bento becomes two columns of 9rem tiles), the giant numeral drops to 40vw and the circle buttons hide.

Navigation. ← → ↑ ↓ Space PageUp/PageDown move; Home/End; number keys 1-9 jump; the dots and the circle buttons are real buttons with data-goto; touch swipe works. No wheel navigation.