/* ==========================================================================
   Workshop — /workshops/content-that-fits-your-business/ only (body.ws). Loaded after styles.css and services.css.
   The reader moves through the page the way an attendee moves through the 90 minutes, and each idea has one 3D
   illustration of its logic: the workshop table (hero) · the advice noise falling back behind one question · three
   prisms turning from "It's not working" to the question that changes the plan · five decisions stacking into one
   plan · keep / share / hand off / pause trays · a shot plan · the path after someone responds · the $20 and $400
   columns · a window and a stack of layers for the two films · one complete 90-minute block · an open workbook.
   Default CSS = the final, complete, visible state. One-shot pre-states exist only inside
     @media (prefers-reduced-motion: no-preference) { html.ready .x:not(.in) … }   (section 13)
   (pages.js adds .in to [data-io], .r and .split; workshop.js adds .in to the outcome plates and nothing that hides).
   Words never hide (text may dim to .35); nothing loops (motion is one-shot, or follows scroll / the pointer).
   Gold stays on the primary action ("Get workshop updates", .btn) only. 3D labels never go below 11px.
   3D kit (after the owner's pitch-deck kit, v2): .w3 is a stage whose 1em = 1/64 of its width (container units), so
   every scene scales with its column; .w3-iso is the isometric plane; .w3-bx a box (top, front, side faces lit from
   the upper left); .w3-bb a billboard that always faces the viewer; .w3-up an upright panel; .w3-dc a decal on the
   plane; .w3-g a group that can drop in. Faces fade through --o (opacity on a preserve-3d group would flatten it).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. helpers */
@property --o { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --sp { syntax: '<number>'; inherits: true; initial-value: 1; }
.ws { --ws-lab: 500 max(.66rem, 11px)/1.45 var(--mono); --ws-panel: rgba(15, 18, 23, .92); --ws-bad: #ff8a7a; --ws-act: var(--teal); }
.ws [hidden] { display: none !important; }
.ws-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ws-lab { display: block; max-width: none; font: var(--ws-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.ws-lab.is-t { color: var(--accent-t); }
.ws-cap { margin-top: 14px; max-width: 48rem; font: var(--ws-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.ws-opt { color: var(--text2); font-weight: 400; }
html:has(body.ws) { scroll-padding-top: 88px; }
.ws main section[id] { scroll-margin-top: 0; }
.ws main { overflow-x: clip; }
.ws .cb { pointer-events: none; transform: none; }   /* brackets fade in place: the shared slide-in from 46px outside widens phone pages */
.ws .pulse::after { animation-iteration-count: 3; }
.ws .grain { animation-iteration-count: 8; }   /* the shared film grain settles after a few seconds: nothing on this page animates forever */

/* shared labels set below 11px elsewhere are held at 11px on this page */
.ws .svc-crumbs li { font-size: max(.66rem, 11px); }
.ws .rail a span, .ws .top.pk-top .pk-nav a, .ws .top.pk-top .pk-svc-btn, .ws .foot-l, .ws .foot-l a { font-size: max(.66rem, 11px); }
.ws .pk-svc-menu { background-color: var(--bg); }
.ws .mnav-lab, .ws .mnav-n, .ws .mnav-h, .ws .mnav-t { font-size: max(.66rem, 11px); }
@media (max-width: 420px) { .ws .top.pk-top .pk-nav .pk-book:not(:has(.bk-long)) { padding: 0 10px; letter-spacing: .08em; } }
@media (max-width: 380px) { .ws .top.pk-top .pk-nav .pk-book:not(:has(.bk-long)) { padding: 0 8px; letter-spacing: .04em; } }
@media (min-width: 981px) and (max-width: 1079px) {
  .ws .top.pk-top .pk-nav { gap: 8px; }
  .ws .top.pk-top .pk-nav a, .ws .top.pk-top .pk-svc-btn { letter-spacing: .02em; }
  .ws .top.pk-top .pk-nav .pk-book { padding: 0 8px; }
}

/* the shared reveals start visible on this page; their one-shot pre-state lives in the motion block (section 13) */
.ws .r, .ws .split .w { opacity: 1; transform: none; filter: none; }

.ws-sec { padding: clamp(76px, 11vh, 140px) 0; }
.ws-sec .sec-h { max-width: 14em; }
.ws .eyebrow { flex-wrap: wrap; row-gap: 10px; }
.ws .svc-hero .eyebrow { flex-wrap: nowrap; }

/* ---------------------------------------------------------------- 2. the 3D kit */
.w3-sc { position: relative; margin: 0; container-type: inline-size; }
.w3 { position: relative; width: 100%; aspect-ratio: var(--ar, 64 / 44); font-size: calc(100cqw / 64); perspective: var(--pv, 210em); perspective-origin: 50% 30%; pointer-events: none; }
.w3-iso { --rx: 56deg; --rz: 40deg; position: absolute; left: calc(var(--cx, 32) * 1em); top: calc(var(--cy, 22) * 1em); width: calc(var(--W) * 1em); height: calc(var(--D) * 1em);
  margin: calc(var(--D) * -.5em) 0 0 calc(var(--W) * -.5em); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateZ(var(--rz)); }
.w3-iso div, .w3-iso i, .w3-iso span { box-sizing: border-box; }
.w3-g { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(0); }
.w3-bx { position: absolute; left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); width: calc(var(--w) * 1em); height: calc(var(--d) * 1em); transform-style: preserve-3d; transform: translateZ(calc(var(--z, 0) * 1em));
  --top: linear-gradient(135deg, #343e4c, #1d232c); --lf: linear-gradient(180deg, #0a0d11, #1d242d); --rf: linear-gradient(90deg, #06080a, #11161c); }
.w3-bx > i { position: absolute; display: block; opacity: var(--o); }
.w3-bx > .t { inset: 0; transform: translateZ(calc(var(--h) * 1em)); background: var(--top); box-shadow: inset 0 0 0 1px rgba(244, 243, 239, .09); }
.w3-bx > .f { left: 0; top: 100%; width: 100%; height: calc(var(--h) * 1em); transform-origin: 0 0; transform: rotateX(90deg); background: var(--lf); }
.w3-bx > .s { left: 100%; top: 0; width: calc(var(--h) * 1em); height: 100%; transform-origin: 0 0; transform: rotateY(-90deg); background: var(--rf); }
.w3-dc { position: absolute; display: block; left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); width: calc(var(--w) * 1em); height: calc(var(--d) * 1em); transform: translateZ(calc(var(--z, 0) * 1em)); opacity: var(--o); }
.w3-bb { position: absolute; left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); width: 0; height: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--z, 0) * 1em)) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)); }
.w3-bb > * { position: absolute; left: 0; bottom: .3em; transform: translateX(-50%); white-space: nowrap; opacity: max(.35, var(--o)); }
.w3-bb.dn > * { bottom: auto; top: .4em; }
.w3-bb.lft > * { bottom: auto; top: 0; left: .8em; transform: translateY(-50%); }
.w3-up { position: absolute; left: calc((var(--x) - var(--w) / 2) * 1em); top: calc((var(--y) - var(--hh)) * 1em); width: calc(var(--w) * 1em); height: calc(var(--hh) * 1em);
  transform-origin: 50% 100%; transform: translateZ(calc(var(--z, 0) * 1em)) rotateZ(var(--a, 0deg)) rotateX(-90deg); opacity: var(--o); }

.w3-tag { display: inline-block; padding: .5em .75em; border-radius: .35em; background: rgba(11, 13, 16, .92); border: 1px solid var(--line2);
  font: 500 max(11px, 1.15em)/1.15 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); box-shadow: 0 .9em 1.6em -.9em #000; }
.w3-tag.t { border-color: rgba(25, 230, 207, .55); color: #8ff3e8; }
.w3-tag.is-dim { color: var(--text2); border-style: dashed; }
.w3-tag.is-wrap { white-space: normal; width: 13em; text-align: center; line-height: 1.3; }

/* box materials (lit from the upper left; top lightest, right side darkest) */
.k-table { --top: radial-gradient(60% 70% at 38% 42%, rgba(25, 230, 207, .12), transparent 70%), repeating-linear-gradient(0deg, rgba(244, 243, 239, .05) 0 1px, transparent 1px 4em),
    repeating-linear-gradient(90deg, rgba(244, 243, 239, .05) 0 1px, transparent 1px 4em), linear-gradient(135deg, #26303c, #12161c);
  --lf: linear-gradient(180deg, rgba(25, 230, 207, .55), #0c1116 18%, #090b0e); --rf: linear-gradient(90deg, rgba(25, 230, 207, .3), #07090c 18%, #08090c); }
.k-floor { --top: repeating-linear-gradient(0deg, rgba(244, 243, 239, .045) 0 1px, transparent 1px 3em), repeating-linear-gradient(90deg, rgba(244, 243, 239, .045) 0 1px, transparent 1px 3em), linear-gradient(135deg, #1c232c, #0e1115);
  --lf: linear-gradient(180deg, #080a0d, #10141a); --rf: linear-gradient(90deg, #050608, #0b0e12); }
.k-navy { --top: linear-gradient(135deg, #24406a, #0E1F36); --lf: linear-gradient(180deg, #060e19, #0e1f36); --rf: #050b14; }
.k-paper { --top: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(11, 13, 16, .26)), var(--img, none) 50% 0 / cover no-repeat, #e6e4de; --lf: linear-gradient(180deg, #8e949b, #c9cdd1); --rf: linear-gradient(90deg, #6b727a, #a3a9af); }
.k-teal { --top: linear-gradient(135deg, #5ff7e9 0%, #19E6CF 38%, #0AA7B8 100%); --lf: linear-gradient(180deg, #021c20, #0a8a93); --rf: linear-gradient(90deg, #011114, #06606a); }
.k-steel { --top: linear-gradient(135deg, #8d98a6, #56606d); --lf: linear-gradient(180deg, #161b21, #3e4752); --rf: linear-gradient(90deg, #0c0f13, #29303a); }
.k-blue { --top: linear-gradient(135deg, #6f9df5, #3478D4); --lf: linear-gradient(180deg, #0a1a33, #1f4c8c); --rf: linear-gradient(90deg, #06101f, #163664); }
.k-cyan { --top: linear-gradient(135deg, #59c7e0, #1598B8); --lf: linear-gradient(180deg, #04202a, #0c6178); --rf: linear-gradient(90deg, #021319, #084353); }
.k-tray { --top: linear-gradient(135deg, #222a35, #151a21); --lf: linear-gradient(180deg, #0a0d11, #1a2129); --rf: linear-gradient(90deg, #06080a, #0f1318); }
.k-tray > .t { box-shadow: inset 0 0 0 .45em #2a3340, inset 0 0 1.2em .5em rgba(0, 0, 0, .55); }
.k-ghost > i { background: rgba(244, 243, 239, .03); outline: 1.5px dashed rgba(244, 243, 239, .38); outline-offset: -1px; box-shadow: none !important; }

.ws-spill { border-radius: 50%; background: radial-gradient(closest-side, rgba(25, 230, 207, .2), rgba(25, 230, 207, .05) 60%, transparent); }
.ws-shd { border-radius: 40%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.w3-lo { }   /* low-priority layer: left out on phones (section 12) */

/* ---------------------------------------------------------------- 3. hero: the workshop table */
.ws-hero { padding-top: clamp(124px, 17vh, 176px); padding-bottom: clamp(48px, 8vh, 96px); }
.ws-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ws-hero .pk-h.ws-h1 { max-width: 11em; margin-bottom: 26px; font-size: clamp(2.5rem, min(4.7vw, 9vh), 4.7rem); line-height: .98; }
.ws-title { display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px; max-width: none; padding-left: 18px; border-left: 1px solid var(--accent); }
.ws-title strong { font: 400 clamp(1.45rem, 2.2vw, 1.9rem)/1.15 var(--serif); color: var(--text); letter-spacing: -.005em; }
.ws-hero .pk-lead { max-width: 36rem; }
.ws-hero .svc-btns { margin-top: 32px; }
.ws-terms { margin-top: 28px; max-width: 36rem; padding: 18px 22px; border: 1px solid var(--line); background: rgba(21, 25, 31, .55); }
.ws-terms p { max-width: none; font-size: .96rem; }
.ws-terms-a strong { color: var(--accent-t); font-weight: 600; }
.ws-terms-b { margin-top: .6em !important; }
.ws-hero-fig { min-width: 0; }
.ws-desk { margin-right: calc(clamp(0px, 3vw, 40px) * -1); }
.ws-desk-iso { --rx: 56deg; --rz: 36deg; }

.ws-phone { border-radius: .9em; background: #05070a; border: .32em solid #1d252f; box-shadow: inset 0 0 0 1px rgba(25, 230, 207, .55), 0 0 2.4em -1em rgba(25, 230, 207, .6); }
.ws-phone-s { position: absolute; inset: .5em; display: grid; grid-template-rows: repeat(3, 1fr); gap: .45em; padding: .9em .5em .5em; }
.ws-phone-s i { position: relative; display: block; border: 1px solid rgba(25, 230, 207, .55); border-radius: .15em; background: linear-gradient(180deg, rgba(25, 230, 207, .12), rgba(25, 230, 207, .03)); }
.ws-phone-s i::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: rgba(143, 243, 232, .75); }
.ws-phone-s .f-w::after { width: 18%; height: 34%; }
.ws-phone-s .f-m::after { width: 36%; height: 66%; }
.ws-phone-s .f-c::after { width: 70%; height: 92%; }
.ws-phone-s b { position: absolute; top: .3em; left: 50%; width: .45em; height: .45em; margin-left: -.22em; border-radius: 50%; background: #19E6CF; box-shadow: 0 0 .6em #19E6CF; }

.ws-qc { display: flex; gap: .65em; align-items: flex-start; width: max(8.6rem, 27cqw); padding: .85em 1em .9em .85em; white-space: normal !important; border-radius: .55em;
  background: linear-gradient(165deg, #252e3a, #161b22); border: 1px solid rgba(25, 230, 207, .5); box-shadow: 0 1.6em 2.6em -1.4em #000, 0 0 2em -1.2em rgba(25, 230, 207, .5);
  font: 500 max(11px, 1.3em)/1.3 var(--sans); color: var(--text); }
.ws-qc b { flex: none; display: grid; place-items: center; width: max(19px, 1.7em); height: max(19px, 1.7em); border-radius: 50%; background: var(--teal); color: #04201d; font: 600 max(11px, .85em)/1 var(--mono); }

/* ---------------------------------------------------------------- 4. recognition: the advice noise */
.ws-why-h { max-width: 17em !important; }
.ws-why-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ws-why-copy p + p { margin-top: 1.1em; }
.ws-noise { margin: 0; container-type: inline-size; }
.ws-noise-st { --sp: 1; --u: calc(100cqw / 64); position: relative;   /* --u: the scene unit (the cards set their own font size, so 1em there is not the scene's) */
  aspect-ratio: 64 / 44; font-size: calc(100cqw / 64); perspective: 80em; perspective-origin: 50% 46%; transform-style: preserve-3d; }
.ws-adv { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; gap: .5em; padding: 1.1em 1.5em 1.2em; white-space: nowrap; border-radius: .4em;
  background: linear-gradient(160deg, #222a35, #151a21); border: 1px solid var(--line2); box-shadow: 0 2em 3em -1.6em #000;
  font: 400 max(15px, 2.5em)/1.05 var(--serif); color: var(--text);
  transform: translate(-50%, -50%) translate3d(calc(var(--x) * var(--xm, 1) * var(--u)), calc(var(--y) * var(--ym, 1) * var(--u)), calc((var(--z0) + (var(--z1) - var(--z0)) * var(--sp)) * var(--u))) rotate(var(--r)) rotateY(calc(var(--r) * -2.4));
  opacity: calc(1 - .45 * var(--sp)); }
.ws-adv i { font: 500 max(11px, .9rem)/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.ws-noise-q { position: absolute; left: 50%; top: 50%; width: min(76%, 40em); margin: 0; max-width: none; padding: 1.3em 1.6em; text-align: center; border-radius: .4em;
  background: linear-gradient(160deg, rgba(16, 35, 42, .97), rgba(11, 13, 16, .97)); border: 1px solid color-mix(in srgb, var(--teal) 60%, transparent);
  box-shadow: 0 0 5em -1.5em rgba(25, 230, 207, .55), 0 3em 4em -2.4em #000;
  font: 400 max(1.35rem, 3.3em)/1.12 var(--serif); letter-spacing: -.01em; color: var(--text); text-wrap: balance;
  transform: translate(-50%, -50%) translateZ(calc((-30 + 33 * var(--sp)) * var(--u))); }
.ws-why-punch { margin-top: clamp(36px, 6vh, 64px); max-width: 26em; }

/* ---------------------------------------------------------------- 5. Trevor's approach: three turning prisms */
.ws-ap-intro { align-items: end; }
.ws-ap-intro .svc-lede { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.ws-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); margin: 0; padding: 0; }
.ws-q { min-width: 0; }
.ws-q-h { margin: 0 0 12px; font: 400 clamp(1.4rem, 2vw, 1.75rem)/1.18 var(--serif); letter-spacing: -.01em; color: var(--text); }
.ws-q p { font-size: 1rem; }
.ws-pr { --s: 76cqw; container-type: inline-size; perspective: 320cqw; perspective-origin: 50% 10%; margin: 0 0 18px; padding: 6cqw 0 2cqw; }
.ws-pr-b { --turn: -76deg; position: relative; width: var(--s); height: calc(var(--s) * .56); margin: 0 auto; transform-style: preserve-3d; transform: translateZ(calc(var(--s) * -.5)) rotateX(-11deg) rotateY(var(--turn)); }
.ws-pr-f { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; padding: 0 7cqw;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line2); }
.ws-pr-f i { font: 500 max(11px, 3.2cqw)/1.2 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.ws-pr-f b { font: 400 max(1.2rem, 7.6cqw)/1.05 var(--serif); font-weight: 400; letter-spacing: -.015em; }
.ws-pr-f.is-fr { transform: translateZ(calc(var(--s) * .5)); background: linear-gradient(160deg, #1c222b, #10141a); }
.ws-pr-f.is-fr i, .ws-pr-f.is-fr b { color: var(--text2); } .ws-pr-f.is-fr b { font-style: italic; }
.ws-pr-f.is-rt { transform: rotateY(90deg) translateZ(calc(var(--s) * .5)); background: linear-gradient(160deg, #123038, #0c1a20 70%); border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: inset 0 0 6cqw -2cqw rgba(25, 230, 207, .35); }
.ws-pr-f.is-rt i { color: #8ff3e8; } .ws-pr-f.is-rt b { color: var(--text); }
.ws-pr-f.is-tp { top: calc(50% - var(--s) * .5); height: var(--s); transform: rotateX(90deg) translateZ(calc(var(--s) * .28)); background: radial-gradient(70% 70% at 40% 40%, rgba(25, 230, 207, .16), transparent 70%), linear-gradient(135deg, #2b3542, #171c23); }

/* ---------------------------------------------------------------- 6. practical outcomes: the stack */
.ws-oc-h { max-width: 16em !important; }
.ws-oc-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ws-oc-side { position: sticky; top: 92px; }
.ws-stack-iso { --rx: 58deg; --rz: 38deg; }
.ws-slot { outline: 1.5px dashed rgba(244, 243, 239, .2); outline-offset: -1px; }
.ws-pl { transform: translateZ(calc(var(--k) * 5.8em)); }
.ws-pl .w3-bx { --top: linear-gradient(135deg, #3a4554, #1f262f); }
.ws-pl .w3-bx > .t { box-shadow: inset 0 0 0 1px rgba(25, 230, 207, .32); }
.ws-pl.is-on { transform: translateZ(calc(var(--k) * 5.8em + 1.2em)); }
.ws-pl.is-on .w3-bx { --top: linear-gradient(135deg, #5ff7e9 0%, #19E6CF 38%, #0AA7B8 100%); --lf: linear-gradient(180deg, #021c20, #0a8a93); --rf: linear-gradient(90deg, #011114, #06606a); }
.ws-pl.is-on .w3-tag { border-color: rgba(25, 230, 207, .7); color: #8ff3e8; }
.ws-stack .ws-cap { text-align: center; margin-inline: auto; }

.ws-oc-list { margin: 0; padding: 0; }
.ws-oc { position: relative; padding: 0 0 clamp(40px, 7vh, 72px) 64px; }
.ws-oc + .ws-oc { padding-top: clamp(40px, 7vh, 72px); border-top: 1px solid var(--line); }
.ws-oc-n { position: absolute; left: 0; top: 0; font: 400 2.6rem/1 var(--serif); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--teal) 70%, transparent); }
.ws-oc + .ws-oc .ws-oc-n { top: clamp(40px, 7vh, 72px); }
.ws-oc-t { margin: 4px 0 16px; font: 400 clamp(1.5rem, 2.3vw, 2rem)/1.15 var(--serif); letter-spacing: -.012em; color: var(--text); max-width: 20em; }
.ws-oc p { max-width: 36rem; }
.ws-oc p + p { margin-top: 1em; }
.ws-oc .links { margin-top: 14px; }

.ws-trays { margin: 30px 0 0; padding: 18px 18px 20px; border: 1px solid var(--line); background: rgba(15, 18, 23, .7); }
.ws-trays-iso { --rx: 58deg; --rz: 22deg; }
.ws-chip.is-off .w3-bx > i { box-shadow: 0 0 1.6em -.4em rgba(244, 243, 239, .25); }
.ws-trays figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ws-trays-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin: 10px 0 0; }
.ws-trays-dl dt { color: var(--text); font: 600 .95rem/1.3 var(--sans); }
.ws-trays-dl dd { margin: 2px 0 0; color: var(--text2); font-size: .93rem; line-height: 1.45; }

.ws-shots { margin: 30px 0 0; }
.ws-shots-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 460px; perspective: 900px; perspective-origin: 50% 20%; padding: 10px 4% 4px; }
.ws-shot { position: relative; display: flex; flex-direction: column; gap: 10px; transform-style: preserve-3d; transform: rotateY(24deg) translateZ(calc(var(--k) * 26px)); transform-origin: 0 50%; }
.ws-shot i { position: relative; display: block; aspect-ratio: 4 / 5; border: 1px solid rgba(25, 230, 207, .5); border-radius: 4px; background: linear-gradient(170deg, #16313a, #0d151b 70%); box-shadow: -18px 22px 40px -24px #000; overflow: hidden; }
.ws-shot i::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, rgba(244, 243, 239, .06), rgba(244, 243, 239, .12)); }
.ws-shot i::after { content: ''; position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); border-radius: 50% 50% 6% 6%; background: linear-gradient(180deg, rgba(143, 243, 232, .85), rgba(25, 230, 207, .45)); }
.ws-shot.is-w i::after { width: 16%; height: 30%; }
.ws-shot.is-m i::after { width: 38%; height: 62%; bottom: 0; }
.ws-shot.is-c i::after { width: 86%; height: 92%; bottom: -8%; }
.ws-shot b { font: var(--ws-lab); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }

.ws-path { margin: 30px 0 0; }
.ws-path-iso { --rx: 58deg; --rz: 24deg; }
.ws-trail { border-top: 2px dashed rgba(25, 230, 207, .5); transform: translateZ(.1em); }
.ws-flag-t { display: flex; flex-direction: column; gap: .35em; padding: .7em .9em; border-radius: .45em; background: rgba(11, 13, 16, .94); border: 1px solid rgba(25, 230, 207, .6); white-space: nowrap;
  font: 500 max(12px, 1.35em)/1.2 var(--sans); color: var(--text); box-shadow: 0 0 2.4em -1em rgba(25, 230, 207, .6); }
.ws-flag-t i { font: 500 max(11px, .8em)/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #8ff3e8; }
.ws-flag-t::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 3.2em; background: linear-gradient(rgba(25, 230, 207, .8), transparent); }

/* ---------------------------------------------------------------- 7. the $20 / $400 example */
.ws-ex-intro { align-items: start; }
.ws-cost { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(20px, 3vw, 48px); align-items: center; margin: 0;
  padding: clamp(18px, 3vw, 36px); border: 1px solid var(--line); background: linear-gradient(165deg, rgba(21, 25, 31, .85), rgba(11, 13, 16, .6)); }
.ws-ex-tag { position: absolute; left: clamp(18px, 3vw, 36px); top: clamp(14px, 2.4vw, 28px); z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px dashed var(--line2);
  font: var(--ws-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text); background: rgba(11, 13, 16, .8); }
.ws-ex-tag i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--text2); }
.ws-cols-iso { --rx: 57deg; --rz: 30deg; }
.ws-div { background: linear-gradient(180deg, transparent, rgba(244, 243, 239, .25), transparent); }
.ws-dots { position: absolute; left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); display: grid; grid-template-columns: repeat(10, 1.3em); gap: .55em; transform: translateZ(calc(var(--z) * 1em)); }
.ws-dots i { display: block; width: 1.3em; height: 1.3em; border-radius: .2em; background: linear-gradient(135deg, #8ff3e8, #19E6CF 50%, #0a8a93); box-shadow: .25em .25em 0 #06454b; opacity: var(--o); }
.ws-ball { position: absolute; left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); width: 2.8em; height: 2.8em; margin: -1.4em 0 0 -1.4em; transform-style: preserve-3d; transform: translateZ(calc(var(--z) * 1em)); }
.ws-ball::before { content: ''; position: absolute; inset: -10% -20% -20% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); opacity: var(--o); }
.ws-ball::after { content: ''; position: absolute; inset: 0; border-radius: 50%; transform: translateZ(1.4em) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1));
  background: radial-gradient(circle at 34% 30%, #f2fffd 0, #79f7ea 12%, #19E6CF 34%, #0a8d87 68%, #033b39 100%); box-shadow: 0 0 1.6em rgba(25, 230, 207, .5); opacity: var(--o); }

.ws-key { display: none; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding: 0; font: var(--ws-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.ws-key li { display: inline-flex; align-items: center; gap: 7px; }
.ws-key i { width: 10px; height: 10px; border-radius: 2px; }
.ws-key .k-a { background: #19E6CF; } .ws-key .k-m { background: #3478D4; } .ws-key .k-p { background: #1598B8; } .ws-key .k-o { background: #6f7a88; }
.ws-eqs { display: grid; gap: 14px; }
.ws-eq { padding: 18px 20px; border: 1px solid var(--line2); background: rgba(11, 13, 16, .6); }
.ws-eq.is-full { border-color: color-mix(in srgb, var(--teal) 55%, transparent); background: rgba(16, 35, 42, .5); }
.ws-eq-m { margin: 8px 0 0; max-width: none; color: var(--text); font-size: 1rem; }
.ws-eq-m i { font-style: normal; color: var(--accent-t); padding: 0 .2em; }
.ws-eq-v { margin: 4px 0 0 !important; max-width: none; color: var(--text2); font: 400 1.3rem/1.2 var(--serif); }
.ws-eq-v b { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--serif); color: var(--text); letter-spacing: -.02em; }
.ws-eq.is-full .ws-eq-v b { color: #8ff3e8; text-shadow: 0 0 40px rgba(25, 230, 207, .35); }
.ws-eq-n { margin: 10px 0 0 !important; max-width: none; font-size: .9rem; line-height: 1.45; color: var(--text2); }
.ws-ex-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; margin-top: clamp(36px, 6vh, 64px); }
.ws-ex-after p + p { margin-top: 0; }

/* ---------------------------------------------------------------- 8. real work: the two films
   Each player is a flat native <video> (9:16, controls, preload="none"); nothing transforms it. Behind it, an aria-hidden
   3D illustration fans out to the right: Sanctuary, windows into the shop; HAMR, the footage layered behind the interview. */
.ws-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.ws-fc { min-width: 0; }
.ws-fc-h { margin: 0 0 22px; font: 400 clamp(1.45rem, 2.2vw, 1.9rem)/1.15 var(--serif); letter-spacing: -.012em; color: var(--text); max-width: 18em; }
.ws-fc > p { margin-top: 20px; font-size: 1rem; }
.ws-fc > p.ws-reel-note { margin-top: 10px; font-size: .88rem; color: var(--text2); opacity: .85; }
.ws-films-punch { margin-top: clamp(40px, 7vh, 72px); max-width: 30em; }
.ws-reel { --pw: min(360px, 100% - 96px); --fan: 34px; position: relative; margin: 0; }
.ws-reel-player { position: relative; z-index: 2; width: var(--pw); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; border: 1px solid var(--line2); background: #07090b;
  box-shadow: 0 40px 80px -40px #000, 0 0 0 1px rgba(0, 0, 0, .4); }
.ws-reel-player video { display: block; width: 100%; height: 100%; object-fit: cover; background: #07090b; }
.ws-reel-player video p { padding: 20px; color: var(--text); }
.ws-reel-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: end center; width: 100%; padding-bottom: 13%; background: linear-gradient(180deg, transparent 55%, rgba(5, 6, 8, .5)); }
.ws-reel-play span { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(11, 13, 16, .72); border: 1.5px solid var(--teal); color: var(--teal);
  box-shadow: 0 0 40px -8px rgba(25, 230, 207, .6); transition: transform .4s var(--ease), background .4s; }
.ws-reel-play svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; }
.ws-reel-play:hover span { transform: scale(1.06); background: rgba(16, 35, 42, .85); }
.ws-reel-play:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
.ws-reel-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; width: var(--pw); margin-top: 14px; }
.ws-reel-t { color: var(--text); font: 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.2 var(--serif); }
.ws-reel-m { font: var(--ws-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
/* the 3D illustration behind the player */
.ws-reel-depth { position: absolute; left: 0; top: 0; z-index: 1; width: var(--pw); aspect-ratio: 9 / 16; perspective: 1100px; perspective-origin: 0 45%; pointer-events: none; transform-style: preserve-3d; }
.ws-reel-depth .dl { position: absolute; inset: 0; display: block; border-radius: 12px; border: 1px solid rgba(244, 243, 239, .16); box-shadow: -20px 30px 50px -30px #000;
  transform: translate3d(calc(var(--k) * var(--fan)), calc(var(--k) * -12px), calc(var(--k) * -50px)) rotateY(-8deg); transform-origin: 0 50%; }
.ws-reel-depth .dl b { position: absolute; right: 7px; top: 16px; writing-mode: vertical-rl; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); opacity: .85; }
.is-window .dl { background: linear-gradient(90deg, transparent calc(50% - 4px), #0b0e12 calc(50% - 4px), #0b0e12 calc(50% + 4px), transparent calc(50% + 4px)),
    linear-gradient(180deg, transparent calc(40% - 4px), #0b0e12 calc(40% - 4px), #0b0e12 calc(40% + 4px), transparent calc(40% + 4px)),
    radial-gradient(60% 40% at 50% 45%, rgba(244, 243, 239, .14), transparent 70%), linear-gradient(170deg, #1c2a30, #0c1216);
  border: 10px solid #0b0e12; outline: 1px solid rgba(244, 243, 239, .14); }
.is-layers .dl.is-b1 { background: repeating-linear-gradient(100deg, transparent 0 8%, rgba(244, 243, 239, .14) 8% 9%, transparent 9% 20%) 0 100% / 100% 40% no-repeat, linear-gradient(175deg, #23303a, #10161c); }
.is-layers .dl.is-b2 { background: radial-gradient(circle at 30% 30%, rgba(25, 230, 207, .32) 0 3%, transparent 4%), radial-gradient(circle at 70% 42%, rgba(91, 141, 239, .38) 0 3.5%, transparent 4.5%), radial-gradient(60% 40% at 50% 100%, rgba(25, 230, 207, .16), transparent), linear-gradient(170deg, #1a2430, #0e141b); }
.is-layers .dl.is-b3 { background: radial-gradient(22% 16% at 40% 62%, rgba(244, 243, 239, .26), transparent 70%), radial-gradient(18% 12% at 64% 70%, rgba(143, 243, 232, .24), transparent 70%), linear-gradient(170deg, #1d2a3c, #101722); }

/* ---------------------------------------------------------------- 9. the experience: format + workbook */
.ws-xp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ws-xp-copy .sec-h { margin-bottom: 32px; }
.ws-xp-copy p + p { margin-top: 1em; }
.ws-xp-btns { margin-top: 32px; }
.ws-fmt { margin: 0; }
.ws-fmt-iso { --rx: 58deg; --rz: 16deg; }
.ws-fmt-cap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ws-fmt-cap span { display: flex; flex-direction: column; gap: 4px; color: var(--text2); font-size: .92rem; line-height: 1.4; }
.ws-fmt-cap b { color: var(--text); font: 600 .95rem/1.3 var(--sans); }
.ws-fmt-cap .is-opt { padding-left: 14px; border-left: 1px dashed var(--line2); }

.ws-wb { margin-top: clamp(56px, 9vh, 104px); }
.ws-wb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 24px; }
.ws-wb-h { margin: 0; }
.ws-wb-head p { margin: 0; }
.ws-wb-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; }
.ws-wb-pg figure { margin: 0; }
.ws-wb-img { display: block; border: 1px solid var(--line2); border-radius: 2px; overflow: hidden; background: #e6e4de; box-shadow: 0 30px 60px -36px #000; }
.ws-wb-img img { display: block; width: 100%; height: auto; }
.ws-wb-pg figcaption, .ws-book-cap { margin-top: 14px; color: var(--text2); font-size: .95rem; line-height: 1.5; }
.ws-wb-pg figcaption .ws-lab, .ws-book-cap .ws-lab { margin-bottom: 6px; }
.ws-wb-full { display: flex; width: fit-content; align-items: center; min-height: 44px; margin-top: 2px; font: var(--ws-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ws-wb-full:hover { color: var(--accent-t); }

/* the open book (built by workshop.js on wider screens when motion is allowed) */
.ws-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(20px, 3vw, 44px); align-items: center; }
.ws-book-st { perspective: 2200px; perspective-origin: 50% -20%; padding: 10px 0 40px; }
.ws-book-b { position: relative; width: min(100%, 860px); margin: 0 auto; aspect-ratio: 2400 / 1427; transform-style: preserve-3d; transform: rotateX(14deg); }
.ws-book-cv { position: absolute; inset: -1.4% -1.2% -2.2%; transform: translateZ(-6px); border-radius: 6px; background: linear-gradient(135deg, #24406a, #0E1F36 60%); box-shadow: 0 50px 70px -40px #000, 0 0 0 1px rgba(244, 243, 239, .08); }
.ws-book-l, .ws-leaf { position: absolute; top: 0; height: 100%; width: 50%; }
.ws-book-l { left: 0; transform: translateZ(0); background: #e6e4de; overflow: hidden; border-radius: 3px 0 0 3px; }
.ws-leaf { left: 50%; transform-style: preserve-3d; transform-origin: 0 50%; transform: translateZ(calc(var(--zi, 0) * 1px)) rotateY(calc(var(--flip, 0) * -180deg)); transition: transform 1.15s cubic-bezier(.62, .04, .3, 1); }
.ws-leaf > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #e6e4de; }
.ws-leaf .fa { border-radius: 0 3px 3px 0; }
.ws-leaf .fa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ws-leaf .fb { transform: rotateY(180deg); border-radius: 3px 0 0 3px; }
.ws-leaf .fa::after, .ws-leaf .fb::after, .ws-book-l::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.ws-leaf .fa::after { background: linear-gradient(90deg, rgba(11, 13, 16, .28), rgba(11, 13, 16, 0) 8%); }
.ws-leaf .fb::after, .ws-book-l::after { background: linear-gradient(270deg, rgba(11, 13, 16, .3), rgba(11, 13, 16, 0) 8%); }
.ws-pnote { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 9% 10%; color: #0E1F36;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(14, 31, 54, .1) 31px 32px) 0 60% / 100% 50% no-repeat, #ecebe6; }
.ws-pnote .k { font: 600 max(11px, .72rem)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #087884; }
.ws-pnote .h { font: 400 clamp(1.4rem, 2.4vw, 2.1rem)/1.12 var(--serif); color: #0E1F36; }
.ws-pnote .p { font: 400 clamp(.92rem, 1.2vw, 1.05rem)/1.5 var(--sans); color: #2a3a4f; max-width: 24em; }
.ws-pnote .n { position: absolute; left: 10%; bottom: 7%; font: 600 max(11px, .72rem)/1 var(--mono); letter-spacing: .14em; color: #4a525c; }
.ws-leaf.is-turning .fa::before, .ws-leaf.is-turning .fb::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11, 13, 16, .35), rgba(255, 255, 255, .15)); animation: wsTurnShade 1.15s ease-in-out both; }
@keyframes wsTurnShade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.ws-book-side { min-width: 0; }
.ws-book-ctl { display: grid; gap: 8px; margin: 0 0 18px; }
.ws-book-ctl button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; text-align: left; border: 1px solid var(--line2); background: rgba(11, 13, 16, .6);
  color: var(--text2); font: 600 .95rem/1.25 var(--sans); transition: border-color .3s, color .3s, background .3s; }
.ws-book-ctl button b { font: 500 max(11px, .72rem)/1 var(--mono); letter-spacing: .1em; color: var(--text2); }
.ws-book-ctl button:hover { color: var(--text); border-color: rgba(244, 243, 239, .32); }
.ws-book-ctl button[aria-pressed="true"] { color: var(--text); border-color: var(--teal); background: rgba(25, 230, 207, .08); }
.ws-book-ctl button[aria-pressed="true"] b { color: #8ff3e8; }
.ws-book-ctl button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.ws-book-cap { margin-top: 0; }
@media (min-width: 761px) { .ws-wb.has-book .ws-wb-gal { display: none; } }
@media (max-width: 760px) { .ws-book { display: none; } }

/* ---------------------------------------------------------------- 10. facilitator + questions */
.ws-tc-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.ws-tc-fig { position: relative; margin: 0; max-width: 420px; }
.ws-tc-frame { position: relative; overflow: hidden; border: 1px solid var(--line2); border-radius: 3px; aspect-ratio: 1147 / 1371; background: #07090b; }
.ws-tc-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-tc-fig > .cb { opacity: .95; } .ws-tc-fig > .cb.tl { top: -1px; left: -1px; } .ws-tc-fig > .cb.br { bottom: 26px; right: -1px; }
.ws-tc-fig figcaption { margin-top: 10px; font: var(--ws-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.ws-tc .sec-h { margin-bottom: 30px; }
.ws-tc .links { margin-top: 22px; }
.ws-faq { margin-top: 10px; }

/* ---------------------------------------------------------------- 11. the two forms */
.ws-join-in { max-width: 860px; }
.ws-join-h { max-width: 15em !important; margin-bottom: 30px; }
.ws-join-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.ws-join-act p { margin: 0; max-width: none; color: var(--text2); }
.ws-fbox { position: relative; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(40px, 6vh, 64px);
  padding: clamp(22px, 4vw, 52px); background: linear-gradient(165deg, var(--elev), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: 0 0 120px -60px var(--accent); scroll-margin-top: 8px; }
.ws-fbox > .cb { opacity: .95; } .ws-fbox > .cb.tl { top: -1px; left: -1px; } .ws-fbox > .cb.br { bottom: -1px; right: -1px; }
.ws-form-h { margin: 12px 0 14px; color: var(--text); font: 400 clamp(1.9rem, 3.2vw, 2.8rem)/1.04 var(--serif); letter-spacing: -.02em; scroll-margin-top: 24px; }
.ws-form-h:focus { outline: none; }
.ws-fbox-side p, .ws-form-intro { font-size: .98rem; }
.ws-form-intro { margin-bottom: 24px; }
.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ws-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ws-f-wide { grid-column: 1 / -1; }
.ws-f > label { color: var(--text); font: 600 .92rem/1.35 var(--sans); }
.ws-form input[type="text"], .ws-form input[type="email"], .ws-form textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; color: var(--text); font: 400 1rem/1.4 var(--sans); background: rgba(11, 13, 16, .78); border: 1px solid var(--line2); border-radius: 2px;
  -webkit-appearance: none; appearance: none; transition: border-color .3s, box-shadow .3s; }
.ws-form textarea { min-height: 120px; resize: vertical; }
.ws-form :is(input, textarea):hover { border-color: rgba(244, 243, 239, .32); }
.ws-form :is(input, textarea):focus { outline: none; border-color: var(--ws-act); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-act) 25%, transparent); }
.ws-form :is(input, textarea)[aria-invalid="true"] { border-color: var(--ws-bad); box-shadow: 0 0 0 3px rgba(255, 138, 122, .14); }
.ws-hint { margin: 0; max-width: none; color: var(--text2); font-size: .86rem; }
.ws-err { margin: 0; max-width: none; color: #ffb4a9; font-size: .88rem; line-height: 1.4; }
.ws-err::before { content: '!'; content: '!' / ''; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--ws-bad); color: #2a0d08; font: 700 11px/1 var(--sans); vertical-align: 1px; }
.ws-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ws-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 20px; margin-top: 24px; }
.ws-status { flex: 1 1 14rem; margin: 0; max-width: none; color: var(--text2); font-size: .92rem; }
.ws-fail { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; border: 1px solid rgba(255, 138, 122, .55); background: rgba(255, 138, 122, .07); }
.ws-fail p { flex: 1 1 18rem; margin: 0; max-width: none; color: var(--text); font-size: .95rem; }
.ws-fail .ws-fail-alt { flex-basis: 100%; color: var(--text2); }
.ws-fail .btn { padding: 14px 20px; }
.ws-send { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 26px; background: var(--ws-act); color: #04201d; border: 1px solid var(--ws-act); border-radius: 2px;
  font: 700 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 14px 50px -20px color-mix(in srgb, var(--ws-act) 70%, transparent); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.ws-send:hover { box-shadow: 0 18px 60px -14px color-mix(in srgb, var(--ws-act) 80%, transparent); }
.ws-send svg { flex: none; transition: transform .5s var(--ease); } .ws-send:hover svg { transform: translateX(4px); }
.ws-send:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.ws-send[disabled] { opacity: .7; cursor: progress; }
.ws-support { margin: 16px 0 0 !important; max-width: none; color: var(--text2); font-size: .9rem; text-align: right; }
.ws-support .plink { margin-left: .4em; }
/* confirmations and the "couldn't send" notes: hidden until targeted (no JS) or set by workshop.js */
.ws-sent, .ws-err-note { scroll-margin-top: 24px; }   /* on top of the page's 88px scroll-padding: clear of the fixed header */
.ws-sent { display: none; padding: clamp(22px, 4vw, 36px); border: 1px solid color-mix(in srgb, var(--ws-act) 55%, transparent); background: rgba(16, 35, 42, .55); }
.ws-sent:focus, .ws-err-note:focus { outline: none; }
.ws-sent:target, .ws-fbox.is-sent .ws-sent { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.ws-sent:target ~ .ws-form, .ws-sent:target ~ .ws-err-note, .ws-fbox.is-sent .ws-form, .ws-fbox.is-sent .ws-err-note { display: none !important; }
.ws-sent-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--ws-act); border-radius: 50%; color: var(--ws-act); box-shadow: 0 0 30px -8px var(--ws-act); }
.ws-sent-mark svg { width: 24px; height: 24px; }
.ws-sent-p { margin: 0; max-width: 34rem; color: var(--text); font: 400 clamp(1.3rem, 2vw, 1.65rem)/1.35 var(--serif); }
.ws-err-note { display: none; margin: 0 0 22px; max-width: none; padding: 14px 16px; border: 1px solid rgba(255, 138, 122, .55); background: rgba(255, 138, 122, .07); color: var(--text); font-size: .95rem; }
.ws-err-note:target, .ws-fbox.is-err .ws-err-note { display: block; }

/* the host invitation: its own band and colour, after the attendee's final call to action */
.ws-host { --ws-act: #6E9BF2; margin-top: clamp(24px, 4vh, 48px); background: linear-gradient(180deg, rgba(24, 58, 102, .26), rgba(24, 58, 102, .08) 60%, transparent); border-top: 1px solid rgba(91, 141, 239, .35); }
.ws-host-band { display: flex; align-items: center; gap: 16px; margin: calc(clamp(76px, 11vh, 140px) * -1 - 1px) 0 clamp(56px, 8vh, 96px); transform: translateY(-50%);
  font: var(--ws-lab); letter-spacing: .2em; text-transform: uppercase; color: #a9c3f7; }
.ws-host-band span { padding: 8px 14px; border: 1px solid rgba(91, 141, 239, .5); background: var(--bg); }
.ws-host-band i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(91, 141, 239, .5)); }
.ws-host-band i:last-child { background: linear-gradient(270deg, transparent, rgba(91, 141, 239, .5)); }
.ws-host-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ws-host-copy p + p { margin-top: 1em; }
.ws-host-copy .btns { margin-top: 28px; }
.ws-fbox.is-host { display: block; margin-top: 0; border-color: rgba(91, 141, 239, .45); box-shadow: 0 0 120px -60px rgba(91, 141, 239, .8); }
.ws-host .ws-send { color: #08142a; }
.ws-host .ws-sent { background: rgba(24, 58, 102, .3); }
.ws-host .btn.ghost:hover { border-color: #6E9BF2; color: #a9c3f7; background: rgba(91, 141, 239, .06); box-shadow: 0 0 40px -12px rgba(91, 141, 239, .5); }

/* ---------------------------------------------------------------- 12. responsive */
@media (max-width: 1180px) {
  .ws-cost { grid-template-columns: minmax(0, 1fr); }
  .ws-eqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ws-hero-grid, .ws-why-grid, .ws-oc-grid, .ws-xp-grid, .ws-tc-grid, .ws-host-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-desk { margin-right: 0; max-width: 640px; margin-inline: auto; }
  .ws-oc-side { position: static; max-width: 520px; }
  .ws-noise { max-width: 640px; }
  .ws-fbox { grid-template-columns: minmax(0, 1fr); }
  .ws-book { grid-template-columns: minmax(0, 1fr); }
  .ws-book-ctl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-tc-fig { max-width: 360px; }
}
@media (max-width: 860px) {
  .ws-qs { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .ws-films { grid-template-columns: minmax(0, 1fr); }
  .ws-ex-after { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ws-wb-gal { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .ws-eqs { grid-template-columns: minmax(0, 1fr); }
  .ws-trays-dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ws .wrap { width: min(1240px, 100% - 32px); }   /* phones: 16px gutters */
  .ws-oc { padding-left: 0; }
  .ws-oc-n { position: static; display: block; margin-bottom: 6px; font-size: 2rem; }
  .ws-oc + .ws-oc .ws-oc-n { top: auto; }
  .ws-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-submit { justify-content: stretch; }
  .ws-send { width: 100%; justify-content: center; }
  .ws-support { text-align: left; }
  .ws-cost { padding: 52px 12px 14px; }
  .ws-ex-tag { left: 12px; top: 12px; }
  .ws-trays { padding: 14px 12px 16px; }
  .ws-fmt-cap { grid-template-columns: minmax(0, 1fr); }
  .ws-fmt-cap .is-opt { padding-left: 0; border-left: 0; padding-top: 10px; border-top: 1px dashed var(--line2); }
  .ws-host-band { margin-bottom: 48px; }
  .w3-lo { display: none !important; }
  .ws-book-ctl { grid-template-columns: minmax(0, 1fr); }
  .ws-reel { --pw: min(360px, 100% - 64px); --fan: 20px; }
  /* phones: the 3D labels keep their 11px floor while the scenes shrink, so the scenes make room for them */
  .ws-desk .w3 { aspect-ratio: 64 / 48; }
  .ws-desk .ws-g-q[style*="--k:0"] .w3-bb { --x: 2.5 !important; --y: 15 !important; --z: 15 !important; }
  .ws-desk .ws-g-q[style*="--k:1"] .w3-bb { --x: 41.5 !important; --y: 15 !important; --z: 22 !important; }
  .ws-desk-iso { --cy: 31 !important; }
  .ws-noise-st { --xm: .55; --ym: 1.45; aspect-ratio: 64 / 54; }
  .ws-noise-q { width: 86%; }
  .ws-adv { font-size: 16px; } .ws-adv i { font-size: 11px; }
  .ws-stack-iso { --cx: 17 !important; }
  .ws-path .w3 { aspect-ratio: 64 / 44; }
  .ws-fmt .w3-bb { display: none; }
  .ws-key { display: flex; }
  .ws-cols .w3 { aspect-ratio: 64 / 54; }
  .ws-key { margin-top: 12px; }
}
@media (max-width: 420px) {
  .ws-hero .btns .mag, .ws-hero .btns .btn { width: 100%; }
  .ws-hero .btns .btn { justify-content: space-between; }
  .ws-join-act .mag, .ws-join-act .btn, .ws-xp-btns .mag, .ws-xp-btns .btn { width: 100%; }
  .ws-join-act .btn, .ws-xp-btns .btn { justify-content: space-between; }
  .ws-send { letter-spacing: .1em; padding: 0 18px; }
}

/* ---------------------------------------------------------------- 13. one-shot motion (pre-states only here) + pointer/scroll-linked tilt */
@media (prefers-reduced-motion: no-preference) {
  /* shared reveals: dim and lower until in view (never invisible) */
  html.ready .ws .r:not(.in) { opacity: .35; transform: translateY(16px); filter: none; }
  html.ready .ws .split:not(.in) .w { opacity: .35; transform: translateY(.22em); filter: blur(3px); }

  /* the 3D groups ease in: faces fade through --o, groups move through transform */
  .w3-g { transition: transform 1s var(--ease) var(--dd, 0ms), --o .6s var(--ease) var(--dd, 0ms); }

  /* hero: the table tilts with the pointer and flattens a little as the page scrolls (pages.js sets --px/--py/--hp) */
  .ws-desk-iso { --rx: calc(56deg - var(--py, 0) * 6deg + var(--hp, 0) * 12deg); --rz: calc(36deg + var(--px, 0) * 10deg); }
  html.ready .ws-desk:not(.in) .ws-g-book { transform: translateZ(9em); --o: 0; }
  html.ready .ws-desk:not(.in) .ws-g-phone { transform: translateZ(-6em); --o: 0; }
  html.ready .ws-desk:not(.in) .ws-g-q { transform: translateZ(14em); --o: 0; }
  .ws-desk .ws-g-book { --dd: 250ms; } .ws-desk .ws-g-phone { --dd: 500ms; }
  .ws-desk .ws-g-q { --dd: calc(900ms + var(--k) * 220ms); transition-duration: 1.3s, .8s; }

  /* recognition: the advice moves with the scroll (--sp, workshop.js); nothing to pre-state here */
  .ws-noise-st.is-live .ws-adv, .ws-noise-st.is-live .ws-noise-q { transition: transform .2s linear, opacity .2s linear; }

  /* approach: each prism turns once, from the complaint to its question */
  html.ready .ws-qs:not(.in) .ws-pr-b { --turn: -8deg; }
  .ws-pr-b { transition: transform 1.5s cubic-bezier(.55, .05, .25, 1) calc(var(--k, 0) * 260ms + 350ms); }
  .ws-q:nth-child(1) .ws-pr-b { --k: 0; } .ws-q:nth-child(2) .ws-pr-b { --k: 1; } .ws-q:nth-child(3) .ws-pr-b { --k: 2; }

  /* outcomes: each plate settles onto the stack once its outcome is read (workshop.js adds .in); the read one lifts */
  html.ready .ws-stack.is-live .ws-pl:not(.in) { transform: translateZ(calc(var(--k) * 5.8em + 12em)); --o: 0; }
  .ws-stack .ws-pl { transition: transform .9s cubic-bezier(.3, 1.25, .5, 1) var(--dd, 0ms), --o .5s var(--ease) var(--dd, 0ms); }
  .ws-stack .ws-pl .w3-bx { transition: none; }
  html.ready .ws-trays-sc:not(.in) .ws-chip { transform: translateZ(8em); --o: 0; }
  .ws-trays-sc .ws-chip { --dd: calc(var(--k) * 200ms + 200ms); }
  html.ready .ws-trays-sc:not(.in) .ws-chip.is-off { transform: translate3d(-12em, 4em, -2em); --o: 0; }
  html.ready .ws-shots-st:not(.in) .ws-shot { transform: rotateY(60deg) translateZ(0); opacity: .35; }
  .ws-shot { transition: transform 1.1s var(--ease) calc(var(--k) * 180ms + 150ms), opacity .6s var(--ease) calc(var(--k) * 180ms + 150ms); }
  html.ready .ws-path-sc:not(.in) .ws-step { transform: translateZ(-4em); --o: 0; }
  html.ready .ws-path-sc:not(.in) .ws-flag { transform: translateZ(8em); --o: 0; }
  .ws-path-sc .ws-step { --dd: calc(var(--k) * 260ms + 150ms); } .ws-path-sc .ws-flag { --dd: 1100ms; }

  /* the example: both ad blocks land, the inquiries appear, then the other costs stack onto the right column */
  html.ready .ws-cols:not(.in) .ws-c { transform: translateZ(10em); --o: 0; }
  .ws-cols .ws-c { --dd: calc(var(--k) * 330ms + 200ms); }

  /* the films: the windows and the footage layers fan out once from behind each (flat) player */
  html.ready .ws-reel-depth:not(.in) .dl { transform: translate3d(0, 0, calc(var(--k) * -6px)) rotateY(0deg); }
  .ws-reel-depth .dl { transition: transform 1.4s cubic-bezier(.3, .1, .2, 1) calc(var(--k) * 140ms + 300ms); }

  /* the format: the workshop block lands, then the optional clinic */
  html.ready .ws-fmt-sc:not(.in) .ws-blk { transform: translateZ(6em); --o: 0; }
  .ws-fmt-sc .ws-blk { --dd: calc(var(--k) * 450ms + 150ms); }
}

/* ---------------------------------------------------------------- 14. reduced motion + print */
@media (prefers-reduced-motion: reduce) {
  .ws-leaf { transition: none; }
  .ws-leaf.is-turning .fa::before, .ws-leaf.is-turning .fb::before { display: none; }
}
@media print {
  .ws-book, .ws-reel-play { display: none !important; }
  .ws-wb-gal { display: grid !important; }
}