/* NMS painted studio: the readable app sits inside a street-poster identity. */
:root{--paper:#191a18;--ink:#f4f0e7;--muted:#bfbfb2;--line:#494b41;--orange:#d5ff35;--wash:#23251f;--white:#f0ede2;--pink:#ff3991;--black:#191a18;--acid:#d5ff35;--display:Impact,'Arial Black',Arial,sans-serif}
body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.09' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
.site-header{border-bottom:1px solid #ffffff29;padding-top:22px;padding-bottom:22px;position:relative}
.wordmark{font-family:var(--display);font-size:47px;font-style:italic;letter-spacing:-2px;transform:rotate(-5deg);text-transform:uppercase}.wordmark small{font-family:Arial,sans-serif;letter-spacing:1.3px;font-size:8px;font-style:normal;margin-top:10px}.brand-dot{color:var(--pink)}
.site-header nav{gap:30px}.site-header nav a{font-size:11px;letter-spacing:.8px;text-transform:uppercase;font-weight:700}.site-header nav a:hover{color:var(--acid)}
.header-cta{border:2px solid var(--acid);background:var(--acid);color:var(--black);border-radius:0;box-shadow:4px 4px 0 #f3efe5;font-weight:800;text-transform:uppercase;font-size:11px;transform:rotate(1deg)}.header-cta:hover{color:var(--black);background:#e4ff80}
.hero{grid-template-columns:.88fr 1.12fr;gap:7%;padding:40px 0 64px;position:relative;isolation:isolate}
.hero:before{content:'';position:absolute;left:-3%;top:11%;width:51%;height:75%;z-index:-1;opacity:.3;background:radial-gradient(ellipse at 35% 40%,#ff39914a 0%,transparent 60%);transform:rotate(-13deg);pointer-events:none}
.eyebrow{font-family:'Courier New',monospace;font-size:11px;letter-spacing:1.5px;font-weight:700}.hero-copy>.eyebrow{display:inline-block;background:var(--acid);color:var(--black);padding:7px 12px;transform:rotate(-2deg);margin-bottom:13px}.hero-copy>.eyebrow .dot{display:none}
h1{margin:0 0 14px;line-height:1;letter-spacing:0}.graffiti-title{display:block;max-height:365px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(4px 7px 0 #0004);transform:rotate(-3deg);transform-origin:center}
.hero-description{font-size:14px;line-height:1.65;max-width:350px;color:#dadace;margin:20px 0 20px}
.primary{border:2px solid var(--black);border-radius:0;color:var(--black);background:var(--acid);box-shadow:5px 5px 0 var(--pink);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.35px;padding:15px 21px;min-height:49px;transition:transform .15s,box-shadow .15s}.primary:hover{background:#e4ff85;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pink)}
.hero .primary{max-width:300px}.quiet-link{font-family:'Courier New',monospace;color:#eeece4;font-size:11px;text-underline-offset:5px;margin-top:22px}.hero-footnote{display:none}
.hero-work{--ink:#171913;--muted:#53564a;--line:#b7baa9;position:relative;isolation:isolate;background:#eae9dc;color:var(--ink);border:0;border-radius:0;padding:25px 25px 20px;box-shadow:12px 14px 0 #0005;transform:rotate(1deg)}
.hero-work:before{content:'';position:absolute;inset:-15px -18px;z-index:-1;background:#eae9dc;border:7px solid var(--pink);clip-path:polygon(2% 8%,95% 0,100% 10%,97% 34%,100% 87%,95% 98%,12% 96%,0 100%,3% 70%,0 18%);transform:rotate(-3deg);pointer-events:none}
.hero-work:after{content:'';position:absolute;left:35%;top:-14px;width:112px;height:31px;background:#d5ff35d9;transform:rotate(-5deg);box-shadow:0 1px 2px #0002;pointer-events:none}
.work-heading{margin-bottom:22px}.work-heading .eyebrow{font-size:10px}.tag{border:1px solid currentColor;border-radius:0;font-family:'Courier New',monospace;font-weight:700;font-size:9px;padding:6px 8px}
.hero-comparison{gap:18px}.hero-comparison figure:first-child{transform:rotate(-2deg)}.hero-comparison figure:last-child{transform:rotate(1deg)}
.hero-comparison img{box-shadow:3px 5px 0 #17191335;border:5px solid #f8f5ec}.hero-comparison figcaption{font-family:'Courier New',monospace;text-transform:uppercase;font-size:10px;font-weight:700}
.hero-comparison .refined figcaption{color:var(--black)}.hero-comparison .refined .dot{background:var(--pink)}
.showcase-options{gap:7px;margin-top:23px}.showcase-options button{border-radius:0;border:1px solid var(--black);font-weight:700;background:#f6f3e8;color:var(--black);padding:10px 7px;font-size:10px;text-transform:uppercase}.showcase-options button[aria-pressed=true]{background:var(--black);border-color:var(--black);color:var(--acid);box-shadow:3px 3px 0 var(--pink)}.showcase-options button:hover{border-color:#bd155e}
.hero-work .example-note{font-size:10px;color:#56594c}
.paint-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--acid);color:var(--black);font-family:var(--display);font-size:clamp(17px,2.5vw,32px);font-style:italic;text-transform:uppercase;padding:15px 25px;margin:0 -1% 60px;transform:rotate(-1.5deg);box-shadow:0 5px 0 var(--black),0 7px 0 #ffffff50;position:relative;z-index:1}.paint-strip b{font-family:Arial,sans-serif;font-size:18px;font-style:normal;color:#8b1165}.paint-strip span{white-space:nowrap}
.section-heading h2{font-family:var(--display);font-size:clamp(43px,4.5vw,68px);font-weight:900;letter-spacing:-.8px;line-height:.98;text-transform:uppercase}.section-heading h2 em{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.8px;color:var(--acid)}.section-heading>.eyebrow{color:var(--acid)}.section-heading>p,.studio-intro{font-size:13px}
.variation-section,.library{--ink:#20211c;--muted:#55584c;--line:#b9bcae;background:#eeece1;color:var(--ink);margin:0 -5.56%;padding:64px 5.56%;border:0;position:relative}
.variation-section:before,.library:before{content:'';position:absolute;height:14px;top:-10px;left:0;right:0;background:#eeece1;clip-path:polygon(0 65%,3% 30%,7% 60%,11% 0,16% 70%,23% 30%,29% 80%,35% 20%,42% 70%,48% 0,55% 55%,61% 20%,67% 85%,74% 30%,80% 65%,86% 0,92% 80%,97% 20%,100% 60%,100% 100%,0 100%);pointer-events:none}
.variation-section .section-heading h2 em,.library .section-heading h2 em{color:#b51360}.variation-section .eyebrow,.library .eyebrow{background:#1d1f1a;color:#f0efe5;display:inline-block;padding:6px 9px;transform:rotate(-1.5deg)}
.campaign-grid{gap:30px;margin:45px 0 25px}.campaign{position:relative;background:#f8f5eb;padding:10px 10px 18px;border:1px solid #bebfb1;box-shadow:5px 7px 0 #23251c26;transform:rotate(-1deg)}.campaign:nth-child(2){transform:rotate(1.5deg)}.campaign:nth-child(3){transform:rotate(-1deg)}
.campaign:before{content:'';position:absolute;width:88px;height:25px;left:calc(50% - 44px);top:-14px;background:#d5ff35d6;transform:rotate(-6deg);z-index:2;pointer-events:none}.campaign:nth-child(2):before{background:#ff3991b8;transform:rotate(4deg)}
.campaign>div{padding:17px 9px 0}.campaign h3{font-family:var(--display);font-size:23px;font-weight:900;text-transform:uppercase;letter-spacing:0}.campaign p{font-size:12px}.campaign div>a{border-bottom:2px solid #23251c;color:#23251c;font-family:'Courier New',monospace;font-weight:700}.campaign>a:hover img{transform:scale(1.01)}
.studio-section{border-top:0;padding:72px 0 60px;position:relative}.studio-section .eyebrow{color:var(--pink)}.studio-section .balance{color:#e9eadf}.studio-section .balance .dot{background:var(--pink)}
.workspace{--ink:#24261f;--muted:#59604e;--line:#c0c5b3;--orange:#4c6710;color:var(--ink);border:2px solid #b6bf9d;border-radius:0;background:#f4f2e8;box-shadow:8px 8px 0 #d5ff3524}.controls{border-right:1px solid #b9c0a9;background:#f4f2e8}.controls>h3{font-family:var(--display);font-size:24px;text-transform:uppercase}.dropzone{border:2px dashed #798866;border-radius:0;background:#e6ebd7}.dropzone.drag{background:#d5ff3588}.upload-icon{border-radius:0;border:1px solid #798866;background:var(--acid);color:var(--black);transform:rotate(-5deg)}
input:not([type=file]),select,textarea{border-radius:0;background:#fffdf5;color:#1c2016;border-color:#aeb69e}.stage{background:#dce2cd}.stage-top{font-family:'Courier New',monospace;text-transform:uppercase;font-size:11px;color:#454e36}.comparison figcaption{font-family:'Courier New',monospace}.controls .primary{color:var(--black);font-size:11px}.result-actions button{border-radius:0;border:1px solid #5a6842;background:#f6f3e8;color:#23291a;font-weight:700}.result-actions button:hover:enabled{background:#23291a;color:var(--acid)}.recipe{border-color:#a9b796}.recipe summary{color:#4d5a3e}.processing{background:#e9edddf5}.variant.active{border-color:#343d24}
.pricing{border-top:1px solid #505543;padding-top:65px}.pricing .eyebrow{color:var(--pink)}.price-card{color:#efeee4;background:#252720;border:1px solid #65694f;border-radius:0;padding:25px 17px 21px;box-shadow:4px 4px 0 #0004}.price-card h3{font-family:'Courier New',monospace;font-size:11px;font-weight:700;text-transform:uppercase}.price-card strong{font-family:var(--display);font-size:47px;font-weight:900}.price-card button{border-radius:0;border:1px solid #929b75;color:#f2f1e4;font-family:'Courier New',monospace;font-size:11px;font-weight:700}.price-card.featured{background:var(--acid);border-color:var(--acid);color:#21271a;transform:rotate(2deg);box-shadow:6px 6px 0 var(--pink)}.price-card.featured button{color:#21271a;border-color:#21271a}.price-card.featured .discount{color:#21271a;font-family:'Courier New',monospace;font-weight:700}.pricing-note{color:#c5c7ba}.pricing-note strong{color:var(--acid)}#checkout-status{color:#b9bdac}
.principles{padding-bottom:70px}.principles>div{border-top:2px solid #606749}.principles .eyebrow{color:var(--pink)}.principles h3{font-family:var(--display);text-transform:uppercase;font-size:29px;font-weight:900;letter-spacing:.3px}.principles p:last-child{color:#bfc3b1}
.library-tools input{border-radius:0;border:1px solid #6c765b;background:#faf7eb;color:#23291a}.library-tools span{color:#59604e;font-family:'Courier New',monospace}.reference-grid{gap:0 30px}.reference{border-top:2px solid #b9bca9}.reference .category{font-family:'Courier New',monospace;color:#ac1358;font-weight:700}.reference h3{font-family:var(--display);font-size:27px;letter-spacing:.3px;text-transform:uppercase;font-weight:900}.reference a{font-family:'Courier New',monospace;font-weight:700;color:#303728}.swatches span{border-radius:0;width:30px;height:11px}
footer{background:#10110f;color:#f0ede3;border-top:7px solid var(--acid);padding-top:42px;padding-bottom:42px}footer .wordmark{font-size:68px}footer .brand-dot{color:var(--pink)}footer p{color:#babfae}footer>a{color:var(--acid);border-color:var(--acid);font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase}
@media(min-width:1500px){.graffiti-title{max-height:420px}.hero{padding-top:48px;padding-bottom:72px}}
@media(max-width:1100px){.hero{grid-template-columns:.86fr 1.14fr;gap:5%}.hero-work{padding:22px 18px}.graffiti-title{max-height:345px}.hero-comparison{gap:10px}.hero-work:before{inset:-10px}.hero .eyebrow{font-size:9px}.hero-description{font-size:13px}.paint-strip{font-size:24px}.section-heading h2{font-size:50px}.campaign-grid{gap:22px}.site-header nav{gap:20px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:40px;padding-top:30px;padding-bottom:55px}.hero-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:center}.hero-copy>.eyebrow{grid-column:1/-1;justify-self:start}.hero-copy h1{grid-row:2/5;grid-column:1}.hero-description{grid-column:2;margin:0 0 18px;font-size:14px}.hero .primary{grid-column:2;margin:0;align-self:start;font-size:11px}.quiet-link{grid-column:2;margin-top:20px}.graffiti-title{max-height:355px}.hero-work{max-width:660px;justify-self:center;width:100%;padding:25px}.hero-work:before{inset:-12px}.hero-comparison{gap:20px}.paint-strip{margin-bottom:45px;font-size:21px;padding:14px 15px}.paint-strip b{font-size:14px}.section-heading h2{font-size:45px}.variation-section,.library{padding-top:50px;padding-bottom:50px}.studio-section{padding-top:55px}.controls{border-right:0}.campaign-grid{gap:16px}.campaign h3{font-size:21px}.campaign>div{padding-left:2px;padding-right:2px}.principles h3{font-size:24px}}
@media(max-width:550px){.site-header{padding-top:20px;padding-bottom:20px}.wordmark{font-size:38px}.site-header nav{gap:14px}.site-header nav a{font-size:9px;letter-spacing:.2px}.header-cta{font-size:9px;padding:10px;box-shadow:3px 3px 0 #ede9de;gap:8px}.hero-copy{display:block}.hero-copy>.eyebrow{font-size:9px;margin-bottom:15px}.hero-copy h1{margin-bottom:20px}.graffiti-title{height:auto;max-height:375px;max-width:90%;margin:0 auto}.hero-description{font-size:14px;max-width:100%;margin:15px 0 20px}.hero .primary{max-width:100%;width:100%;font-size:12px}.quiet-link{margin-top:22px}.hero-work{padding:22px 13px 15px;transform:rotate(.5deg)}.hero-work:before{inset:-9px -5px;transform:rotate(-2deg)}.hero-work:after{width:82px;height:24px;left:38%;top:-11px}.work-heading{gap:10px;margin-bottom:18px}.work-heading .eyebrow{font-size:9px}.tag{font-size:8px}.hero-comparison{gap:10px}.hero-comparison figcaption{font-size:8px}.hero-comparison img{border:3px solid #f8f5ec}.hero-comparison .refined figcaption>span:last-child{display:none}.showcase-options{gap:5px}.showcase-options button{font-size:8px;padding:10px 4px}.hero-work .example-note{font-size:9px}.paint-strip{font-size:17px;gap:9px;padding:13px 10px;margin-bottom:40px;flex-wrap:wrap;justify-content:center}.paint-strip span:last-child,.paint-strip b:last-of-type{display:none}.section-heading h2{font-size:43px}.section-heading>p{font-size:12px}.campaign-grid{gap:35px;margin-top:38px}.campaign{padding:10px 10px 18px}.campaign h3{font-size:26px}.campaign>div{padding:18px 10px 0}.controls{padding:23px 20px}.stage{padding:22px 13px}.workspace{box-shadow:5px 5px 0 #d5ff3524}.price-card{padding:23px 15px}.price-card strong{font-size:45px}.principles{padding-bottom:50px}.principles h3{font-size:27px}.reference h3{font-size:28px}footer .wordmark{font-size:55px}}
@media(prefers-reduced-motion:reduce){.primary{transition:none}.primary:hover{transform:none}}

/* Painted marks replace stickers, geometric buttons and stacked cards. */
.hero-work:after,.campaign:before{display:none}
.showcase-options button{position:relative;isolation:isolate;border:0;background:none;font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:.2px;padding:12px 7px;box-shadow:none}
.showcase-options button[aria-pressed=true]{background:none;box-shadow:none;color:var(--acid)}
.showcase-options button[aria-pressed=true]:before{content:'';position:absolute;inset:2px -2px;z-index:-1;background:var(--black);clip-path:polygon(4% 15%,91% 0,97% 15%,94% 34%,100% 39%,94% 89%,18% 100%,20% 89%,0 96%,5% 55%,0 51%)}
.showcase-options button:hover{color:#b51360}.showcase-options button[aria-pressed=true]:hover{color:var(--acid)}
.header-cta,.primary{position:relative;isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none;font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:.5px;transform:rotate(-2deg);min-height:58px;padding:17px 26px;font-size:21px;justify-content:center;gap:19px}
.header-cta:before,.primary:before{content:'';position:absolute;inset:0;z-index:-1;background-color:var(--acid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70'%3E%3Cg fill='%23191a18' opacity='.27'%3E%3Cpath d='M8 53l36-5-21 4-13 8zM243 9l44-3-13 5-32 1zM26 10l12-2-2 2zM270 51l17-2-6 3z'/%3E%3Ccircle cx='19' cy='33' r='1.4'/%3E%3Ccircle cx='279' cy='24' r='1'/%3E%3Ccircle cx='263' cy='57' r='.8'/%3E%3C/g%3E%3C/svg%3E");background-size:100% 100%;clip-path:polygon(7% 13%,28% 5%,27% 10%,72% 0,94% 8%,90% 17%,100% 18%,96% 36%,99% 43%,94% 69%,98% 76%,83% 88%,54% 91%,48% 100%,15% 93%,4% 100%,6% 78%,0 81%,4% 51%,1% 40%)}
.header-cta{font-size:19px;min-width:162px;min-height:64px;transform:rotate(3deg);padding:16px 25px}
.header-cta:before{clip-path:polygon(4% 28%,20% 12%,41% 16%,62% 2%,65% 11%,92% 5%,88% 22%,100% 32%,95% 52%,98% 66%,83% 83%,66% 80%,47% 96%,29% 89%,8% 98%,11% 78%,0 69%,5% 51%)}
.header-cta:hover,.primary:hover{background:transparent;box-shadow:none;transform:rotate(-1deg);color:var(--black)}
.header-cta:hover:before,.primary:hover:before{background-color:#e7ff86}
.header-cta>span,.primary>span{font-family:Arial,sans-serif;font-size:28px;line-height:1;transform:rotate(-12deg)}
.header-cta:focus-visible,.primary:focus-visible{outline:3px dashed var(--pink);outline-offset:6px}
.hero .primary{max-width:340px;font-size:24px;padding:19px 25px;min-height:70px}
.controls .primary{font-size:19px;padding:20px 18px;min-height:70px;gap:10px}
.hero-copy>.eyebrow{background:none;color:#f4f0e7;font-family:var(--display);font-size:20px;letter-spacing:.6px;font-style:italic;padding:0 0 8px;position:relative;transform:rotate(-4deg);margin-left:3px;margin-bottom:20px}
.hero-copy>.eyebrow:after{content:'';position:absolute;bottom:0;left:0;width:83%;height:5px;background:var(--pink);clip-path:polygon(0 45%,88% 0,100% 35%,75% 70%,12% 100%)}
.paint-strip{background:none;box-shadow:none;transform:none;margin:4px 0 60px;padding:22px 0 28px;border:0;color:#f4f0e7;gap:30px;justify-content:space-around}
.paint-strip span{position:relative;font-size:clamp(24px,3vw,40px);line-height:1.05;transform:rotate(-5deg);isolation:isolate}
.paint-strip span:after{content:'';position:absolute;left:-3%;right:0;bottom:-12px;height:6px;background:var(--acid);transform:rotate(2deg);clip-path:polygon(0 60%,95% 0,100% 40%,7% 100%)}
.paint-strip span:nth-of-type(2){color:var(--acid);transform:rotate(3deg)}
.paint-strip span:nth-of-type(2):after{background:var(--pink);left:15%;right:-6%;transform:rotate(-4deg)}
.paint-strip span:last-child{transform:rotate(-3deg)}
.paint-strip b{display:none}
.price-card{box-shadow:none}
.price-card.featured{background:#eeece1;color:#20211c;border:0;transform:rotate(-1deg);box-shadow:none;padding:28px 21px;clip-path:polygon(2% 3%,21% 1%,36% 4%,64% 0,84% 2%,98% 0,96% 20%,100% 39%,97% 65%,100% 83%,96% 98%,75% 96%,57% 100%,36% 97%,18% 100%,0 96%,3% 75%,0 55%,3% 32%)}
.price-card.featured .discount{font-family:var(--display);font-size:21px;font-style:italic;color:#b51360;transform:rotate(-5deg);margin:0 0 12px;letter-spacing:.4px}
.price-card.featured button{border:0;border-bottom:2px solid #20211c;padding-left:0;padding-right:0}
@media(max-width:800px){.header-cta{font-size:17px;min-width:143px;padding:15px 19px}.hero .primary{font-size:22px;gap:10px}.paint-strip{gap:20px}.paint-strip span{font-size:27px}}
@media(max-width:550px){.site-header{gap:10px}.site-header nav{gap:12px}.header-cta{font-size:14px;min-width:104px;min-height:63px;padding:13px 17px;gap:3px;line-height:1.05}.header-cta>span{font-size:22px}.hero-copy>.eyebrow{font-size:19px}.hero .primary{font-size:25px;max-width:100%}.paint-strip{gap:23px;margin-bottom:45px;padding:15px 0 24px}.paint-strip span{font-size:23px}.paint-strip span:last-child{display:none}.price-card.featured{padding:25px 16px}.controls .primary{font-size:21px}}
@media(prefers-reduced-motion:reduce){.primary:hover,.header-cta:hover{transform:none}}

/* A separate, differently cut paint pass gives the action marks depth. */
.header-cta:after,.primary:after{content:'';position:absolute;inset:5px -5px -8px 5px;z-index:-2;pointer-events:none;background:var(--pink);transform:rotate(3deg);clip-path:polygon(2% 22%,17% 9%,34% 13%,59% 0,85% 9%,98% 3%,93% 24%,100% 36%,94% 53%,98% 75%,80% 83%,76% 94%,50% 88%,24% 100%,6% 91%,9% 71%,0 66%,5% 43%);transition:transform .18s ease}
.header-cta:before,.primary:before{pointer-events:none}
.header-cta:before,.primary:before{background-color:#ff3d2e}
.header-cta:hover:before,.primary:hover:before{background-color:#ff6554}
.header-cta:after,.primary:after{background:#8edcff}
.header-cta,.primary,.controls .primary,.header-cta:hover,.primary:hover{color:#102231}
.header-cta:after{inset:-4px 1px -6px -7px;transform:rotate(-6deg)}
.primary:hover:after{transform:translate(2px,2px) rotate(4deg)}
.header-cta:hover:after{transform:translate(-1px,2px) rotate(-7deg)}
.showcase-options button[aria-pressed=true]:after{content:'';position:absolute;inset:5px -3px 0 2px;z-index:-2;pointer-events:none;background:var(--pink);transform:rotate(3deg);clip-path:polygon(3% 10%,95% 0,90% 25%,100% 43%,94% 91%,60% 95%,37% 88%,0 100%,7% 62%,0 55%)}
.showcase-options button[aria-pressed=true]:before{background:#ff3d2e}
.showcase-options button[aria-pressed=true]:after{background:#8edcff}
.showcase-options button[aria-pressed=true],.showcase-options button[aria-pressed=true]:hover{color:#102231}
@media(max-width:550px){.header-cta:after{inset:-2px 1px -5px -4px}.primary:after{inset:5px -2px -7px 4px}}
@media(prefers-reduced-motion:reduce){.header-cta:after,.primary:after{transition:none}.header-cta:hover:after{transform:rotate(-6deg)}.primary:hover:after{transform:rotate(3deg)}}

/* Wall labels follow the artwork edges; chosen letter cuts break up display type. */
.hero-work{transform:rotate(-1.2deg);padding-top:28px}
.work-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-bottom:29px;text-align:center}
.hero-work .work-heading .eyebrow{font-family:var(--display);font-size:29px;font-style:normal;letter-spacing:.2px;line-height:1.05;transform:rotate(2deg);margin:0}
.work-heading .tag{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.25px;border:0;padding:3px 0;background:none;transform:rotate(-1deg)}
.hero-comparison{gap:16px;align-items:center}
.hero-comparison figure{position:relative;min-width:0}
.hero-comparison figure:first-child{padding-left:26px;transform:rotate(2.5deg)}
.hero-comparison figure:last-child{padding-right:26px;transform:rotate(-1deg)}
.hero-comparison figcaption{position:absolute;left:0;top:50%;margin:0;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-family:var(--display);font-size:19px;font-weight:900;font-style:normal;letter-spacing:.6px;line-height:1;color:#24261f;white-space:nowrap}
.hero-comparison .refined figcaption{left:auto;right:0;display:flex;align-items:center;gap:13px;transform:translateY(-50%);color:#24261f}
.hero-comparison .refined figcaption>span:first-child{display:block}
.hero-comparison .refined figcaption .dot{display:none}
.hero-comparison .refined figcaption>span:last-child{font-family:Arial,sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#53564a}
.hero-comparison img{border-width:3px}
.hero-copy>.eyebrow{transform:rotate(2deg)}
.paint-strip>span:first-child{transform:rotate(3deg)}
.paint-strip>span:nth-of-type(2){transform:rotate(-2deg)}
.paint-strip>span:last-child{transform:rotate(1deg)}
.campaign:nth-child(1){transform:rotate(1.2deg)}
.campaign:nth-child(2){transform:rotate(-1.8deg)}
.campaign:nth-child(3){transform:rotate(.4deg)}
.cut-letter{display:inline-block;font-size:.97em;line-height:inherit;letter-spacing:-.035em;color:inherit;text-transform:inherit}
.letter-wide{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-style:normal;transform:rotate(-7deg) scaleX(1.03);margin:0 .015em}
.letter-tag{font-family:Georgia,'Times New Roman',serif;font-weight:900;font-style:italic;transform:rotate(6deg) translateY(.015em);margin:0 .015em}
@media(max-width:1100px){.hero-comparison{gap:12px}.hero-comparison figure:first-child{padding-left:22px}.hero-comparison figure:last-child{padding-right:22px}.hero-comparison figcaption{font-size:17px}.hero-work .work-heading .eyebrow{font-size:27px}}
@media(max-width:550px){.hero-work{transform:rotate(-.7deg);padding-top:24px}.work-heading{gap:5px;margin-bottom:24px}.hero-work .work-heading .eyebrow{font-size:25px}.work-heading .tag{font-size:10px}.hero-comparison{gap:10px}.hero-comparison figure:first-child{padding-left:19px;transform:rotate(1.5deg)}.hero-comparison figure:last-child{padding-right:19px;transform:rotate(-1deg)}.hero-comparison figcaption{font-size:15px;letter-spacing:.2px}.hero-comparison .refined figcaption>span:first-child{display:block}.hero-comparison .refined figcaption>span:last-child{display:none}.paint-strip{gap:30px 20px}.paint-strip>span{font-size:21px}.cut-letter{margin-left:0;margin-right:0}}

/* Two campaign choices share the same four direction controls. */
.showcase-projects{display:flex;justify-content:center;gap:26px;margin:-9px 0 24px}
.showcase-projects button{position:relative;isolation:isolate;background:none;border:0;color:#303129;min-height:54px;min-width:130px;padding:7px 18px;font-family:var(--display);font-size:23px;letter-spacing:.4px;transform:rotate(-2deg)}
.showcase-projects button:nth-child(2){transform:rotate(2deg)}
.showcase-projects button small{display:block;font:700 10px Arial,sans-serif;letter-spacing:.2px;margin-top:2px}
.showcase-projects button:before{content:'';position:absolute;z-index:-1;inset:0;background:#d6d5c7;clip-path:polygon(3% 11%,90% 0,98% 16%,95% 59%,100% 89%,15% 100%,0 87%,4% 44%)}
.showcase-projects button[aria-pressed=true]{color:#102231}.showcase-projects button[aria-pressed=true]:before{background:#8edcff}
.showcase-projects button[aria-pressed=true]:after{content:'';position:absolute;left:10%;right:5%;bottom:-4px;height:4px;background:#ff3d2e;transform:rotate(-2deg)}
.showcase-projects button:hover:before{background:#b5e9ff}.showcase-projects button:focus-visible{outline:2px dashed #bd2a20;outline-offset:5px}
.hero-comparison.graffiti-collection img{aspect-ratio:2/3}
@media(max-width:550px){.showcase-projects{gap:15px;margin-bottom:22px}.showcase-projects button{min-width:112px;font-size:21px;padding:7px 10px}.showcase-projects button small{font-size:9px}}
/* Palette-led reading labels: soft, irregular silhouettes with calm edges. */
.reference a.case-study-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:13px 24px;margin:17px 0 5px;border:0;text-decoration:none;color:var(--label-ink);font:700 12px Arial,sans-serif;letter-spacing:.1px;line-height:1.4;white-space:nowrap;vertical-align:middle}
.reference a.case-study-link:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--label-bg);border-bottom:4px solid var(--label-accent);border-radius:25% 17% 23% 13% / 48% 35% 42% 38%;transform:rotate(-2deg);transition:transform .15s}
.reference a.case-study-link.shape-1:before{border-radius:18% 30% 14% 25% / 36% 48% 35% 44%;transform:rotate(2deg)}
.reference a.case-study-link.shape-2:before{border-radius:10px 22px 9px 24px;transform:rotate(-1deg);clip-path:polygon(3% 0,94% 4%,100% 27%,97% 92%,9% 100%,0 72%)}
.reference a.case-study-link.shape-3:before{border-radius:26px 10px 24px 9px;transform:rotate(1deg);clip-path:polygon(6% 3%,88% 0,100% 19%,97% 94%,2% 100%,0 25%)}
.reference a.case-study-link:hover:before{transform:rotate(0deg) translateY(-2px)}
.reference a.case-study-link:focus-visible{outline:2px dashed #222;outline-offset:5px}
.campaign div>a[download]{font-family:var(--display);font-size:17px;font-style:normal;letter-spacing:.3px;padding:2px 0 5px}
@media(prefers-reduced-motion:reduce){.reference a.case-study-link:before{transition:none}.reference a.case-study-link:hover:before{transform:none}}
/* Finishing details for the working studio. */
.source-actions{padding:4px 0 6px}.source-actions>span{display:block;font-size:10px;color:#62655b;margin:12px 0 4px}.source-actions #paste-image{margin:0;min-height:42px}.sample-actions{display:flex;flex-wrap:wrap;gap:8px 20px}.sample-actions button{min-height:36px}.dropzone:focus-within{outline:3px dashed #bd2a20;outline-offset:4px}#filename{overflow-wrap:anywhere}#status{min-height:3em}button:disabled{cursor:not-allowed}.stage[aria-busy=true] .result-actions{opacity:.65}
.monthly-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:34px 0 18px}.monthly-plan{padding:27px 28px 24px;background:#eee7d8;color:#20241f;clip-path:polygon(1% 1%,96% 0,100% 5%,98% 98%,4% 100%,0 94%)}.monthly-plan:nth-child(2){background:#8edcff;clip-path:polygon(0 4%,93% 0,100% 7%,99% 94%,94% 100%,1% 97%)}.monthly-plan:nth-child(3){background:#d5ff35;clip-path:polygon(4% 0,99% 3%,97% 97%,7% 100%,0 95%,1% 8%)}.plan-kind{font-size:10px;text-transform:uppercase;letter-spacing:1px}.monthly-plan h3{font-family:var(--display);font-size:32px;margin:12px 0}.monthly-plan p{font-size:12px;margin:0 0 8px}.monthly-plan .plan-price{display:flex;align-items:baseline;gap:12px;margin:10px 0 18px}.plan-price strong{font-family:var(--display);font-size:56px;font-weight:400}.plan-price span{font-size:11px}.monthly-plan button{margin-top:18px;background:none;border:1px solid currentColor;min-height:42px;padding:8px 18px;font-size:12px;opacity:.65}.plan-note{font-size:12px;color:#b8b9ac;margin-bottom:38px}.pack-heading{font-family:var(--display);font-size:27px;margin-bottom:22px}.pricing-grid{margin-top:0}
@media(max-width:650px){.monthly-plans{grid-template-columns:1fr;gap:17px}.monthly-plan{padding:24px}.monthly-plan .plan-price{margin:4px 0 12px}.monthly-plan h3{font-size:34px}.monthly-plan button{margin-top:10px}.controls input,.controls select,.controls textarea{font-size:16px}.result-actions{flex-wrap:wrap}.result-actions button{min-height:44px}.sample-actions{gap:12px 24px}}
/* Browse the library by painted category labels, expanding only what interests you. */
.library-hint{font-size:12px;color:var(--muted);margin:0 0 20px}
.reference-categories{display:block}
.reference-category{border-top:1px solid var(--line);padding:6px 0}
.reference-category:last-child{border-bottom:1px solid var(--line)}
.reference-category>summary{display:flex;align-items:center;gap:22px;min-height:88px;padding:12px 4px;cursor:pointer;list-style:none}
.reference-category>summary::-webkit-details-marker{display:none}
.reference-category>summary:focus-visible{outline:2px dashed #8edcff;outline-offset:4px}
.reference-category-title{position:relative;isolation:isolate;font-family:var(--display);font-size:32px;line-height:1.15;text-transform:uppercase;letter-spacing:.3px;color:#151613;padding:9px 25px 10px 18px}
.reference-category-title:before{content:'';position:absolute;inset:0;z-index:-1;background:#8edcff;clip-path:polygon(1% 8%,95% 0,100% 13%,97% 92%,4% 100%,0 84%)}
.reference-category:nth-child(4n+2) .reference-category-title:before{background:#eee7d8;clip-path:polygon(0 13%,98% 5%,100% 87%,7% 98%,2% 85%)}
.reference-category:nth-child(4n+3) .reference-category-title:before{background:#ed382a;clip-path:polygon(3% 0,96% 7%,100% 94%,1% 100%,0 20%)}
.reference-category:nth-child(4n) .reference-category-title:before{background:#d5ff35}
.reference-category-count{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.reference-category-toggle{font-family:Arial,sans-serif;font-size:29px;font-weight:400;line-height:1;width:28px;text-align:center;color:var(--ink)}
.reference-category-toggle:before{content:'+'}
.reference-category[open] .reference-category-toggle:before{content:'−'}
.reference-category>summary:hover .reference-category-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.reference-category>.reference-grid{padding:10px 4px 24px}
/* Both studio selectors share a printed-paper frame. The blue focus mark stays distinct from selection. */
.controls #direction,.controls #mode{background:#fffdf5;border:2px solid #252821;border-radius:0;box-shadow:4px 4px 0 #8edcff;outline:none;padding:11px 14px;min-height:51px;font-family:var(--display);font-size:20px;font-weight:400;color:#24261f;cursor:pointer;clip-path:polygon(0 4%,98% 0,100% 10%,100% 96%,2% 100%,0 92%)}
.controls #direction:focus,.controls #mode:focus{border-color:#252821;box-shadow:4px 4px 0 #8edcff;outline:none}
.controls #direction:focus-visible,.controls #mode:focus-visible{outline:3px dashed #1a5d82;outline-offset:4px}
.controls #direction option,.controls #mode option{background:#fffdf5;color:#1c2016;font-family:Arial,sans-serif;font-size:16px}
.controls #direction.long-direction{font-size:16px}
.mobile-graffiti-select{display:none}
@media(max-width:650px){
 .controls.mobile-selects #direction,.controls.mobile-selects #mode{display:none}
 .mobile-graffiti-select{display:block;position:relative;margin-top:8px}
 .mobile-graffiti-select summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 17px;background:#fffdf5;color:#22251e;border:2px solid #22251e;box-shadow:4px 4px 0 #8edcff;font:21px/1.1 var(--display);clip-path:polygon(0 5%,97% 0,100% 10%,100% 95%,3% 100%,0 91%)}
 .mobile-graffiti-select summary::-webkit-details-marker{display:none}
 .mobile-graffiti-select summary:after{content:'+';flex:none;font:30px/1 var(--display);color:#ed382a}
 .mobile-graffiti-select[open] summary:after{content:'−'}
 .mobile-graffiti-select summary:focus-visible,.mobile-graffiti-select button:focus-visible{outline:3px dashed #1a5d82;outline-offset:3px}
 .mobile-graffiti-select .graffiti-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 10px 10px;margin-top:8px;max-height:min(52vh,390px);overflow:auto;overscroll-behavior:contain;background:#ece8da;border:2px solid #262822;box-shadow:5px 5px 0 #ed382a;clip-path:polygon(0 1%,98% 0,100% 3%,99% 99%,2% 100%,0 97%)}
 .mobile-graffiti-select .graffiti-options button{min-height:53px;padding:9px 8px;border:2px solid #22251e;border-radius:0;background:#fffdf5;color:#22251e;font:16px/1.1 var(--display);text-align:center;transform:rotate(-1deg);clip-path:polygon(1% 0,100% 3%,98% 100%,0 97%)}
 .mobile-graffiti-select .graffiti-options button:nth-child(4n+2){background:#8edcff;transform:rotate(1deg)}
 .mobile-graffiti-select .graffiti-options button:nth-child(4n+3){background:#ed382a;color:#fffdf5;transform:rotate(-.5deg)}
 .mobile-graffiti-select .graffiti-options button:nth-child(4n){background:#d5ff35;transform:rotate(.7deg)}
 .mobile-graffiti-select .graffiti-options button[aria-pressed=true]{background:#22251e;color:#fffdf5;box-shadow:inset 0 0 0 3px #fffdf5}
 .mobile-graffiti-select .graffiti-options button:disabled{opacity:.5;cursor:not-allowed}
 .mobile-graffiti-select.is-disabled summary{opacity:.55;cursor:not-allowed}
}
@media(max-width:550px){.reference-category>summary{gap:10px;min-height:78px}.reference-category-title{font-size:23px;padding:10px 16px 10px 12px}.reference-category-count{font-size:10px}.reference-category-toggle{font-size:25px;width:20px;flex-shrink:0}.reference-category>.reference-grid{padding-bottom:16px}}

/* Original studio tools. Shared SVG symbols add no image requests. */
.tool-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.hero-copy h1{position:relative;isolation:isolate;max-width:460px;aspect-ratio:460/410;display:flex;align-items:center}
.hero-copy h1 .graffiti-title{width:78%;height:100%;max-height:none;max-width:78%;margin:0;object-fit:contain}
.logo-spray{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.spraying-can{filter:drop-shadow(4px 7px 3px #0006);transform-origin:350px 258px}
.spray-cloud{opacity:.28;transform-origin:351px 258px}
.has-paint-tool{position:relative;isolation:isolate}
.studio-tool{position:absolute;pointer-events:none;filter:drop-shadow(5px 9px 3px #0004);z-index:0}
.has-paint-tool>.section-heading{position:relative;z-index:1;padding-right:115px}
.brush-pair{width:110px;height:180px;right:2px;top:35px;transform:rotate(15deg)}
.palette-tool{width:130px;height:115px;right:-4px;top:42px;transform:rotate(-19deg)}
.library-can{width:65px;height:147px;right:20px;top:50px;transform:rotate(14deg)}
@media(min-width:1500px){.hero-copy h1{max-width:490px}}
@media(max-width:1100px){.has-paint-tool>.section-heading{padding-right:90px}.brush-pair{width:83px;height:145px}.palette-tool{width:95px;height:95px}.library-can{width:52px;height:120px;right:10px}}
@media(min-width:551px) and (max-width:800px){.hero-copy h1{width:100%}.has-paint-tool>.section-heading{padding-right:85px}.palette-tool{width:87px}.brush-pair{top:38px}}
@media(max-width:550px){.hero-copy h1{max-width:385px;margin:0 auto 18px}.has-paint-tool>.section-heading{padding-right:0}.has-paint-tool>.section-heading>div:first-child{padding-right:72px}.studio-section>.section-heading h2{font-size:36px}.brush-pair{width:70px;height:130px;top:48px;right:-3px}.palette-tool{width:79px;height:80px;top:56px;right:-5px}.library-can{width:45px;height:105px;top:50px;right:1px}}
@media(prefers-reduced-motion:reduce){.spray-cloud,.spraying-can{animation:none}.spray-cloud{opacity:.28}}
/* Keep the tools inside the page edge, including rotated brush tips. */
.brush-pair{right:28px}
.spray-cloud{opacity:.6;transform-origin:396px 250px}
@media(max-width:550px){.brush-pair{right:16px}}
@media(prefers-reduced-motion:reduce){.spray-cloud{opacity:.6}}
.spray-cloud>path{filter:blur(3px)}

/* Keep the library aerosol inside the section edge. */
.photographic-can{width:120px;height:180px;object-fit:contain;right:22px;top:35px}
@media(max-width:550px){.photographic-can{width:86px;height:130px;right:4px;top:37px}}