/* The home page after the poster: one continuous composition in controlled complexity.
   Each scene has one dominant element, several supporting ones and micro information. Stamps (base.css) work at
   radically different scales, cross section boundaries and overprint; giant type crops through the viewport; real
   project material is layered, not boxed. Scroll-driven motion (m-* classes, base.css) makes it move.
   Order: work intro > OVREL (bone) > Wallcreeper (graphite) > statement > Origin (warm grey) > more work
   > experiments (the wild room, shifting colour) > capabilities + estimator > process (cobalt) > studio + questions
   > contact (the final poster, oxblood, the red star). */

/* Wallcreeper's own faces, for the live motion stage (loaded only when the stage draws) */
@font-face{font-family:"WC Geist";font-weight:100 900;font-display:swap;src:url("../assets/fonts/wc/geist.woff2") format("woff2")}
@font-face{font-family:"WC Geist Mono";font-weight:100 900;font-display:swap;src:url("../assets/fonts/wc/geist-mono.woff2") format("woff2")}
@font-face{font-family:"WC Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/wc/instrument-serif-italic.woff2") format("woff2")}

/* ---------- shared ---------- */
main > section{position:relative;overflow-x:clip}   /* type and stamps crop at the screen edge; they may still cross into the sections above and below */
.pj-head{align-items:baseline;row-gap:0.6rem;position:relative;z-index:3}
.pj-head > :nth-child(1){grid-column:1}
.pj-head > :nth-child(2){grid-column:2/6}
.pj-head > :nth-child(3){grid-column:9/13;justify-self:end}
.pj-st i{display:inline-block;width:0.5rem;height:0.5rem;border-radius:50%;background:currentColor;opacity:.35;margin-right:0.45rem;vertical-align:0.05em}
.pj-live i{background:#2f8a4a;opacity:1}
.pj-giant{position:relative;z-index:1;font:900 clamp(4rem,23vw,26rem)/0.78 var(--ff-black);letter-spacing:-0.07em;white-space:nowrap;margin-left:-0.05em;pointer-events:none}
.pj-lede{font:500 clamp(1.125rem,0.95rem + 0.5vw,1.4rem)/1.3 var(--ff-head);letter-spacing:-0.01em;max-width:34ch}
.pj-meta{display:grid;gap:0.5rem;margin-top:1.1rem;font-size:0.9375rem;line-height:1.4}
.pj-meta div{display:grid;grid-template-columns:5rem 1fr;gap:0.75rem}
.pj-meta dt{font:700 0.6875rem/1.9 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase;opacity:.78}
.pj-meta dd{margin:0}
.pj-links{display:flex;flex-wrap:wrap;gap:0.2rem 1.4rem;margin-top:1rem;font:800 0.9375rem/1.2 var(--ff-head)}
.pj-links a,.ct-links a,.more-d a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.28em;display:inline-flex;align-items:center;min-height:2.75rem}
figure{position:relative}
figure img{display:block}
.pj figure > figcaption.ml{margin-top:0.6rem;opacity:.8}
.more-f > figcaption.ml{margin-top:0.6rem}
.film-toggle{justify-self:end}

/* ---------- work intro: the poster hands over; a run of type slides through and the red star rolls in ---------- */
.wi{padding-block:clamp(2.5rem,2rem + 3vw,5rem) clamp(2rem,1.5rem + 2vw,3.5rem);overflow:visible}
.wi-star{left:61vw;top:calc(min(46vw,44rem) * -0.3);--z:4}
.wi .stp.m-spin{left:31%;top:18%}
.wi-run{position:relative;z-index:2;color:var(--pg);font:900 clamp(4rem,19vw,20rem)/0.8 var(--ff-black);letter-spacing:-0.07em;white-space:nowrap;margin-left:-3vw}
.wi-run::before,.exp-run::before{content:attr(data-run)}   /* graphic type: generated, so it is not read out */
.wi-meta{position:relative;z-index:3;margin-top:clamp(1.4rem,3vw,3rem);row-gap:0.4rem}
.wi-meta > :nth-child(1){grid-column:1/4}.wi-meta > :nth-child(2){grid-column:4/7}.wi-meta > :nth-child(3){grid-column:7/10}.wi-meta > :nth-child(4){grid-column:10/13;justify-self:end}

/* ---------- 02 Wallcreeper: graphite, the brand's own yellow; fewer, larger pieces and the motion system live ---------- */
.pj-wc{padding-block:clamp(3rem,2rem + 4vw,6rem) clamp(5rem,4rem + 6vw,10rem)}
.pj-wc .pj-st i{background:var(--wc-yellow);opacity:1}
.wc-giant{color:var(--wc-chalk);margin-top:clamp(1rem,2vw,2rem)}
.wc-stage{position:relative;z-index:2;margin-top:-8.5vw;row-gap:0;align-items:start}
.wc-plate{grid-column:1/10;grid-row:1;z-index:2}
.wc-reel{grid-column:10/13;grid-row:1;z-index:3;margin-top:11vw}
.wc-reel .phone{width:100%;max-width:17rem;outline:6px solid var(--wc-graphite)}
.wc-reel figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:0.8rem;max-width:17rem}
.wc-card{grid-column:1/6;grid-row:2;z-index:4;margin-top:clamp(2rem,4vw,4rem);padding:clamp(1.2rem,2vw,2rem);background:var(--wc-yellow);color:var(--wc-graphite);align-self:start}
.wc-card .pj-meta dt{opacity:.85}
.wc-live{grid-column:6/13;grid-row:2;z-index:3;margin-top:-3vw}
.wc-live .wc-cv{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--wc-graphite);outline:1px solid color-mix(in srgb,var(--wc-chalk) 22%,transparent)}
.wc-live .wc-still,.wc-live canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wc-live canvas{opacity:0;transition:opacity .4s}
.wc-live.is-live canvas{opacity:1}
.wc-live figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:0.7rem}
.wc-bag{grid-column:1/5;grid-row:3;z-index:3;margin-top:clamp(3rem,6vw,6rem)}
.wc-merch{grid-column:5/13;grid-row:3;z-index:2;margin-top:clamp(5rem,10vw,10rem)}

/* ---------- 01 OVREL: the word is huge, the store recording lands on it, then the store's own ideas in sequence ---------- */
.pj-ov{padding-block:clamp(3rem,2rem + 4vw,6rem) clamp(5rem,4rem + 6vw,9rem)}
.ov-cross{left:-12vw;top:calc(min(52vw,50rem) * -0.5);--z:5}
.ov-giant{font-size:clamp(5rem,31.5vw,36rem);line-height:0.74;color:var(--ov-ink);margin-top:clamp(0.5rem,2vw,2rem)}
.ov-take{position:relative;z-index:2;margin-top:-8vw}
.ov-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ov-stone)}
.ov-frame img,.ov-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ov-take figcaption{margin-top:0.9rem;align-items:center}
.ov-take .cap-d{grid-column:1/9}
.ov-take .cap-m{display:none}
.ov-take .film-toggle{grid-column:12}
.ov-seq{position:relative;z-index:3;margin-top:clamp(3rem,2rem + 4vw,6rem);align-items:start;row-gap:0}
.ov-pairs{grid-column:1/9;grid-row:1;outline:1px solid color-mix(in srgb,var(--ov-ink) 14%,transparent);outline-offset:0}
.ov-quiz{grid-column:10/13;grid-row:1;margin-top:8vw;z-index:2}
.ov-quiz .phone,.ov-opt .phone{max-width:15rem;outline:6px solid var(--ov-bone)}
.ov-info{grid-column:1/5;grid-row:2;margin-top:clamp(3rem,6vw,7rem)}
.ov-room{grid-column:5/12;grid-row:2;margin-top:clamp(2rem,4vw,4rem);outline:1px solid color-mix(in srgb,var(--ov-ink) 14%,transparent)}
.ov-opt{grid-column:11/13;grid-row:2;margin-top:clamp(10rem,24vw,24rem);z-index:3}
.ov-opt .phone{max-width:13rem;margin-left:auto}
.ov-opt figcaption{text-align:right}

/* ---------- statement: the sentence as a poster, a green bloom behind, the red star as punctuation ---------- */
.stmt{padding:clamp(6rem,4rem + 8vw,13rem) var(--pad)}
.stmt-k{position:relative;z-index:2;margin-bottom:clamp(1.5rem,3vw,3rem)}
.stmt-t{position:relative;z-index:1;color:var(--pg);font:900 clamp(2.5rem,1rem + 6vw,8rem)/0.96 var(--ff-black);letter-spacing:-0.055em;max-width:16ch;text-wrap:balance}
.stmt-b1{left:26vw;top:8%;--z:0}
.stmt-b2{right:4vw;bottom:8%;--z:2}
.stmt-b3{right:4vw;top:14%}

/* ---------- 03 Origin Pilates: the lake runs edge to edge under the name; the site's own pages around it ---------- */
.pj-og{padding-block:clamp(3rem,2rem + 4vw,6rem) clamp(5rem,4rem + 6vw,9rem)}
.og-f{right:-10vw;top:-6vw;--z:0}
.og-giant{font-size:clamp(3.6rem,15.5vw,17rem);line-height:0.8;white-space:normal;z-index:3;color:var(--og-ink);margin-top:clamp(0.5rem,2vw,2rem)}
.og-giant span{display:block}
.og-giant span + span{margin-left:22vw}
.og-lake{position:relative;z-index:2;margin-top:-6vw}
.og-lake img{width:100%}
.og-lake figcaption{display:flex;justify-content:space-between;margin-top:0.8rem;opacity:.85}
.og-seq{position:relative;z-index:3;margin-top:clamp(2rem,4vw,5rem);align-items:start}
.og-desk{grid-column:1/7;grid-row:1;outline:1px solid color-mix(in srgb,var(--og-ink) 12%,transparent)}
.og-phone{grid-column:6/8;grid-row:1;margin-top:10vw;z-index:2}
.og-phone .phone{outline:6px solid var(--og-field)}
.og-trio{grid-column:8/13;grid-row:1;margin-top:3vw}
.og-class{grid-column:2/6;grid-row:2;margin-top:-4vw;z-index:3}
.og-info{grid-column:7/12;grid-row:2;margin-top:clamp(3rem,6vw,7rem)}

/* ---------- more work: three names as big type, each with its own stamp ---------- */
.more{padding-block:clamp(5rem,4rem + 5vw,9rem)}
.more-s1{right:-5vw;bottom:-8rem;--z:4}
.more-top{margin-bottom:1.6rem}
.more-top > :first-child{grid-column:1/7}.more-top > :last-child{grid-column:7/13;justify-self:end}
.more-l{padding-inline:var(--pad)}
.more-i{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;padding-block:1.4rem 1.8rem;border-top:2px solid currentColor}
.more-mk{left:calc(100% / 12 - 1rem);top:0.8rem;--z:0}
.more-no{grid-column:1;align-self:start;position:relative;z-index:1}
.more-t{grid-column:2/9;position:relative;z-index:1;color:var(--pg);font:900 clamp(2.8rem,1rem + 8vw,10rem)/0.8 var(--ff-black);letter-spacing:-0.065em}
.more-d{grid-column:9/13;position:relative;z-index:1;display:grid;gap:0.6rem;font-size:0.9875rem;line-height:1.45}
.more-d .ml{display:flex;flex-wrap:wrap;gap:0.2rem 1rem;align-items:center}
.more-f{grid-column:6/10;grid-row:2;margin-top:1.4rem;z-index:2;rotate:-2deg}
.more-f img{box-shadow:0 1.2vw 2.4vw rgba(0,0,0,.22)}
.more-f-qw{grid-column:4/10;rotate:1.5deg}
.more-p{grid-column:10/12;grid-row:2;margin-top:-2rem;z-index:3;rotate:-3deg}
.more-p .phone{max-width:11rem;outline:5px solid var(--pf)}
.more-f-vd{grid-column:2/8;rotate:-1deg}

/* ---------- experiments: the wild room. The field changes colour as you move through it, posters are pinned
   at odd angles and scales, straighten when you touch them, and films play in the pile ---------- */
.exp{padding-block:clamp(4rem,3rem + 5vw,8rem) clamp(4rem,3rem + 6vw,9rem);color:var(--creme)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  :root:not(.still) .exp{animation:exp-field linear both;animation-timeline:view();animation-range:contain 0% contain 100%}
}}
@keyframes exp-field{0%{background-color:var(--slate)}30%{background-color:var(--p-violet)}60%{background-color:var(--p-moss)}100%{background-color:var(--p-rasp)}}
.exp .ml{color:var(--pink)}
.exp-s1{left:-22vw;top:24%;--z:0;opacity:.95}
.exp-s2{right:-9vw;top:-6vw;--z:6}
.exp-s3{left:44%;top:58%;--z:6}
.exp-s4{left:-4vw;bottom:6%;--z:4}
.exp-run{position:relative;z-index:1;font:900 clamp(4rem,21vw,23rem)/0.78 var(--ff-black);letter-spacing:-0.07em;white-space:nowrap;color:var(--pink);margin-left:-2vw}
.exp-head{position:relative;z-index:7;margin-top:clamp(1rem,2vw,2rem);align-items:baseline}
.exp-head .ml{grid-column:1/4}
.exp-note{grid-column:6/12;font:500 clamp(1.05rem,0.9rem + 0.4vw,1.3rem)/1.4 var(--ff-head)}
.exp-board{position:relative;z-index:5;height:114vw;margin-top:clamp(2rem,4vw,4rem)}
.ex{position:absolute;left:calc(var(--x) * 1vw);top:calc(var(--y) * 1vw);width:calc(var(--w) * 1vw);rotate:var(--rt,0deg);z-index:var(--zz,1);
  transition:rotate .5s var(--ease),scale .5s var(--ease),z-index 0s .25s;box-shadow:0 1.2vw 2.4vw rgba(0,0,0,.28)}
.ex:hover,.ex:focus-visible,.ex:focus-within{rotate:0deg;scale:1.05;z-index:30;transition:rotate .5s var(--ease),scale .5s var(--ease),z-index 0s}
.ex:focus-visible{outline:3px solid var(--acid);outline-offset:6px}
.ex img{width:100%}
.ex figcaption{position:absolute;left:0;top:100%;display:grid;justify-items:start;gap:0.2rem;margin-top:0.5rem;width:max-content;max-width:120%}
.ex figcaption > *{background:var(--slate);padding:0.18em 0.4em}
.ex-t{font:900 1.2rem/1 var(--ff-black);letter-spacing:-0.02em;word-spacing:0.12em}
.ex .phone{box-shadow:none}
.exp-board{height:84vw}
.ex-p1{--x:3;--y:2;--w:23;--rt:-3deg;--zz:3}
.ex-p2{--x:29;--y:7;--w:20;--rt:3deg;--zz:4}
.ex-tim{--x:53;--y:1;--w:11;--rt:-2deg;--zz:5}
.ex-kit{--x:67;--y:4;--w:21;--rt:2deg;--zz:3}
.ex-p4{--x:5;--y:45;--w:20;--rt:3deg;--zz:5}
.ex-p7{--x:29;--y:41;--w:22;--rt:-2deg;--zz:6}
.ex-fs{--x:55;--y:47;--w:11;--rt:3deg;--zz:7}
.ex-drift{--x:70;--y:43;--w:18;--rt:-4deg;--zz:5}
.exp-cats{grid-column:6/12;display:flex;flex-wrap:wrap;gap:0.3rem 1.4rem;margin-top:0.9rem}
.exp-cats span::before{content:"";display:inline-block;width:0.45rem;height:0.45rem;border-radius:50%;background:currentColor;margin-right:0.45rem;vertical-align:0.08em}
/* code: the one experiment that runs in the browser, shown as three of its sheets */
.exp-code{position:relative;z-index:7;margin-top:clamp(3rem,6vw,6rem);align-items:end;row-gap:1.2rem}
.exp-code-k{grid-column:1/-1}
.exp-code-row{grid-column:1/8;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.exp-code-row img{width:100%;height:auto;box-shadow:0 1.2vw 2.4vw rgba(0,0,0,.28);transition:translate .5s var(--ease)}
.exp-code-row:hover img:nth-child(2),.exp-code-row:focus-visible img:nth-child(2){translate:0 -0.8rem}
.exp-code-row:focus-visible{outline:3px solid var(--acid);outline-offset:6px}
.exp-code-d{grid-column:8/13;display:grid;gap:0.8rem;padding-bottom:0.4rem}
.exp-code-t{font:900 clamp(1.8rem,1rem + 2.4vw,3.4rem)/0.9 var(--ff-black);letter-spacing:-0.05em}
.exp-code-d p:not(.ml){font:500 1rem/1.45 var(--ff-head);max-width:46ch}
.ex-go{justify-self:start;display:inline-flex;align-items:center;min-height:2.75rem;font:700 0.9375rem/1 var(--ff-head)}
/* prints hang in thin oak frames, the way Wall of Art shows them */
.exf{padding:clamp(4px,0.5vw,9px);background:linear-gradient(135deg,#DDBB90 0%,#C89D6E 30%,#E2C29B 52%,#BD9163 78%,#D6B084 100%)}
.exf img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ex-tim .film-toggle,.ex-fs .film-toggle{justify-self:start;margin-top:0.3rem}

/* ---------- capabilities: three words the size of the screen; the lists sit in their gaps ---------- */
.cap{padding-block:clamp(5rem,4rem + 6vw,10rem) clamp(5rem,4rem + 6vw,9rem)}
/* the stamps print around the words, never under them: one falls in from above, one leaves into the estimator */
.cap-s1{right:-18vw;top:calc(min(46vw,42rem) * -0.62);--z:0;--s:min(46vw,42rem)!important}
.cap-s2{left:5vw;bottom:-3rem;--z:3;--s:min(16vw,14rem)!important}
.cap-s3{left:40vw;top:3%}
.cap-head{position:relative;z-index:2;align-items:baseline;margin-bottom:clamp(1.5rem,3vw,3rem)}
.cap-head .ml{grid-column:1/4}
.cap-note{grid-column:6/11;font:500 1.0625rem/1.4 var(--ff-head);justify-self:start;background:var(--pf);padding:0.3rem 0.5rem;margin-left:-0.5rem}
.cap-w{position:relative;z-index:1;padding-inline:var(--pad);border-top:2px solid var(--pg)}
/* K-W's rule: each word fills the sheet exactly, margin to margin (--fit is its width in ems, measured) */
.cap-word{color:var(--pg);font:900 calc((100vw - 2 * var(--pad)) / var(--fit))/0.8 var(--ff-black);letter-spacing:-0.045em;white-space:nowrap;margin-left:-0.045em;padding-block:0.07em 0.16em}
.cap-w2 .cap-word{text-align:left}
.cap-l{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:0.3rem 1.8rem;font:600 clamp(0.95rem,0.85rem + 0.3vw,1.2rem)/1.3 var(--ff-head);color:var(--pg);padding:0 0 clamp(1.2rem,2vw,2rem)}
.cap-l li{background:var(--pf);padding:0.1rem 0.4rem;margin-inline:-0.4rem}
.cap-l li::before{content:"";display:inline-block;width:0.5rem;height:0.5rem;border-radius:50%;background:currentColor;margin-right:0.55rem;vertical-align:0.1em}
.cap-w1 .cap-l,.cap-w3 .cap-l{justify-content:flex-end}

/* the estimator, printed: options as black-face lines with a ring that fills with the red star, the total in a
   slate card with a red bloom turning behind it */
.est{padding-block:clamp(4rem,3rem + 5vw,8rem) clamp(5rem,4rem + 6vw,9rem)}
.est-s1{right:26vw;top:calc(min(40vw,36rem) * -0.55);--z:3}
.build{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:2rem;padding-inline:var(--pad);align-items:start}
.build-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.build-t{grid-column:1/9;color:var(--pg);font:900 clamp(2.6rem,1rem + 6vw,7.5rem)/0.84 var(--ff-black);letter-spacing:-0.06em}
.build-note{grid-column:9/13;font-size:0.9375rem;line-height:1.45;position:relative;z-index:2;background:var(--pf);padding:0.4rem 0.6rem;margin:-0.4rem -0.6rem}
.opts{grid-column:1/8;display:grid;gap:2rem}
.opts fieldset{border:0;padding:0;margin:0;display:grid}
.opts legend{margin-bottom:0.4rem}
.opt{position:relative;display:grid;grid-template-columns:2.2rem 1fr auto;gap:0.9rem;align-items:center;padding-block:0.8rem;border-top:2px solid currentColor;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
/* the choice is the studio's own mark: a halo waiting, the red flower when chosen (the FAQ uses the same turn) */
.tick{width:2rem;height:2rem;fill:currentColor;overflow:visible;transition:rotate .6s var(--ease),scale .6s var(--ease)}
.tick use{transition:opacity .25s}
.tick .t1,.tick .t2{opacity:0}
.tick .t1{fill:var(--red)}.tick .t2{fill:var(--pf,var(--creme))}
.opt input:checked ~ .tick{rotate:150deg;scale:1.3}
.opt input:checked ~ .tick .t0{opacity:0}
.opt input:checked ~ .tick .t1,.opt input:checked ~ .tick .t2{opacity:1}
.opt:has(input:focus-visible){outline:3px solid var(--cobalt);outline-offset:3px}
.opt:hover .o-t{color:var(--red)}
.est .sum-in{background:var(--p-wine);color:var(--p-butter)}
.est .sum-in .ml{color:var(--p-blush)}
.o-t{font:900 clamp(1.3rem,0.9rem + 1.2vw,2.1rem)/1 var(--ff-black);letter-spacing:-0.04em;transition:color .2s}
.o-t small{display:block;font:500 0.875rem/1.4 var(--ff-head);letter-spacing:0;margin-top:0.35rem;max-width:48ch}
.o-p{font:800 0.8125rem/1.6 var(--ff-head);white-space:nowrap;text-transform:uppercase;letter-spacing:0.02em}
.sum{grid-column:8/13;position:sticky;top:4rem}
.sum-mk{width:150%;left:auto;right:-38%;top:-34%;--z:0;rotate:var(--turn,0deg);transition:rotate .9s var(--ease)}
.sum-in{position:relative;z-index:1;padding:clamp(1.3rem,2vw,2rem);background:var(--slate);color:var(--creme)}
.sum-in .ml{color:var(--pink)}
.sum-n output{display:block;font:900 clamp(3rem,2rem + 4vw,6.4rem)/0.9 var(--ff-black);letter-spacing:-0.06em;margin-top:0.5rem}
.sum-l{margin-top:1rem;display:grid;gap:0.35rem;font-size:0.875rem}
.sum-l li{display:flex;justify-content:space-between;gap:1rem}
.sum-empty{opacity:.78}
.sum-cta{display:flex;flex-wrap:wrap;gap:0.4rem 1.2rem;margin-top:1rem;font:800 0.9375rem/1 var(--ff-head)}
.sum-cta .lk{display:inline-flex;align-items:center;min-height:2.75rem}
.sum-note{position:relative;z-index:1;margin-top:0.8rem;font-size:0.8125rem;line-height:1.45;background:var(--pf);padding:0.3rem 0.5rem;margin-left:-0.5rem;width:fit-content;max-width:100%}
.sum-mini{display:none}

/* ---------- process: four words on a 2 x 2 sheet, each fitted to its cell, each doing what it says:
   CALL two marks are connected by a line; SCOPE a frame opens out to the word's edges; MAKE the letters assemble;
   LAUNCH the red star lets go as the sheet leaves (base.css, the m-* primitives) ---------- */
.proc{--cw:calc((100vw - 2 * var(--pad) - var(--gut)) / 2);padding-block:clamp(4rem,3rem + 4vw,7rem)}
.proc-k{position:relative;z-index:2;padding-inline:var(--pad);margin-bottom:clamp(1.5rem,3vw,3rem)}
.proc-l{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(3rem,5vw,6rem);padding-inline:var(--pad)}
.proc-i{position:relative;display:grid;align-content:start;row-gap:0.8rem;border-top:2px solid var(--pg);padding-top:0.9rem}
.proc-i > .ml{position:relative;z-index:2}
.proc-w{position:relative;z-index:1;color:var(--pg);font:900 calc(var(--cw) / var(--fit))/0.78 var(--ff-black);letter-spacing:-0.045em;white-space:nowrap;margin-left:-0.045em;padding-block:0.06em 0.12em}
.proc-i p{position:relative;z-index:3;font:600 clamp(1.05rem,0.9rem + 0.4vw,1.35rem)/1.3 var(--ff-head);max-width:26ch;background:var(--pg);color:var(--pf);padding:0.8rem 1rem;justify-self:start}
/* CALL */
.proc-art{position:absolute;inset:0.2rem 0 auto auto;width:48%;height:clamp(4rem,7vw,7rem);z-index:2}
.proc-a{left:0;top:0}.proc-b{right:0;top:0}
.proc-link{position:absolute;left:12%;right:12%;top:40%;width:76%;height:40%;overflow:visible}
.proc-link path{fill:none;stroke:var(--pg);stroke-width:3px;vector-effect:non-scaling-stroke}
/* SCOPE */
.proc-wrap{position:relative;justify-self:start}
.proc-frame{position:absolute;inset:-0.2rem -0.6rem;pointer-events:none}
.proc-frame i{position:absolute;width:clamp(1.2rem,2.4vw,2.4rem);height:clamp(1.2rem,2.4vw,2.4rem);border:3px solid var(--p-acid)}
.proc-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.proc-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.proc-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.proc-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
/* MAKE */
.proc-make .pc{display:inline-block}
/* LAUNCH */
.proc-go{right:4%;top:-1.5rem;--z:2}

/* ---------- studio + questions ---------- */
.studio{padding-block:clamp(5rem,4rem + 6vw,10rem)}
.studio-s1{right:-8vw;top:4%;--z:0}
.studio-s2{left:44%;top:2%;--z:2}
.studio-top{position:relative;z-index:1;row-gap:1.6rem;align-items:start}
.studio-top > .ml{grid-column:1/-1}
.studio-big{grid-column:1/11;color:var(--pg);font:900 clamp(2.8rem,1rem + 7vw,9rem)/0.86 var(--ff-black);letter-spacing:-0.06em;text-wrap:balance}
.studio-for{grid-column:1/7;font:500 clamp(1.3rem,1rem + 1.1vw,2.1rem)/1.15 var(--ff-head);letter-spacing:-0.025em;text-wrap:balance}
.facts{grid-column:1/10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem var(--gut)}
.facts > div{border-top:2px solid currentColor;padding-top:0.6rem}
.facts .lk{display:inline-flex;align-items:center;min-height:2.75rem;margin-block:-0.6rem}
.facts dd{margin:0.2rem 0 0;font:600 1.05rem/1.35 var(--ff-head)}
.qa-wrap{position:relative;z-index:1;margin-top:clamp(5rem,4rem + 5vw,9rem);padding-inline:var(--pad)}
.qa-k{margin-bottom:1rem}
.qa details{border-top:2px solid currentColor}
.qa details:last-child{border-bottom:2px solid currentColor}
.qa summary{position:relative;list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:clamp(4.2rem,7vw,7rem);padding-block:0.6rem}
.qa summary::-webkit-details-marker{display:none}
.q{color:var(--pg);font:900 clamp(1.6rem,0.8rem + 3.2vw,4.2rem)/0.95 var(--ff-black);letter-spacing:-0.05em;transition:color .25s,translate .5s var(--ease)}
.qa summary:hover .q{color:var(--p-wine)}
.qa details[open] .q{translate:1.2vw 0}
.qa-mk{position:relative;flex:none;--z:1;transition:rotate .7s var(--ease),scale .7s var(--ease)}
.qa-mk .u2{opacity:0;transition:opacity .3s}
.qa-mk .u2:not(.ctr){fill:var(--red)}
.qa details[open] .qa-mk{rotate:150deg;scale:1.5}
.qa details[open] .qa-mk .u1{opacity:0}
.qa details[open] .qa-mk .u2{opacity:1}
.qa details p{margin:0 0 1.4rem;padding:1.1rem 1.3rem;max-width:60ch;background:var(--p-choc);color:var(--p-rose);font:500 1.0625rem/1.5 var(--ff-head);transform-origin:0 0}
.qa details p .lk{overflow-wrap:anywhere}
.qa details[open] p{animation:qa-open .55s var(--ease)}
@keyframes qa-open{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.qa summary:focus-visible{outline:3px solid var(--cobalt);outline-offset:4px}

/* ---------- contact: the final poster. The red star, white centre, assembles as you arrive ---------- */
.contact{padding-top:clamp(5rem,4rem + 6vw,10rem)}
.ct-star{left:50%;top:-4vw;margin-left:calc(min(96vw,86rem) * -0.5);--z:0}
.ct-s2{right:4vw;top:44%;--z:1}
.ct-s3{left:3vw;top:62%;--z:1}
.ct-top{position:relative;z-index:2;align-items:end;row-gap:2rem}
.ct-k{grid-column:1/-1}
.ct-t{grid-column:1/-1;font:900 clamp(4rem,17vw,19rem)/0.78 var(--ff-black);letter-spacing:-0.07em;margin-left:-0.04em}
.ct-t span{display:block}
.ct-t span + span{margin-left:12vw}
.ct-links{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(2rem,4vw,4rem);padding-top:1rem;border-top:2px solid var(--creme)}
.ct-links li{display:flex;flex-direction:column;align-items:flex-start;gap:0.2rem}
.ct-links a,.ct-links button{font:900 clamp(1.3rem,0.9rem + 1.3vw,2.4rem)/1.05 var(--ff-black);letter-spacing:-0.035em}
.ct-links .ct-copy{font:700 0.8125rem/1 var(--ff-head);min-height:2.75rem;letter-spacing:0}
.ct-form{position:relative;z-index:2;margin-top:clamp(5rem,4rem + 5vw,8rem);align-items:start}
.ct-lede{grid-column:1/4;font:500 1.125rem/1.35 var(--ff-head)}
.brief,.brief-done{grid-column:5/13;padding:clamp(1.2rem,2vw,2rem);background:color-mix(in srgb,var(--oxblood) 88%,black)}
.hp{position:absolute;left:-9999px}
.chips{border:0;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:0.5rem}
.chips legend{width:100%;margin-bottom:0.6rem;font:700 0.6875rem/1.2 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase}
.chips legend small{font-weight:500;text-transform:none;letter-spacing:0;opacity:.85;margin-left:0.4rem;font-size:0.75rem}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;border:2px solid color-mix(in srgb,var(--creme) 60%,transparent);font:700 0.875rem/1 var(--ff-head);cursor:pointer;transition:background-color .2s,color .2s}
.chip input:checked+span{background:var(--creme);color:var(--oxblood);border-color:var(--creme)}
.chip span::before{content:"";width:0;height:0.95rem;margin-right:0;background:var(--red);-webkit-mask:url("/media/mask-bloom.svg") center/contain no-repeat;mask:url("/media/mask-bloom.svg") center/contain no-repeat;transition:width .25s var(--ease),margin .25s var(--ease)}
.chip input:checked+span::before{width:0.95rem;margin-right:0.45rem}
.chip input:focus-visible+span{outline:2px solid var(--creme);outline-offset:3px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem var(--gut);margin-top:0.6rem}
.fld{display:grid;gap:0.35rem}
.fld.full{grid-column:1/-1}
.fld span{font:700 0.6875rem/1.2 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase}
.fld em{font-style:normal;font-weight:500;text-transform:none;opacity:.85}
.fld input,.fld textarea{font:500 1.0625rem/1.4 var(--ff-head);color:inherit;background:transparent;border:0;border-bottom:2px solid color-mix(in srgb,var(--creme) 60%,transparent);padding:0.6rem 0;border-radius:0;min-height:2.75rem}
.fld input:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--creme);box-shadow:0 2px 0 var(--creme)}
.fld input::placeholder{color:color-mix(in srgb,var(--creme) 55%,transparent)}
.form-err{margin-top:1rem;padding:0.8rem 1rem;background:var(--creme);color:var(--oxblood);font-weight:600}
.form-err a{text-decoration:underline}
.brief-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2rem}
.send{min-height:3.4rem;padding:0 2.2rem;border:0;background:var(--red);color:var(--creme);font:900 1.25rem/1 var(--ff-black);letter-spacing:-0.02em;cursor:pointer;transition:background-color .2s,color .2s}
.send:hover{background:var(--creme);color:var(--oxblood)}
.send.busy{opacity:.78}
.contact-note{font-size:0.8125rem}
.contact-note a{text-decoration:underline}
.done-t{font:900 clamp(2rem,1.5rem + 2vw,3.2rem)/0.95 var(--ff-black);letter-spacing:-0.04em;margin:0.6rem 0 1rem}
.brief-done a{text-decoration:underline}
.ct-foot{position:relative;z-index:2;margin-top:clamp(5rem,4rem + 6vw,9rem);border-top:1px solid color-mix(in srgb,var(--creme) 30%,transparent)}
.contact :focus-visible{outline-color:var(--creme)}

/* ---------- tablets ---------- */
@media (min-width:760px) and (max-width:1100px){
  .wc-card{grid-column:1/7}.wc-live{grid-column:7/13;margin-top:2rem}
  .ov-info{grid-column:1/6}.ov-room{grid-column:6/13}.ov-opt{display:none}
  .og-info{grid-column:6/13}
  .more-t{grid-column:2/-1}.more-d{grid-column:2/9;grid-row:2;margin-top:1rem}.more-f{grid-column:9/13;grid-row:2}
  .exp-note{grid-column:5/13}
  .opts{grid-column:1/-1}.sum{grid-column:1/-1;position:relative;top:0;max-width:30rem}
  .facts{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.studio-for{grid-column:1/-1}
  .more-f-qw,.more-f-vd{grid-column:2/9;grid-row:3;margin-top:1.4rem}.more-p{grid-column:9/12;grid-row:3;margin-top:2rem}
  .exp-code-row{grid-column:1/-1}.exp-code-d{grid-column:1/10}
  .sum-mini{display:flex}
}

/* ---------- phones: fewer elements, bigger ---------- */
@media (max-width:759px){
  .stp.dsk{display:none}
  .pj-head > :nth-child(2){grid-column:2/5}.pj-head > :nth-child(3){grid-column:1/-1;grid-row:2;justify-self:start}
  .wi-star{left:auto;right:-22vw;top:-6vw;--s:70vw!important}
  .wi .stp.m-spin{left:62%;top:8%}
  .wi-run{font-size:24vw}
  .wi-meta > :nth-child(n){grid-column:auto / span 3}.wi-meta > :nth-child(4){justify-self:start}
  .pj-giant{font-size:27vw}
  .wc-stage{margin-top:-4vw;row-gap:1.4rem}
  .wc-plate{grid-column:1/-1;margin-inline:calc(var(--pad) * -1)}
  .wc-reel{display:none}
  .wc-card{grid-column:1/-1;grid-row:auto;margin-top:0}
  .wc-live{grid-column:1/-1;grid-row:auto;margin-top:0.6rem}
  .wc-live .wc-cv{aspect-ratio:4/5}
  .wc-bag{grid-column:1/5;grid-row:auto;margin-top:1rem}
  .wc-merch{grid-column:2/-1;grid-row:auto;margin-top:-10vw;margin-right:calc(var(--pad) * -1)}
  .ov-cross{--s:84vw!important;left:-30vw;top:-4vw}
  .ov-giant{font-size:44vw}
  .ov-take{margin-top:-18vw}
  .ov-take .cap-d{display:none}.ov-take .cap-m{display:block;grid-column:1/5}
  .ov-frame{aspect-ratio:9/16;margin-inline:auto;width:86vw}
  .ov-take .film-toggle{grid-column:5/7}
  .ov-seq{row-gap:1.4rem}
  .ov-pairs{grid-column:1/-1;margin-inline:calc(var(--pad) * -1);outline:0}
  .ov-quiz{grid-column:1/4;grid-row:2;margin-top:0}
  .ov-opt{grid-column:4/-1;grid-row:2;margin-top:12vw}
  .ov-opt .phone{margin-left:0}.ov-opt figcaption{text-align:left}
  .ov-room{grid-column:1/-1;grid-row:3;margin-top:1rem;margin-inline:calc(var(--pad) * -1);outline:0}
  .ov-info{grid-column:1/-1;grid-row:4;margin-top:1.4rem}
  .stmt-t{font-size:12.4vw}
  .stmt-b1{--s:110vw!important;left:10vw;top:22%}
  .stmt-b2{--s:28vw!important;right:4vw;bottom:8%}
  .og-f{--s:62vw!important;right:-24vw;top:-10vw}
  .og-giant{font-size:19vw}.og-giant span + span{margin-left:12vw}
  .og-lake{margin-top:-4vw}.og-lake figcaption{flex-direction:column;padding-inline:var(--pad)}
  .og-desk{grid-column:1/-1;margin-right:calc(var(--pad) * -1)}
  .og-phone{grid-column:4/-1;grid-row:2;margin-top:-18vw}
  .og-trio{grid-column:1/-1;grid-row:3;margin-top:1.4rem;margin-inline:calc(var(--pad) * -1)}
  .og-class{grid-column:1/5;grid-row:2;margin-top:1.4rem}
  .og-info{grid-column:1/-1;grid-row:4;margin-top:2rem}
  .more-i{grid-template-columns:repeat(6,minmax(0,1fr))}
  .more-t{grid-column:2/-1;font-size:15vw}
  .more-d{grid-column:2/-1;margin-top:1rem}
  .more-f,.more-f-qw,.more-f-vd{grid-column:2/-1;grid-row:auto;rotate:0deg}
  .more-p{display:none}
  .exp-s1{--s:150vw!important;left:-50vw;top:18%}
  .exp-s2{--s:52vw!important;right:-18vw}
  .exp-s4{--s:44vw!important}
  .exp-run{font-size:26vw}
  .exp-head .ml,.exp-note{grid-column:1/-1}.exp-note{margin-top:0.6rem}
  .exp-cats{grid-column:1/-1}
  .exp-board{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16vw 6vw;padding:0 var(--pad) 4rem}
  .exp-code-row,.exp-code-d{grid-column:1/-1}
  .ex{position:relative;left:auto;top:auto;width:auto}
  .ex figcaption{position:static;width:auto;max-width:none}
  .ex-kit{grid-column:1/-1;width:86%}
  .ex:nth-child(even){margin-top:14vw}
  .cap-head .ml,.cap-note{grid-column:1/-1}.cap-note{margin-top:0.6rem}
  .cap-l{display:grid;gap:0.2rem;padding-top:0.4rem}
  .cap-w1 .cap-l,.cap-w3 .cap-l{justify-content:start}
  .cap-s1{--s:70vw!important;right:-34vw;top:-18vw}
  .cap-s2{--s:30vw!important;left:-6vw;bottom:-10vw}
  .build-head{display:block}.build-t{font-size:13vw}.build-note{margin-top:1rem}
  .opts,.sum{grid-column:1/-1}.sum{position:relative;top:0}
  .sum-mk{width:110%;right:-30%;top:-20%}
  .o-t{font-size:1.35rem}
  .proc{--cw:calc(100vw - 2 * var(--pad))}
  .proc-l{grid-template-columns:1fr;row-gap:3rem}
  .proc-art{width:56%}
  .studio-s1{--s:70vw!important;right:-40vw;top:-6vw;bottom:auto}
  .studio-big{grid-column:1/-1;font-size:13vw}
  .studio-for,.facts{grid-column:1/-1}
  .facts{grid-template-columns:1fr 1fr}
  .sum-mini{display:flex}
  .q{font-size:7.4vw}
  .qa-mk{--s:2.6rem!important}
  .ct-star{--s:160vw!important;margin-left:-80vw;top:4vw}
  .ct-t{font-size:22vw}.ct-t span + span{margin-left:6vw}
  .ct-links{grid-template-columns:1fr}
  .ct-lede,.brief,.brief-done{grid-column:1/-1}.ct-lede{margin-bottom:2rem}
  .fields{grid-template-columns:1fr}
}

/* ---------- the estimate, on a phone or tablet: the total rides along the bottom of the screen while you choose ---------- */
@media (max-width:1100px){
  .sum-mini{position:sticky;bottom:0;z-index:5;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 calc(var(--pad) * -1);padding:0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom));background:var(--p-wine);color:var(--p-butter)}
  .sum-mini .ml{color:var(--p-blush)}
  .sum-mini-n{font:900 1.6rem/1 var(--ff-black);letter-spacing:-0.04em}
}

/* hero call to action and entry sprint (approved 2026-10-17) */
.pp-venue{gap:0.45rem;max-width:min(30rem,46vw)}
.pp-venue .pp-offer{width:auto;max-width:26rem;font:500 0.95rem/1.35 var(--ff-text);text-wrap:balance}
.pp-venue a.pp-cta{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.5rem;margin-top:0.35rem;background:var(--slate);color:var(--creme);text-decoration:none;font:900 1.15rem/1 var(--ff-black);letter-spacing:-0.025em;transition:background-color .2s}
.pp-venue a.pp-cta:hover{background:var(--red)}
.pp-venue .pp-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:0 0.9rem;font:600 0.8rem/1.2 var(--ff-head);background:none;padding:0;margin:0;width:auto}
.pp-venue .pp-sub>*{background:var(--creme);padding:0.12em 0.3em}
.pp-venue .pp-sub>span{align-self:center}
.pp-venue .pp-sub a{display:inline-flex;align-items:center;min-height:44px;padding:0 0.3em;background:linear-gradient(var(--creme),var(--creme)) center/100% 1.5em no-repeat}
@media (max-aspect-ratio:1/1){.pp-venue{max-width:calc(100vw - 2*var(--pad))}.pp-venue .pp-offer{font-size:0.85rem}.pp-venue .pp-sub{justify-content:flex-end}.pp-venue a.pp-cta{min-height:2.9rem}}
.sprint{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;margin-bottom:clamp(3rem,2rem + 4vw,6rem);padding:clamp(1.5rem,1rem + 2vw,2.5rem);border:2px solid var(--p-wine);color:var(--p-wine);position:relative;z-index:2}
.sp-a{grid-column:1/5}.sp-b{grid-column:5/10;font:500 1rem/1.45 var(--ff-text)}.sp-b p+p{margin-top:0.7rem}
.sp-c{grid-column:10/13;display:grid;justify-items:end;text-align:right;gap:0.3rem}
.sp-t{font:900 clamp(2.2rem,1rem + 3.4vw,4.4rem)/0.88 var(--ff-black);letter-spacing:-0.055em;margin-top:0.6rem}
.sp-p{font:900 clamp(2.6rem,1.4rem + 3.6vw,5rem)/0.85 var(--ff-black);letter-spacing:-0.06em}
.sp-d{font:700 0.85rem/1.2 var(--ff-head);text-transform:uppercase;letter-spacing:0.03em}
.sp-go{display:inline-flex;align-items:center;min-height:3rem;padding:0 1.4rem;margin-top:0.5rem;background:var(--p-wine);color:var(--creme);font:900 1.1rem/1 var(--ff-black);letter-spacing:-0.02em;text-decoration:none}
.sp-go:hover{background:var(--red)}
@media (max-width:900px){.sprint{display:block}.sp-b{margin:1rem 0}.sp-c{justify-items:start;text-align:left}}