The cutting room

A couture house cutting room

The advisory career is treated as a garment: measured (get licensed), cut (fill the calendar), sewn (do the work) and fitted (read the room), with each product presented as a pattern piece on the cutting table. High-fashion editorial typography sits over honest pattern-room craft — chalk, kraft, notches, pins — and one oxblood thread stitches the whole page together.

Muslin, kraft, ink, one silk thread

Product colours — #2dd4bf, #7aa2ff, #ff6b3d, #b79bff — appear solely as chalk tick marks, never as surfaces.

Editorial over utility

The running thread

An oxblood thread stitches the page together as you scroll: a dashed SVG path whose stitches fill in behind a scrubbed mask, led by a needle with a small glint. The path is rebuilt from the live positions of “stitch stop” anchors on every section, weaves through each pattern piece, and finishes by tying the bow on the walkthrough button.

Why: the thread is the argument. Four separate tools, one continuous standard of make — the stitch is the only thing that touches all four pieces, exactly as the company intends.

What is really in the seams

• Scroll-scrubbed stitchingGSAP ScrollTrigger (scrub 0.6) drives a stroke-dashoffset on an SVG mask, revealing the dashed stitch path progressively; needle position and rotation come from getPointAtLength. Falls back to a rAF scroll listener if GSAP is absent.
• Dynamic path buildingThe thread’s bezier route is computed in JS from DOM anchor offsets (transform-immune offsetTop chains), rebuilt on resize and font load, so it survives both viewports.
• Clip-path pattern piecesEach product panel is a CSS clip-path polygon with matched inner dashed seamline, ink notch triangles, grain-line arrows, pin dots and “CUT 1” annotations.
• Dry-media textures in CSSMuslin weave via crossed repeating-linear-gradients; kraft grain via low-opacity diagonal repeats; chalk ticks via skewed blocks under a repeating-gradient mask, revealed with a clip-path wipe.
• Editorial grid disciplineA 12-column grid alternates pattern piece and annotation columns; measurement tables use dotted leaders with Italiana figures.
• Settle choreographyIntersectionObserver lays each piece down like cloth — translate, a degree of tilt, and a soft drop-shadow bloom.
• Reduced motionprefers-reduced-motion renders the thread fully stitched, the bow tied and every piece settled — a dignified static plate, not a blank.