/* ---------- 03 · Process: a project that grows (PROCESS_CONCEPT_UK.md) ----------
   The road of four steps runs as a timer; the stage holds one project that changes state with
   the step. Each state is drawn here in all its beats from data-beat (0 before the beats, 1–3
   the beats; 3 is also the final look, the one written in the markup). process.js only moves the
   beats, turns the page and runs the timer. The stage measures itself (a size container): every
   shape is placed from its width and height, so nothing is read in motion. At rest everything
   is flat, with no perspective, so it stays sharp on Retina; only the 560 ms page turn is 3D. */
.process { position:relative; padding:clamp(88px,9vw,120px) 0; background:var(--paper); overflow:hidden; }
.process > .container { width:min(1520px,calc(100% - 128px)); }
.process-top { display:grid; grid-template-columns:minmax(0,52fr) minmax(0,48fr); grid-template-rows:auto auto 1fr;
  grid-template-areas:"intro stage" "road stage" "details stage"; column-gap:clamp(40px,4vw,72px); }
.process-intro { grid-area:intro; }
.process .eyebrow { display:flex; align-items:center; gap:14px; margin:0; letter-spacing:.18em; color:var(--muted); }
.process h2 { margin-top:22px; font-size:clamp(28px,3.1vw,50px); line-height:1.03; letter-spacing:-.038em; color:var(--ink); }
.process h2 > span { display:block; }
.process .headline-dot { display:inline-block; color:var(--accent); }
/* its glow when the idea appears on the stage (process.js) */
.process .headline-dot { position:relative; }
.process .headline-dot::after { content:''; position:absolute; left:50%; bottom:.12em; width:.62em; height:.62em; margin-left:-.31em; border-radius:50%;
  background:radial-gradient(circle,#f4b000b3,#f4b00000 68%); opacity:0; pointer-events:none; }
.process-lede { margin-top:20px; max-width:620px; font-size:var(--text-lead); line-height:1.52; color:var(--body); }

/* ── The road: four nodes on one line, three Saffron segments that fill as a timer ─────────── */
.roadmap { --node:44px; --gap:12px; grid-area:road; position:relative; margin-top:clamp(32px,3.2vw,48px); }
.road-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.road-step { display:grid; align-content:start; justify-items:start; gap:11px; padding:0; border:0; background:transparent;
  font:inherit; color:inherit; text-align:left; cursor:pointer; }
.road-step:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:4px; border-radius:6px; }
/* from the centre of node 01 to the centre of node 04: three columns and three gaps */
.road-track { position:absolute; left:calc(var(--node) / 2); top:calc(var(--node) / 2 - 1px); width:calc(75% + var(--gap) * .75); height:2px;
  display:flex; background:var(--line); transform-origin:left; pointer-events:none; }
.road-seg { flex:1; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.road-seg.is-full { transform:none; }
.road-node { position:relative; z-index:1; display:grid; place-items:center; width:var(--node); height:var(--node); border-radius:50%;
  border:1.5px solid var(--ink); background:var(--white); color:var(--ink); font-size:15px; font-variant-numeric:tabular-nums;
  transition:background 280ms var(--ease),border-color 280ms ease,color 280ms ease,box-shadow 280ms ease; }
.road-node > span { grid-area:1/1; transition:opacity 200ms ease; }
.road-check { opacity:0; font-weight:600; }
.road-ring { position:absolute; inset:-1.5px; border-radius:50%; box-shadow:0 0 0 6px var(--accent); opacity:0; pointer-events:none; }
.road-step.is-done .road-node { background:var(--ink); color:var(--on-dark); }
.road-step.is-done .road-num { opacity:0; }
.road-step.is-done .road-check { opacity:1; }
.road-step.is-active .road-node { background:var(--accent); border-color:var(--accent); color:var(--ink); font-weight:550; box-shadow:0 0 0 6px #f4b0001f; }
.road-title { font-size:clamp(16px,1.2vw,21px); font-weight:500; line-height:1.2; color:var(--ink); }
.road-brief { font-size:13.5px; line-height:1.5; color:var(--muted); text-wrap:balance; transition:color 260ms ease; }
.road-step.is-active .road-brief { color:var(--body); }
.road-caption { display:none; }
@media(hover:hover) and (pointer:fine) {
 .road-step:not(.is-active):not(.is-done):hover .road-node { box-shadow:0 0 0 5px #11131512; }
 .road-step:not(.is-active):hover .road-brief { color:var(--body); }
}

/* ── The step on the left: all four in one cell, so a change never moves what is below ───── */
.process-details { grid-area:details; display:grid; align-content:start; margin-top:clamp(28px,2.8vw,42px); }
.step-detail { grid-area:1/1; min-width:0; }
.step-detail:not(.is-active) { opacity:0; visibility:hidden; }
.step-index { margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.step-detail h3 { margin-top:10px; font-size:clamp(24px,2.1vw,36px); line-height:1.1; letter-spacing:-.03em; color:var(--ink); }
.step-body { margin-top:14px; max-width:50ch; font-size:16px; line-height:1.55; color:var(--body); }
.step-sub { margin:24px 0 0; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.tick-list { display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; font-size:15px; line-height:1.4; color:var(--body); }
.tick-list li { display:flex; align-items:flex-start; gap:12px; }
.tick { display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:6px; background:#11131512; color:var(--ink); font-size:11px; }

/* ── The stage: one project, measured from the stage itself ─────────────────────────────────
   Sheet (states 0 and 1): a portrait page. Window (2 and 3): a browser, 16:10, with a panel
   under it in the same frame. Both are centred, a little above the middle. Positions are
   rounded to whole pixels, so text and edges land on the pixel grid. */
.pj-stage { position:relative; grid-area:stage; align-self:stretch; min-height:600px; container:pj / size; touch-action:pan-y; }
.pj-body { position:absolute; inset:0;
  --cap:40px; --bar:34px; --panel:204px; --pad:16px; --lift:.42; --radius:16px;
  --sheet-h:round(min(104cqw, 100cqh - var(--cap) - var(--pad)), 1px);
  --sheet-w:round(calc(var(--sheet-h) * .76), 1px);
  --win-w:round(min(100cqw, (100cqh - var(--cap) - var(--bar) - var(--panel) - var(--pad)) * 1.6), 1px);
  --shot-h:round(calc(var(--win-w) * .625), 1px);
  --win-h:calc(var(--bar) + var(--shot-h) + var(--panel));
  --sheet-x:round(calc((100cqw - var(--sheet-w)) / 2), 1px);
  --sheet-y:round(calc(var(--cap) + (100cqh - var(--cap) - var(--sheet-h)) * var(--lift)), 1px);
  --win-x:round(calc((100cqw - var(--win-w)) / 2), 1px);
  --win-y:round(calc(var(--cap) + (100cqh - var(--cap) - var(--win-h)) * var(--lift)), 1px);
  --panel-y:calc(var(--win-y) + var(--bar) + var(--shot-h)); }
.pj-project { position:absolute; inset:0; translate:calc(var(--px,0) * 6px) calc(var(--py,0) * 6px); transition:translate 400ms ease-out; }

.pj-caption { position:absolute; left:0; top:0; margin:0; font-size:11.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; color:var(--muted);
  transform:translate(var(--sheet-x), calc(var(--sheet-y) - 28px)); transition:transform 600ms var(--ease),opacity 400ms ease; }
.pj-stage[data-shape="window"] .pj-caption { transform:translate(var(--win-x), calc(var(--win-y) - 28px)); }

/* the soft shadow: its own layer, resized only through transform (the script measures the ratio) */
.pj-shadow { position:absolute; left:var(--sheet-x); top:var(--sheet-y); width:var(--sheet-w); height:var(--sheet-h); border-radius:var(--radius); pointer-events:none;
  box-shadow:0 38px 80px -24px #1113153d,0 12px 28px -14px #11131524;
  translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -10px);
  transition:transform 600ms var(--ease),opacity 400ms ease,translate 400ms ease-out; }
.pj-stage[data-shape="window"] .pj-shadow { transform:translate(var(--shadow-x,0px), var(--shadow-y,0px)) scale(var(--shadow-sx,1), var(--shadow-sy,1)); }
.pj-stage[data-shape="dot"] .pj-shadow { opacity:0; transform:scale(.03); }

/* the frame: full stage, its visible shape a clip; a hairline edge is the same shape, 1 px larger */
.pj-frame,.pj-edge { position:absolute; inset:0; pointer-events:none; transition:clip-path 600ms var(--ease),opacity 400ms ease; }
.pj-frame { clip-path:inset(var(--sheet-y) calc(100cqw - var(--sheet-x) - var(--sheet-w)) calc(100cqh - var(--sheet-y) - var(--sheet-h)) var(--sheet-x) round var(--radius)); }
.pj-edge { background:#11131514;
  clip-path:inset(calc(var(--sheet-y) - 1px) calc(100cqw - var(--sheet-x) - var(--sheet-w) - 1px) calc(100cqh - var(--sheet-y) - var(--sheet-h) - 1px) calc(var(--sheet-x) - 1px) round calc(var(--radius) + 1px)); }
.pj-stage[data-shape="window"] .pj-frame { clip-path:inset(var(--win-y) calc(100cqw - var(--win-x) - var(--win-w)) calc(100cqh - var(--win-y) - var(--win-h)) var(--win-x) round var(--radius)); }
.pj-stage[data-shape="window"] .pj-edge { clip-path:inset(calc(var(--win-y) - 1px) calc(100cqw - var(--win-x) - var(--win-w) - 1px) calc(100cqh - var(--win-y) - var(--win-h) - 1px) calc(var(--win-x) - 1px) round calc(var(--radius) + 1px)); }
/* the idea: a 10 px circle in the middle of the sheet-to-be */
.pj-stage[data-shape="dot"] :is(.pj-frame,.pj-edge) { clip-path:inset(calc(var(--sheet-y) + var(--sheet-h) / 2 - 5px) calc(100cqw - var(--sheet-x) - var(--sheet-w) / 2 - 5px) calc(100cqh - var(--sheet-y) - var(--sheet-h) / 2 - 5px) calc(var(--sheet-x) + var(--sheet-w) / 2 - 5px) round 5px); }
.pj-stage[data-shape="dot"] :is(.pj-caption,.pj-edge,.pj-frame) { opacity:0; }
.pj-stage[data-morph="birth"] :is(.pj-frame,.pj-edge,.pj-shadow) { transition-duration:650ms; }
.pj-paper,.pj-glass { position:absolute; inset:0; }
.pj-paper { background:var(--white); }
.pj-glass { background:linear-gradient(#17191c,var(--brand-onyx) 42%); opacity:0; transition:opacity 320ms cubic-bezier(.4,0,.2,1); }
.pj-stage[data-shape="window"] .pj-glass { opacity:1; }
.pj-idea { position:absolute; left:calc(var(--sheet-x) + var(--sheet-w) / 2 - 5px); top:calc(var(--sheet-y) + var(--sheet-h) / 2 - 5px); width:10px; height:10px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 7px #f4b00024,0 0 26px 6px #f4b00038; opacity:0; transform:scale(.3); pointer-events:none;
  transition:opacity 380ms ease,transform 520ms var(--ease); }
.pj-idea.is-on { opacity:1; transform:none; }

/* the window: the browser of Selected Work, and a panel under it */
.pj-browser,.pj-panel-bg { position:absolute; left:var(--win-x); width:var(--win-w); opacity:0; transition:opacity 200ms ease; }
.pj-stage[data-shape="window"] :is(.pj-browser,.pj-panel-bg) { opacity:1; transition:opacity 300ms ease 180ms; }
.pj-browser { top:var(--win-y); }
.pj-panel-bg { top:var(--panel-y); height:var(--panel); background:var(--onyx-raised); box-shadow:inset 0 1px 0 #f7f5f012; }
.pj-bar { display:flex; align-items:center; gap:7px; height:var(--bar); padding:0 12px 0 14px; background:var(--onyx-raised); box-shadow:inset 0 -1px 0 #f7f5f00d; }
.pj-bar > span:nth-child(-n+3) { width:9px; height:9px; flex:none; border-radius:50%; background:#f7f5f02e; }
.pj-address { display:flex; align-items:center; gap:5px; min-width:0; margin-left:12px; overflow:hidden; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em; white-space:nowrap; color:var(--on-dark); }
.pj-address > span { opacity:.6; transform:translateX(-17px); transition:opacity 400ms ease,transform 460ms var(--ease); }
.pj-lock { display:grid; width:12px; height:12px; flex:none; color:var(--on-dark); opacity:0; transform:scale(.6); transition:opacity 300ms ease,transform 420ms var(--ease); }
.pj-lock svg { width:100%; height:100%; }
.pj-pill { display:grid; margin-left:auto; flex:none; }
.pj-pill > span { grid-area:1/1; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:20px; padding:0 9px; border-radius:var(--radius-pill);
  background:#f7f5f01a; color:var(--on-dark); font-size:11px; font-weight:550; line-height:1; transition:opacity 300ms ease,transform 420ms var(--ease); }
.pj-pill > .pj-ver { gap:0; }
.pj-roll { display:inline-block; height:12px; overflow:hidden; line-height:12px; }
.pj-digits { display:block; transform:translateY(-24px); }
.pj-digits > span { display:block; height:12px; }
.pj-live { opacity:0; transform:translateY(5px); }
.pj-live-dot { position:relative; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.pj-live-ring { position:absolute; inset:0; border-radius:50%; background:var(--accent); opacity:0; }
.pj-stage[data-state="2"]:not([data-beat="3"]) .pj-digits { transform:none; }
.pj-stage[data-state="3"]:not([data-beat="0"]) .pj-ver { opacity:0; transform:translateY(-5px); }
.pj-stage[data-state="3"]:not([data-beat="0"]) .pj-live { opacity:1; transform:none; }
.pj-stage[data-state="3"]:not([data-beat="0"]) .pj-lock { opacity:1; transform:none; }
.pj-stage[data-state="3"]:not([data-beat="0"]) .pj-address > span { opacity:1; transform:none; }
.pj-shot { position:relative; height:var(--shot-h); overflow:hidden; background:var(--brand-onyx); }
.pj-shot img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; clip-path:inset(0); transition:clip-path 700ms var(--ease); }
.pj-stage[data-state="2"][data-beat="0"] .pj-shot img { clip-path:inset(0 0 100% 0); transition:none; }
.pj-scan { position:absolute; inset:0; border-bottom:1px solid var(--accent); background:linear-gradient(#f4b00000 72%,#f4b0001c); opacity:0; pointer-events:none; }
.pj-sheen { position:absolute; inset:0; background:linear-gradient(105deg,#fff0 34%,#ffffff21 50%,#fff0 66%); opacity:0; pointer-events:none; }
.pj-light { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 400ms ease;
  background:radial-gradient(circle 260px at var(--mx,50%) var(--my,40%),#ffffff0f,#fff0 72%); }
.pj-stage.is-lit[data-shape="window"] .pj-light { opacity:1; }
/* review marks on the screen: a Saffron number and a bubble of two lines, no text */
.pj-mark { position:absolute; display:flex; align-items:center; gap:6px; opacity:0; transform:scale(.4); transform-origin:11px 50%;
  translate:calc(var(--px,0) * 3px) calc(var(--py,0) * 3px); transition:translate 400ms ease-out; }
.pj-mark:nth-of-type(1) { left:21%; top:57%; }
.pj-mark:nth-of-type(2) { left:57%; top:19%; }
.pj-mark > b,.pj-mark-ok { display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; background:var(--accent); color:var(--brand-onyx);
  font:600 12px/1 Inter,Arial,sans-serif; box-shadow:0 0 0 4px #f4b00038,0 6px 14px #00000059; }
.pj-mark-ok { position:absolute; left:0; top:calc(50% - 11px); font-style:normal; font-weight:700; opacity:0; }
.pj-bubble { display:grid; gap:5px; width:66px; padding:8px 9px; border-radius:8px; background:#f7f5f0f2; box-shadow:0 10px 22px #00000052; transform-origin:left center; }
.pj-bubble i { height:4px; border-radius:2px; background:#1113152e; }
.pj-bubble i + i { width:62%; }
.pj-stage[data-state="2"][data-beat="2"] .pj-mark { opacity:1; transform:none;
  transition:opacity 240ms ease calc(var(--k) * 250ms),transform 440ms cubic-bezier(.34,1.56,.64,1) calc(var(--k) * 250ms),translate 400ms ease-out; }
.pj-stage[data-state="2"][data-beat="3"] .pj-mark { transform:none; transition:opacity 320ms ease calc(460ms + var(--k) * 300ms),translate 400ms ease-out; }
.pj-stage[data-state="2"][data-beat="3"] .pj-mark > b { opacity:0; transition:opacity 180ms ease calc(var(--k) * 300ms); }
.pj-stage[data-state="2"][data-beat="3"] .pj-mark-ok { opacity:1; transition:opacity 180ms ease calc(var(--k) * 300ms); }
.pj-stage[data-state="2"][data-beat="3"] .pj-bubble { opacity:0; transform:scale(.5); transition:opacity 220ms ease calc(80ms + var(--k) * 300ms),transform 320ms var(--ease) calc(80ms + var(--k) * 300ms); }

/* ── The four states: content over the frame, in the sheet or in the panel ───────────────── */
.pj-state { position:absolute; margin:0; overflow:hidden; opacity:0; visibility:hidden; }
.pj-state.is-on { opacity:1; visibility:visible; }
.pj-stage[data-shape="dot"] .pj-state { opacity:0; }
.pj-sheet { left:var(--sheet-x); top:var(--sheet-y); width:var(--sheet-w); height:var(--sheet-h); display:flex; flex-direction:column;
  padding:clamp(22px,5.4cqw,32px) clamp(22px,6cqw,36px) clamp(22px,5.4cqw,32px); color:var(--ink); }
.pj-panel { left:var(--win-x); top:var(--panel-y); width:var(--win-w); height:var(--panel); display:flex; flex-direction:column; justify-content:center; padding:18px 22px 20px; color:var(--on-dark); }
.pj-brand { align-self:flex-end; margin:0 -.34em 0 0; font-size:11px; line-height:1.35; letter-spacing:.34em; text-align:right; color:var(--muted); }
.pj-brand b { display:block; font-weight:400; letter-spacing:.5em; margin-right:-.16em; }
.pj-title { display:block; margin-top:clamp(12px,2.8cqw,18px); font-size:clamp(18px,3.7cqw,22px); font-weight:500; line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.pj-note { margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--muted); }
.pj-panel .pj-title { margin-top:0; font-size:clamp(17px,3.2cqw,19px); color:var(--on-dark); }
.pj-panel .pj-note { margin-top:4px; font-size:13px; color:#f7f5f0a3; }
.pj-tile { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:8px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); }
.pj-tile .icon { width:15px; height:15px; }
.pj-ok { position:relative; display:grid; place-items:center; width:18px; height:18px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px #f7f5f03d; }
.pj-ok i { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--brand-onyx);
  font:700 11px/1 Inter,Arial,sans-serif; font-style:normal; transition:opacity 200ms ease calc(var(--k) * 200ms),transform 380ms cubic-bezier(.34,1.56,.64,1) calc(var(--k) * 200ms); }

/* 0 · Brief: the title types itself, the sections tick and draw, three references fall in */
.pj-type { display:grid; }
.pj-type > span { grid-area:1/1; }
.pj-type-ghost { visibility:hidden; }
.pj-caret { display:inline-block; width:2px; height:.92em; margin-left:2px; vertical-align:-.08em; background:var(--accent); opacity:0; }
.pj-brief:is([data-beat="0"],[data-beat="1"]) .pj-caret { opacity:1; }
.pj-brief .pj-note { transition:opacity 360ms ease 620ms,transform 460ms var(--ease) 620ms; }
.pj-sections { display:grid; gap:clamp(12px,3.6cqw,22px); margin:clamp(18px,4.6cqw,30px) 0 0; padding:0; list-style:none; flex:1 1 auto; align-content:space-evenly; }
.pj-sections li { display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:8px; row-gap:7px; align-items:center;
  transition:opacity 320ms ease calc(var(--k) * 90ms),transform 460ms var(--ease) calc(var(--k) * 90ms); }
.pj-num { grid-row:1 / span 3; align-self:start; display:flex; align-items:center; gap:5px; height:18px; font-size:11.5px; letter-spacing:.06em; color:var(--muted); font-variant-numeric:tabular-nums; }
.pj-tick { display:grid; place-items:center; width:17px; height:17px; flex:none; border-radius:50%; background:var(--ink); color:var(--white); font:700 11px/1 Inter,Arial,sans-serif; font-style:normal;
  transition:opacity 200ms ease calc(160ms + var(--k) * 90ms),transform 380ms cubic-bezier(.34,1.56,.64,1) calc(160ms + var(--k) * 90ms); }
.pj-name { font-size:13.5px; font-weight:500; line-height:18px; }
.pj-skel { display:block; height:5px; border-radius:3px; background:var(--line); transform-origin:left; transition:transform 520ms var(--ease) calc(120ms + var(--k) * 90ms); }
.pj-skel + .pj-skel { width:62%; }
.pj-sections li:nth-child(2) .pj-skel:first-of-type { width:88%; }
.pj-sections li:nth-child(3) .pj-skel + .pj-skel { width:48%; }
.pj-refs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1.8cqw,12px); margin-top:auto; padding-top:20px; }
.pj-refs img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--line);
  translate:calc(var(--px,0) * 2.5px) calc(var(--py,0) * 2.5px);
  transition:opacity 320ms ease calc(var(--k) * 80ms),transform 560ms var(--ease) calc(var(--k) * 80ms),translate 400ms ease-out; }
.pj-brief[data-beat="0"] .pj-note { opacity:0; transform:translateY(4px); transition:none; }
.pj-brief:is([data-beat="0"],[data-beat="1"]) .pj-sections li { opacity:0; transform:translateY(6px); transition:none; }
.pj-brief:is([data-beat="0"],[data-beat="1"]) .pj-tick { opacity:0; transform:scale(.4); transition:none; }
.pj-brief:is([data-beat="0"],[data-beat="1"]) .pj-skel { transform:scaleX(0); transition:none; }
.pj-brief:not([data-beat="3"]) .pj-refs img { opacity:0; transform:translateY(-14px) rotate(-2deg); transition:none; }
.pj-brief:not([data-beat="3"]) .pj-refs img:nth-child(2) { transform:translateY(-14px) rotate(2deg); }

/* 1 · Proposal: the rows slide in, the timeline draws, a signature writes itself, Agreed */
.pj-rows { display:grid; gap:clamp(8px,2cqw,12px); margin:clamp(18px,4.6cqw,30px) 0 0; padding:0; list-style:none; }
.pj-rows li { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500; line-height:1.3;
  transition:opacity 320ms ease calc(var(--k) * 90ms),transform 460ms var(--ease) calc(var(--k) * 90ms); }
.pj-timeline { position:relative; height:14px; margin:auto 6px; padding:0; flex:none; }
.pj-timeline-line { position:absolute; left:0; right:0; top:50%; height:1px; background:#11131559; transform-origin:left; transition:transform 600ms var(--ease); }
.pj-milestone { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--white); box-shadow:inset 0 0 0 1.5px var(--ink);
  transition:opacity 200ms ease calc(200ms + var(--k) * 180ms),transform 400ms cubic-bezier(.34,1.56,.64,1) calc(200ms + var(--k) * 180ms); }
.pj-milestone:nth-of-type(2) { left:0; }
.pj-milestone:nth-of-type(3) { left:50%; }
.pj-milestone:nth-of-type(4) { left:100%; }
.pj-milestone:nth-of-type(2)::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #f4b0002e; transition:opacity 300ms ease 520ms; }
.pj-sign { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-top:18px; }
.pj-signature { flex:0 1 58%; padding:0 4px 5px; border-bottom:1px solid #11131566; }
.pj-signature svg { display:block; width:100%; height:auto; aspect-ratio:176/44; overflow:visible; }
.pj-signature path { fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 2; stroke-dashoffset:0; transition:stroke-dashoffset 700ms var(--ease); }
.pj-agreed { display:inline-flex; align-items:center; gap:7px; flex:none; padding:5px 12px 5px 6px; border-radius:var(--radius-pill); background:var(--ink); color:var(--on-dark);
  font-size:12.5px; font-weight:550; line-height:1.2; transition:opacity 240ms ease 740ms,transform 440ms cubic-bezier(.34,1.56,.64,1) 740ms; }
.pj-agreed i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--ink); font:700 11px/1 Inter,Arial,sans-serif; font-style:normal; }
.pj-proposal[data-beat="0"] .pj-rows li { opacity:0; transform:translateX(-10px); transition:none; }
.pj-proposal:is([data-beat="0"],[data-beat="1"]) .pj-timeline-line { transform:scaleX(0); transition:none; }
.pj-proposal:is([data-beat="0"],[data-beat="1"]) .pj-milestone { opacity:0; transform:scale(.4); transition:none; }
.pj-proposal:is([data-beat="0"],[data-beat="1"]) .pj-milestone::after { opacity:0; transition:none; }
.pj-proposal:not([data-beat="3"]) .pj-signature path { stroke-dashoffset:1; transition:none; }
.pj-proposal:not([data-beat="3"]) .pj-agreed { opacity:0; transform:scale(.7); transition:none; }

/* 2 · Working version: the panel's four promises, lit one by one */
.pj-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 18px; margin:16px 0 0; padding:0; list-style:none; }
.pj-checks li { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:18px; color:#f7f5f0de; }
.pj-version:is([data-beat="0"],[data-beat="1"]) .pj-ok i { opacity:0; transform:scale(.5); transition:none; }

/* 3 · Live: the handover package, four tiles from under the window */
.pj-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.pj-tiles li { position:relative; display:grid; align-content:start; gap:9px; min-width:0; padding:11px 11px 12px; border-radius:11px; background:#f7f5f00d; box-shadow:inset 0 0 0 1px #f7f5f014;
  translate:calc(var(--px,0) * 2.5px) calc(var(--py,0) * 2.5px);
  transition:opacity 320ms ease calc(var(--k) * 90ms),transform 480ms var(--ease) calc(var(--k) * 90ms),translate 400ms ease-out; }
.pj-launch .pj-tile { width:30px; height:30px; background:#f7f5f014; box-shadow:none; color:var(--on-dark); }
.pj-launch .pj-tile .icon { width:16px; height:16px; }
.pj-tile-name { padding-right:4px; font-size:12.5px; line-height:1.3; color:#f7f5f0e6; }
.pj-tiles .pj-ok { position:absolute; right:9px; top:9px; }
.pj-tiles .pj-ok i { transition-delay:calc(var(--k) * 150ms); }
.pj-launch:is([data-beat="0"],[data-beat="1"]) .pj-tiles li { opacity:0; transform:translateY(-16px); transition:none; }
.pj-launch:not([data-beat="3"]) .pj-ok i { opacity:0; transform:scale(.5); transition:none; }

/* a narrow stage: the handover tiles in two rows, each tick a badge on its icon */
@container pj (width < 600px) {
 .pj-body { --panel:224px; }
 .pj-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:13px; }
 .pj-tiles li { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:9px 10px; }
 .pj-tiles .pj-ok { right:auto; left:31px; top:4px; width:17px; height:17px; box-shadow:none; }
 .pj-tiles .pj-ok i { box-shadow:0 0 0 2px var(--onyx-raised); }
}

/* the page that turns: a copy of a sheet, over the frame, for 560 ms */
.pj-leaf { position:absolute; left:var(--sheet-x); top:var(--sheet-y); width:var(--sheet-w); height:var(--sheet-h); border-radius:var(--radius); overflow:hidden;
  background:var(--white); box-shadow:0 0 0 1px #11131514; transform-origin:left center; backface-visibility:hidden; pointer-events:none; }
.pj-leaf > .pj-state { left:0; top:0; }
.pj-leaf-shade { position:absolute; inset:0; background:linear-gradient(90deg,#11131500,#11131514 45%,#11131547); opacity:0; }

/* the pause button: the hero's, in the light section's colours */
.pj-pause { position:absolute; left:0; top:0; z-index:5; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:none; color:var(--ink); cursor:pointer; opacity:0; visibility:hidden;
  transform:translate(calc(var(--sheet-x) + var(--sheet-w) - 37px), calc(var(--sheet-y) - 44px));
  transition:opacity 300ms ease,visibility 0s linear 300ms,transform 600ms var(--ease); }
.pj-stage[data-shape="window"] .pj-pause { transform:translate(calc(var(--win-x) + var(--win-w) - 37px), calc(var(--win-y) - 44px)); }
.pj-pause.is-on { opacity:1; visibility:visible; transition:opacity 300ms ease,transform 600ms var(--ease); }
.pj-pause[hidden] { display:none; }
.pj-pause::before { content:''; position:absolute; inset:7px; border:1px solid #11131533; border-radius:50%; background:#f7f5f0cc; transition:border-color var(--micro),background var(--micro); }
.pj-pause:hover::before { border-color:#11131566; background:var(--white); }
.pj-pause:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:-3px; }
.pj-pause svg { position:relative; width:11px; height:11px; }
.pj-pause .hp-play,.pj-pause[aria-pressed="true"] .hp-pause { display:none; }
.pj-pause[aria-pressed="true"] .hp-play { display:block; }
@media(hover:hover) and (pointer:fine) and (min-width:681px) { .process.is-armed .pj-stage { cursor:pointer; } }

/* ── The trust strip and the foot ──────────────────────────────────────────────────────────── */
.trust-strip { display:grid; grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr)); margin:clamp(40px,4.2vw,64px) 0 0; padding:26px 0 0; border-top:1px solid var(--line); list-style:none; }
.trust-strip li { display:flex; gap:14px; min-width:0; padding:0 20px; border-left:1px solid var(--line); }
.trust-strip li:first-child { border-left:0; padding-left:0; }
.trust-strip li:last-child { padding-right:0; }
.trust-tile { display:grid; place-items:center; width:48px; height:48px; flex:none; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.trust-icon { width:22px; height:22px; color:var(--ink); stroke-width:1.5; }
.trust-title { margin:0; font-size:15px; font-weight:500; line-height:1.3; color:var(--ink); }
.trust-prices { display:grid; gap:10px; margin:10px 0 0; }
.trust-prices dt { font-size:12.5px; line-height:1.3; color:var(--muted); }
.trust-price { margin:2px 0 0; font-size:clamp(21px,1.6vw,25px); line-height:1.1; font-weight:500; letter-spacing:-.03em; white-space:nowrap; color:var(--ink); }
.trust-tax { margin:6px 0 0; font-size:12.5px; color:var(--muted); }
.trust-note { margin:7px 0 0; font-size:13.5px; line-height:1.45; color:var(--muted); }
.process-foot { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:clamp(30px,3.2vw,50px); }
.process-micro { margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.process-cta { display:flex; align-items:center; gap:18px; }
.process-note { font-size:14px; color:var(--muted); }

/* ── Entrance: the words arrive as before, the road draws, the idea unfolds (the script) ──────
   Nothing is hidden without the script (is-armed is its mark); is-entering lasts only as long
   as the entrance, so nothing here can ever play twice. */
@media(prefers-reduced-motion:no-preference) {
 .process.is-armed:not(.is-in) .accent-rule { transform:scaleX(0); }
 .process.is-armed:not(.is-in) :is(.eyebrow,.process-lede,.road-node,.road-title,.road-brief,.trust-strip li,.process-foot > *,.pj-caption) { opacity:0; }
 .process.is-armed:not(.is-in) .step-detail > *,.process.is-armed:not(.is-in) .tick-list li { opacity:0; }
 .process.is-armed:not(.is-in) h2 > span { opacity:0; clip-path:inset(0 0 105% 0); transform:translateY(24px); }
 .process.is-armed:not(.is-in) .road-track { transform:scaleX(0); }
 .process.is-entering .accent-rule { animation:rule-draw 420ms var(--ease) backwards; }
 .process.is-entering .eyebrow { animation:enter 560ms var(--ease) 100ms backwards; }
 .process.is-entering h2 > span { animation:line-reveal 720ms var(--ease) 180ms backwards; }
 .process.is-entering h2 > span:nth-child(2) { animation-delay:300ms; }
 .process.is-entering .process-lede { animation:enter 620ms var(--ease) 450ms backwards; }
 .process.is-entering .road-track { animation:pj-grow 700ms cubic-bezier(.4,0,.6,1) 600ms backwards; }
 .process.is-entering .road-node { animation:pj-pop 460ms cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(600ms + var(--k) * 233ms); }
 .process.is-entering :is(.road-title,.road-brief) { animation:enter 520ms var(--ease) backwards; animation-delay:calc(690ms + var(--k) * 233ms); }
 .process.is-entering .step-detail[data-detail="0"] > *,.process.is-entering .step-detail[data-detail="0"] li { animation:pj-rise 520ms var(--ease) backwards; animation-delay:calc(1400ms + var(--k) * 40ms); }
 .process.is-entering .step-detail[data-detail="0"] .tick-list { animation:none; }
 .process.is-entering .trust-strip li { animation:enter 560ms var(--ease) backwards; animation-delay:calc(1500ms + var(--k) * 60ms); }
 .process.is-entering .trust-icon > * { animation:pj-stroke 700ms var(--ease) backwards; animation-delay:calc(1500ms + var(--k) * 60ms); }
 .process.is-entering .process-foot > * { animation:enter 560ms var(--ease) 1780ms backwards; }
}
@keyframes pj-grow { from { transform:scaleX(0); } }
@keyframes pj-pop { from { opacity:0; transform:scale(.6); } }
@keyframes pj-rise { from { opacity:0; transform:translateY(12px); } }
@keyframes pj-stroke { from { stroke-dasharray:1 2; stroke-dashoffset:1; } to { stroke-dasharray:1 2; stroke-dashoffset:0; } }

/* Still: held, off screen, in a hidden tab — every part stands in its final look. */
.process.is-still :is(*,*::before,*::after) { animation:none!important; transition:none!important; }

/* ── Small laptop (1180–1439) ─────────────────────────────────────────────────────────────── */
@media(min-width:1025px) and (max-width:1439px) {
 .process > .container { width:min(1200px,calc(100% - 80px)); }
 .roadmap { --node:40px; }
 .road-node { font-size:14px; }
 .road-brief { font-size:12.5px; }
 .step-body,.tick-list { font-size:15px; }
 .trust-strip li { padding:0 16px; gap:12px; }
 .trust-tile { width:42px; height:42px; }
 .trust-icon { width:20px; height:20px; }
 .trust-title { font-size:14px; } .trust-note { font-size:12.5px; }
}

/* ── Stacked (681–1179): intro, road, the stage, the step ────────────────────────────────── */
@media(max-width:1179px) {
 .process-top { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"intro" "road" "stage" "details"; }
 .pj-stage { width:100%; max-width:640px; min-height:0; margin:clamp(30px,4vw,44px) auto 0; aspect-ratio:640/702; align-self:start; }
 .process-details { margin-top:clamp(30px,4vw,44px); }
 .pj-body { --panel:212px; }
 .step-body { max-width:60ch; }
}
@media(max-width:1024px) {
 .process > .container { width:min(900px,calc(100% - 64px)); }
 .trust-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 0; }
 .trust-strip li:nth-child(4) { border-left:0; padding-left:0; }
}

/* ── Phone (≤680): four nodes in one row, the stage, the step, the strip ──────────────────── */
@media(max-width:680px) {
 .process { padding:68px 0 60px; }
 .process > .container { width:calc(100% - 40px); }
 .process h2 { font-size:clamp(26px,7.4vw,34px); }
 .roadmap { --node:34px; --gap:0px; margin-top:26px; }
 .road-steps { gap:0; }
 .road-step { justify-items:center; gap:8px; min-height:48px; padding:0 2px 4px; text-align:center; }
 .road-track { left:12.5%; width:75%; }
 .road-node { font-size:12.5px; }
 .road-step.is-active .road-node { box-shadow:0 0 0 5px #f4b0001f; }
 .road-title { font-size:12.5px; line-height:1.25; }
 .road-brief { display:none; }
 .pj-stage { max-width:none; margin-top:24px; aspect-ratio:auto; height:calc((100vw - 40px) * .625 + 318px); }
 .pj-body { --cap:36px; --bar:30px; --panel:246px; --pad:6px; --lift:0; --radius:14px;
   --sheet-h:round(calc(100cqh - var(--cap) - var(--pad)), 1px);
   --sheet-w:round(min(94cqw, var(--sheet-h) * .76), 1px); }
 .pj-caption { font-size:12px; letter-spacing:.14em; }
 .pj-sheet { padding:20px 20px 20px; }
 .pj-panel { padding:15px 16px 16px; }
 .pj-brand,.pj-num,.pj-address,.pj-pill > span { font-size:12px; }
 .pj-title { font-size:18px; }
 .pj-tick,.pj-ok i,.pj-agreed i { font-size:12px; }
 .pj-panel .pj-title { font-size:16.5px; }
 .pj-note,.pj-panel .pj-note { font-size:12.5px; line-height:1.4; }
 .pj-name,.pj-rows li { font-size:13px; }
 .pj-sections { gap:11px; }
 .pj-sections li { grid-template-columns:44px minmax(0,1fr); row-gap:6px; }
 .pj-bar { padding:0 10px 0 12px; gap:6px; }
 .pj-bar > span:nth-child(-n+3) { width:7px; height:7px; }
 .pj-address { margin-left:8px; letter-spacing:.02em; }
 .pj-roll,.pj-digits > span { height:13px; line-height:13px; }
 .pj-digits { transform:translateY(-26px); }
 .pj-checks { grid-template-columns:minmax(0,1fr); gap:8px; margin-top:12px; }
 .pj-checks li { font-size:12.5px; }
 .pj-tiles { margin-top:12px; }
 .pj-tile-name { font-size:12px; }
 .pj-mark:nth-of-type(2) { left:52%; }
 .pj-bubble { width:52px; padding:7px; }
 .process-details { margin-top:26px; }
 .step-detail h3 { font-size:26px; }
 .step-body { font-size:15.5px; }
 .step-sub { margin-top:20px; }
 .tick-list { font-size:14.5px; gap:9px; }
 .trust-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 0; margin-top:40px; }
 .trust-strip li { gap:10px; padding:0 0 0 14px; }
 .trust-strip li:first-child { grid-column:1 / -1; padding:0; }
 .trust-strip li:nth-child(2n) { border-left:0; padding-left:0; padding-right:10px; }
 .trust-tile { width:36px; height:36px; border-radius:10px; }
 .trust-icon { width:18px; height:18px; }
 .trust-title { font-size:14px; }
 .trust-price { font-size:21px; }
 .trust-prices { display:flex; flex-wrap:wrap; gap:10px 20px; }
 .trust-note { margin-top:4px; font-size:13px; line-height:1.4; }
 .process-foot { flex-direction:column; align-items:flex-start; gap:20px; }
 .process-cta { flex-direction:column; align-items:stretch; gap:12px; width:100%; }
 .process-cta .brand-cta { justify-content:center; }
 .process-note { text-align:center; }
}
/* a small phone: the handover tiles stand their icon over the name */
@media(max-width:379px) {
 .pj-stage { height:calc((100vw - 40px) * .625 + 354px); }
 .pj-body { --panel:282px; }
 .pj-tiles li { grid-template-columns:minmax(0,1fr); align-items:start; gap:6px; padding:8px 9px 9px; }
}
@media(max-width:359px) {
 .road-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .road-caption { display:block; margin:10px 0 0; font-size:13px; font-weight:500; line-height:1.3; text-align:center; color:var(--ink); }
 .pj-stage { height:calc((100vw - 40px) * .625 + 390px); }
 .pj-body { --panel:318px; }
 .pj-bar > span:nth-child(-n+3) { display:none; }
 .pj-address { margin-left:0; }
}

@media(prefers-reduced-motion:reduce) {
 .process *,.process *::before,.process *::after { animation:none!important; transition:none!important; }
 .pj-pause,.pj-light { display:none!important; }
}