/* ==== styles ==== */
:root{--ink:#1D1D1D;--muted:#535353;--orange:#F1EB1C;--blue:#F1EB1C;--paper:#FFFFFF;--line:#FFFFFF;--shadow:0 18px 36px -25px #30303066;--mono:'Space Mono',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:60px}body{margin:0;background:#C4C4C4;color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}body:before{content:'';position:fixed;inset:0;z-index:-3;background:linear-gradient(155deg,#919191 0%,#C4C4C4 46%,#FFFFFF 100%)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.05}::selection{background:#FFFFFF;color:var(--ink)}.skip-link{position:fixed;top:-80px;left:16px;background:white;padding:12px;z-index:100}.skip-link:focus{top:38px}.wrap{max-width:1160px;width:calc(100% - 96px);margin-inline:auto}.orange-text{color:var(--orange)}.eyebrow,.file-label,.frame-label,.image-caption,.contact-location{font-family:var(--mono);font-size:10px;font-weight:bold;letter-spacing:1px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#919191;box-shadow:0 0 0 3px #9191911c;flex-shrink:0}.ruler{position:fixed;inset:0 0 auto;height:29px;display:flex;align-items:center;background:#FFFFFFeF;z-index:50;border-bottom:1px solid #91919150;font:10px var(--mono);font-weight:bold;letter-spacing:.8px}.ruler-brand{display:flex;align-items:center;gap:7px;padding:0 15px 0 10px;height:100%;border-right:1px solid #C4C4C4;white-space:nowrap}.mini-mark{font:bold 21px 'Hanken Grotesk';background:var(--ink);color:white;line-height:22px;border-radius:5px;width:22px;text-align:center;letter-spacing:-2px;padding-right:2px}.ruler-track{align-self:stretch;position:relative;flex:1;background:repeating-linear-gradient(90deg,#91919166 0 1px,transparent 1px 10px) bottom/100% 6px no-repeat}.ruler-numbers{display:flex;justify-content:space-around;padding-top:2px;font-size:8px;font-weight:400;letter-spacing:0}.progress-marker{position:absolute;left:0;top:0;height:28px;border-right:1px solid var(--orange);padding:1px 4px 0 0;color:var(--orange);background:#FFFFFF88;min-width:24px;will-change:transform}.ruler-live{display:flex;align-items:center;gap:8px;padding:0 15px;height:100%;border-left:1px solid #C4C4C4;font-size:9px}.sky{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}.cloud{position:absolute;width:460px;opacity:.84}.cloud-one{top:95px;left:-110px;transform:rotate(-5deg)}.cloud-two{top:30px;right:-20px;width:410px}.cloud-three{bottom:65px;left:16%;width:290px;opacity:.45}.cloud-four{bottom:-90px;right:-140px;width:650px;opacity:.7}.header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:29px 28px 0;min-height:110px}.availability{background:#FFFFFF;border:1px solid #FFFFFF80;border-radius:40px;padding:11px 17px;font-size:12px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow)}nav{display:flex;align-items:center;gap:3px;padding:6px;background:var(--paper);border-radius:50px;box-shadow:0 8px 20px #5353531f}nav a{padding:10px 21px;font-size:13px;border-radius:25px;transition:background .2s,color .2s}nav a:hover,nav a.active{color:var(--orange)}nav .nav-contact{background:var(--ink);color:#FFFFFF;display:flex;gap:18px}nav .nav-contact:hover{background:var(--orange);color:#FFFFFF}.header-social{font-size:22px;font-weight:bold;display:flex;align-items:center;gap:9px}.header-social span{font-size:11px;font-weight:400}.hero{position:relative;text-align:center;padding:24px 24px 0;min-height:617px}.hero-intro{display:flex;align-items:center;justify-content:center;gap:9px;font:10px var(--mono);font-weight:bold;letter-spacing:1.2px;margin-bottom:28px}.small-spark{font-size:24px;color:var(--orange);line-height:1}.hero-heading{position:relative;width:max-content;max-width:90%;margin:0 auto;border:1px solid #F1EB1C80;padding:10px 21px 15px}.hero h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(80px,11.4vw,158px);font-weight:900;line-height:.88;letter-spacing:-2px}.hero h1>span{display:block}.hero .headline-orange{color:var(--orange);background:radial-gradient(circle,#FFFFFF 0 .8px,transparent 1px) 0 0/4px 4px,var(--orange);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.frame-label{position:absolute;top:-21px;left:-1px;background:var(--blue);color:white;padding:1px 7px;font-size:9px;letter-spacing:.15px;line-height:20px;border-radius:3px 3px 0 0}.handle{position:absolute;width:7px;height:7px;background:#FFFFFF;border:1px solid var(--blue)}.tl{top:-4px;left:-4px}.tr{top:-4px;right:-4px}.bl{bottom:-4px;left:-4px}.br{bottom:-4px;right:-4px}.dimension{position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);font:8px var(--mono);letter-spacing:1px;color:#535353}.hero-copy{margin:39px auto 20px;font-size:17px;line-height:1.65;color:#303030}.hero-copy em{font-style:normal;border-bottom:1px solid #535353}.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.button{min-height:46px;padding:12px 22px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:24px;font-size:13px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s}.button:hover{transform:translateY(-3px)}.orange{background:var(--orange);color:#FFFFFF;box-shadow:0 8px 17px #53535333}.orange:hover{background:#535353;box-shadow:0 10px 20px #53535350}.outline{border:1px solid var(--ink);background:#FFFFFF30}.outline:hover{background:#FFFFFF65}.button span{font-size:19px;line-height:1}.hero-sticker{position:absolute;right:8%;top:158px;width:124px;height:124px;border-radius:50%;background:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transform:rotate(12deg);color:#535353;box-shadow:3px 5px 0 #91919120;border:1px dashed #C4C4C4;outline:5px solid #FFFFFF;text-align:center;line-height:1.35}.hero-sticker span{font:10px var(--mono);white-space:nowrap}.hero-sticker b{font-size:41px;line-height:1.2}.designer-tag{position:absolute;top:330px;left:17%;color:var(--blue);transform:rotate(-9deg)}.designer-tag>span{font-size:30px;line-height:1;text-shadow:1px 1px white}.designer-tag b{font:10px var(--mono);color:#FFFFFF;background:var(--blue);padding:5px 9px;display:block;margin-left:18px;border-radius:3px}.hero-bottom{display:flex;justify-content:space-between;align-items:end;text-align:left;margin-top:46px;font:9px/1.8 var(--mono);letter-spacing:1px;font-weight:bold}.hero-bottom p span{font-weight:400;color:var(--muted)}.hero-bottom p:last-child{text-align:right}.scroll-cue{display:flex;align-items:center;gap:14px;font-size:8px}.scroll-cue span{width:28px;height:28px;display:grid;place-items:center;border:1px solid #53535355;border-radius:50%;font-size:14px}.featured{padding-top:30px;overflow:hidden}.section-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 auto 32px;max-width:1160px;width:calc(100% - 96px)}.section-top h2{font-size:34px;letter-spacing:-1.5px}.section-top h2 em{font-family:'Bricolage Grotesque',sans-serif;font-weight:400}.section-top>.eyebrow{font-size:9px}.project-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:24px max(24px,calc((100% - 620px)/2)) 30px;scroll-behavior:smooth}.project-rail::-webkit-scrollbar{display:none}.project-card{flex:0 0 min(620px,80vw);background:var(--paper);padding:10px;border-radius:20px;position:relative;scroll-snap-align:center;box-shadow:var(--shadow);border:6px solid #FFFFFF60;background-clip:padding-box;transition:transform .2s}.project-card:hover{transform:translateY(-5px)}.featured-card{outline:1.5px solid var(--blue);outline-offset:4px}.featured-card>.frame-label{top:-27px;left:-10px}.project-image{height:345px;border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:25px 35px 46px}.peach{background:#FFFFFF}.lilac{background:#FFFFFF}.green{background:#FFFFFF}.project-image img{width:auto;max-width:100%;height:100%;object-fit:contain;box-shadow:0 14px 24px #1D1D1D25;transition:transform .3s}.project-card:hover .project-image img{transform:scale(1.025)}.project-arrow{position:absolute;right:15px;top:15px;width:35px;height:35px;border:1px solid #FFFFFF80;border-radius:50%;background:#FFFFFFa6;display:grid;place-items:center;font-size:20px}.image-caption{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:1.2px}.project-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 6px 6px}.project-footer h3{font-size:18px;letter-spacing:-.6px;display:flex;align-items:center;gap:8px}.project-footer h3 i{width:6px;height:6px;border-radius:2px;background:var(--orange)}.pill{font:8px var(--mono);letter-spacing:.4px;border:1px solid #FFFFFF;background:#FFFFFF;padding:4px 8px;border-radius:20px;white-space:nowrap}.rail-controls{display:flex;align-items:center;justify-content:center;gap:17px;margin:3px 0 40px}.round-button{display:grid;place-items:center;width:36px;height:36px;border:0;background:var(--paper);border-radius:10px;box-shadow:var(--shadow);transition:background .2s}.round-button:hover{background:#FFFFFF}.specialties{padding:25px 0;border-top:1px solid #FFFFFF66;border-bottom:1px solid #FFFFFF66;font:10px var(--mono);letter-spacing:1px;white-space:nowrap}.specialties b{font:24px 'Hanken Grotesk';color:var(--orange)}.section{padding-top:112px}.section-heading{text-align:center;margin-bottom:43px}.handwritten{display:block;font:italic 24px/1.5 'Bricolage Grotesque',sans-serif;color:#303030;margin-bottom:12px;letter-spacing:-.6px}.section-heading h2,.faq h2{font-size:clamp(38px,4.8vw,62px);font-weight:700;letter-spacing:-2.9px;line-height:1.08}.section-heading p{color:var(--muted);margin-top:17px;font-size:14px}.wave{display:inline-block;color:var(--orange);margin-left:18px;transform:rotate(-15deg);font-weight:400}.about-grid{display:grid;grid-template-columns:1.2fr .85fr;gap:18px}.card{background:var(--paper);border-radius:20px;padding:30px;border:1px solid #FFFFFFb3;box-shadow:var(--shadow);position:relative}.file-label{font-size:8px;color:#919191;display:block;letter-spacing:.8px}.statement{padding:30px 36px}.statement>.file-label{text-align:right}.quote-mark{display:block;color:var(--orange);font:bold 80px/1 'Bricolage Grotesque';height:65px;margin-top:5px}.statement h3{font-size:32px;line-height:1.15;letter-spacing:-1.2px}.statement p{font-size:14px;line-height:1.8;color:var(--muted);max-width:490px;margin-top:16px}.card-signoff{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:16px;margin-top:26px}.signature{font:italic 27px 'Bricolage Grotesque';letter-spacing:-1.5px}.card-signoff .eyebrow{font-size:8px;letter-spacing:.5px}.card-signoff .status-dot{width:5px;height:5px;margin-right:4px}.about-side{display:grid;gap:18px;grid-template-rows:1fr auto}.dark-card{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}.dark-card .file-label{color:#C4C4C4;text-align:right}.dark-card h3{font-size:26px;line-height:1.18;letter-spacing:-.8px;margin-top:14px}.tool-row{display:flex;gap:12px;margin-top:27px}.tool-row span{width:42px;height:42px;border:1px solid #FFFFFF33;border-radius:11px;display:grid;place-items:center;font-size:18px;color:#C4C4C4;background:#303030}.tool-row span:nth-child(2){color:#C4C4C4}.tool-row span:nth-child(3){color:#C4C4C4}.tool-row span:nth-child(4){color:#FFFFFF}.dark-card p{font-size:10px;color:#C4C4C4;margin-top:14px}.capabilities{padding:24px}.capabilities .file-label{text-align:right;margin-bottom:15px}.pills{display:flex;flex-wrap:wrap;gap:8px}.pills>span{font-size:11px;border:1px solid #1D1D1D;padding:6px 12px;border-radius:30px}.about-notes{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:18px;margin-top:18px}.note-card{position:relative;padding:25px;border:1px solid #FFFFFFb0;border-radius:17px;background:#FFFFFF99;overflow:hidden}.note-card>.eyebrow{font-size:8px;color:#535353}.note-card h3{font-size:22px;line-height:1.2;letter-spacing:-.6px;margin-top:12px}.note-symbol{position:absolute;right:20px;bottom:5px;color:var(--orange);font-size:64px;line-height:1.2;opacity:.9}.profile-note{background:#FFFFFF;transition:transform .2s}.profile-note:hover{transform:translateY(-3px)}.profile-note>span:last-child{display:block;font-size:11px;color:var(--muted);margin-top:12px}.sticky-note{display:inline-block;background:#FFFFFF;font-size:12px;padding:8px 16px;transform:rotate(-2deg);border-radius:4px;margin-top:22px;box-shadow:2px 4px 0 #53535310;position:relative}.sticky-note:after{content:'';position:absolute;right:0;bottom:0;border-bottom:11px solid #C4C4C460;border-left:11px solid transparent}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}.service-card{padding:22px}.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.service-top .eyebrow{font-size:8px;letter-spacing:.5px}.service-number{font:20px 'Bricolage Grotesque';color:#919191}.service-art{height:230px;border-radius:10px;position:relative;overflow:hidden;margin-bottom:25px}.brand-art{background:#FFFFFF;padding:27px 30px;color:#303030}.brand-art>span:first-child{font-size:61px;font-weight:700;line-height:.86;letter-spacing:-4px;display:block;transform:rotate(-6deg)}.brand-art b{font-family:'Bricolage Grotesque';font-style:italic}.brand-art>i{position:absolute;right:29px;top:32px;font-size:23px;font-style:normal}.art-caption{position:absolute;bottom:15px;left:0;right:0;text-align:center;font:7px var(--mono);letter-spacing:1px}.book-art{background:#FFFFFF;display:flex;justify-content:center;align-items:center}.book-object{background:#535353;width:134px;height:183px;color:#FFFFFF;padding:15px 17px;transform:rotate(-10deg);box-shadow:-4px 3px 0 #FFFFFF,9px 13px 15px #30303030;border-left:3px solid #535353}.book-object small{font:5px var(--mono)}.book-object strong{display:block;font:italic bold 33px/.91 'Bricolage Grotesque';letter-spacing:-1px;margin-top:10px}.book-object>span{font:4px var(--mono);display:block;margin-top:17px}.book-art>i{position:absolute;right:15px;bottom:15px;font-size:58px;color:#535353;font-style:normal}.spatial-art{background:linear-gradient(165deg,#FFFFFF 60%,#C4C4C4 60%)}.arch{position:absolute;width:132px;height:195px;left:45px;top:32px;border-radius:80px 80px 0 0;border:27px solid #FFFFFF;border-bottom:0;box-shadow:13px 8px 12px #91919144;background:linear-gradient(130deg,#919191,#C4C4C4)}.sphere{width:72px;height:72px;position:absolute;bottom:24px;right:31px;background:radial-gradient(circle at 30% 25%,#FFFFFF,#919191 65%,#535353);border-radius:50%;box-shadow:13px 10px 10px #53535333}.service-card h3{font-size:23px;letter-spacing:-1px;line-height:1.1}.service-card h3 span{display:block;color:var(--orange);font-size:20px;margin-top:5px}.service-card>p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:16px;min-height:65px}.service-card details{margin-top:23px;border-top:1px solid var(--line)}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.service-card summary{display:flex;align-items:center;justify-content:space-between;font:bold 9px var(--mono);letter-spacing:.6px;padding-top:18px}.service-card summary>span{font:18px 'Hanken Grotesk';color:var(--orange)}details[open]:not(.faq-item) summary>span{transform:rotate(45deg)}.deliverables{font-size:12px;line-height:1.9;color:var(--muted);padding-top:15px}.process-window{border-radius:18px;overflow:hidden;background:#FFFFFF;box-shadow:var(--shadow);border:1px solid #FFFFFFa0}.window-bar{display:flex;gap:16px;align-items:center;padding:17px 22px;background:#FFFFFF;font:bold 10px var(--mono);border-bottom:1px solid #FFFFFF}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#919191}.window-dots i:nth-child(2){background:#C4C4C4}.window-dots i:nth-child(3){background:#C4C4C4}.online{margin-left:auto;font-size:8px;color:var(--muted);display:flex;align-items:center;gap:8px}.process-steps{display:grid;grid-template-columns:repeat(3,1fr);padding:40px 12px;background:radial-gradient(#C4C4C466 1px,transparent 1px) 0 0/18px 18px}.process-steps article{padding:0 27px;border-right:1px solid #FFFFFF}.process-steps article:last-child{border:0}.step-index{font:bold 8px var(--mono);letter-spacing:.5px;color:#303030}.step-icon{display:block;color:var(--orange);font:42px 'Hanken Grotesk';margin:17px 0 20px;line-height:1}.process-steps h3{font-size:23px;letter-spacing:-.8px}.process-steps p{font-size:13px;line-height:1.8;margin-top:15px;color:var(--muted)}.window-footer{display:flex;align-items:center;justify-content:space-between;padding:17px 26px;border-top:1px solid var(--line);font-size:12px}.window-footer>a{font-weight:bold;color:var(--orange)}.explorations .section-top{width:100%;align-items:end}.explorations .section-top h2{font-size:44px;letter-spacing:-2px}.explorations .handwritten{font-size:21px}.text-link{font-size:12px;border-bottom:1px solid var(--ink);padding-bottom:4px}.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px}.mini-project>div{position:relative;border-radius:16px;overflow:hidden;background:#FFFFFF;padding:15px;height:330px;border:1px solid #FFFFFF70;box-shadow:var(--shadow)}.mini-project:nth-child(2)>div{background:#FFFFFF}.mini-project:nth-child(3)>div{background:#FFFFFF}.mini-project:nth-child(4)>div{background:#FFFFFF}.mini-project img{width:100%;height:100%;object-fit:contain;transition:transform .3s}.mini-project:hover img{transform:scale(1.025)}.mini-project h3{font-size:19px;letter-spacing:-.5px;margin:17px 0 5px}.mini-project>.eyebrow{color:var(--muted);font-size:8px}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:65px}.faq h2{font-size:44px;letter-spacing:-2px}.faq>div>p{font-size:13px;color:var(--muted);margin-top:25px;line-height:1.9}.faq p a{border-bottom:1px solid #919191;padding-bottom:3px}.faq-list{display:flex;flex-direction:column;gap:14px}.contact{text-align:center;position:relative;padding-bottom:90px;padding-inline:24px}.contact h2{font-size:clamp(44px,6.4vw,83px);letter-spacing:-3.6px;line-height:1.02}.contact-spark{font-size:79px;color:var(--orange);line-height:1.2;margin:28px auto 17px}.contact>p{font-size:16px;color:#535353;margin-bottom:27px}.contact-location{display:block;margin-top:28px;font-size:8px;letter-spacing:.8px}.contact-location .status-dot{width:5px;height:5px;margin-right:5px}.footer{border-top:1px solid #9191912e;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:27px}.footer-logo{font-size:44px;font-weight:700;letter-spacing:-3px;line-height:1}.footer-logo span{font-size:32px;color:var(--orange);margin-left:5px}.footer-links{display:flex;gap:26px;font-size:12px}.footer-links a:hover{color:var(--orange)}.footer-bottom{width:100%;display:flex;justify-content:space-between;gap:20px;margin-top:28px;padding:20px 0;font:8px var(--mono);letter-spacing:.6px;border-top:1px solid #9191912e}.footer-bottom>span:nth-child(2){color:var(--muted)}
@media(min-width:1600px){.hero{min-height:670px}.hero-sticker{right:15%}.designer-tag{left:24%}.hero-bottom{margin-top:70px}}@media(max-width:1100px){.header-social span{display:none}.header{gap:14px;margin-inline:20px}.availability{font-size:10px;padding:10px 13px}nav a{padding:10px 16px}.hero-sticker{right:4%;width:104px;height:104px;top:180px}.hero-sticker b{font-size:30px}.hero-sticker span{font-size:8px}.hero h1{font-size:12vw}.designer-tag{left:10%;top:300px}.hero{min-height:580px}.specialties{font-size:9px}.wrap{width:calc(100% - 56px)}.section-top{width:calc(100% - 56px)}.section-top>.eyebrow:last-child{display:none}.service-card{padding:17px}.service-art{height:200px}.service-card h3{font-size:21px}.service-card h3 span{font-size:17px}.card-signoff .eyebrow{max-width:110px}.statement h3{font-size:29px}.process-steps article{padding-inline:20px}.faq{gap:35px}}
@media(max-width:760px){.ruler-live{font-size:8px;padding-inline:8px}.ruler-brand{font-size:8px;padding-right:8px}.ruler-numbers span:nth-child(even){display:none}.ruler-numbers{font-size:7px}.header{min-height:125px;flex-wrap:wrap;justify-content:center;margin-inline:16px;gap:11px;padding:16px 0}.availability{order:0;padding:0;background:none;border:0;box-shadow:none;font-size:10px}.header-social{display:none}nav{order:1;justify-content:center;width:max-content;max-width:100%;margin-inline:auto;padding:5px}nav a{font-size:11px;padding:9px 15px}nav .nav-contact{gap:10px}.hero{padding-top:25px;min-height:570px}.hero-intro{font-size:8px;letter-spacing:.65px;gap:7px;margin-bottom:33px}.small-spark{font-size:20px}.hero-heading{padding:10px 9px 13px;max-width:100%}.hero h1{font-size:14.3vw;letter-spacing:-1px}.hero-sticker{right:5%;top:296px;width:86px;height:86px;outline-width:3px}.hero-sticker b{font-size:24px}.hero-sticker span{font-size:6px}.designer-tag{left:7%;top:225px}.designer-tag>span{font-size:23px}.designer-tag b{font-size:8px;padding:3px 7px;margin-left:13px}.hero-copy{font-size:15px;margin-top:45px;max-width:340px}.hero-actions{gap:10px}.button{font-size:12px;padding:11px 16px;gap:14px;min-height:44px}.hero-bottom{margin-top:57px;font-size:7px;letter-spacing:.6px}.scroll-cue{font-size:0;gap:0}.scroll-cue span{font-size:13px}.hero-bottom p{max-width:130px}.cloud-one{top:95px;left:-155px;width:350px}.cloud-two{top:155px;right:-120px;width:330px}.cloud-three{bottom:230px;left:-90px;width:230px}.cloud-four{width:430px;bottom:0;right:-170px}.featured{padding-top:8px}.section-top{width:calc(100% - 36px);flex-wrap:wrap;gap:10px;margin-bottom:20px}.section-top h2{font-size:29px}.section-top>.eyebrow{width:100%;font-size:8px}.project-rail{gap:22px;padding-inline:10vw}.project-card{flex-basis:80vw;padding:7px;border-width:4px;border-radius:17px}.project-image{height:260px;padding:25px 16px 37px}.project-footer{padding:14px 2px 5px;gap:8px}.project-footer h3{font-size:14px;letter-spacing:-.5px;gap:6px}.pill{font-size:6px;padding:3px 5px}.image-caption{font-size:6px;letter-spacing:.6px}.project-arrow{width:29px;height:29px;font-size:16px;right:10px;top:10px}.rail-controls{margin-bottom:28px}.specialties{padding:20px 0;font-size:9px}.specialties b{font-size:18px}.wrap{width:calc(100% - 36px)}.section{padding-top:75px}.section-heading{margin-bottom:30px}.handwritten{font-size:20px;margin-bottom:12px}.section-heading h2{font-size:36px;letter-spacing:-1.8px}.section-heading p{font-size:12px;padding:0 10px}.wave{margin-left:9px}.about-grid{grid-template-columns:1fr;gap:14px}.statement{padding:24px}.statement h3{font-size:30px}.statement p{font-size:13px}.card-signoff .eyebrow{max-width:none;font-size:7px}.about-side{grid-template-columns:1fr;gap:14px}.dark-card{padding:25px}.dark-card h3{font-size:26px}.tool-row{margin-top:20px}.capabilities{padding:23px}.about-notes{gap:12px;grid-template-columns:1fr 1fr}.note-card{padding:20px}.note-card h3{font-size:20px}.note-symbol{font-size:38px;right:11px;bottom:3px;opacity:.6}.profile-note{grid-column:1/-1;padding:23px}.profile-note h3{margin-top:8px}.service-grid{grid-template-columns:1fr;gap:18px}.service-card{padding:24px}.service-art{height:235px}.service-card h3{font-size:26px}.service-card h3 span{font-size:23px}.service-card>p{font-size:13px;min-height:0}.service-top .eyebrow{font-size:9px}.brand-art{padding-left:45px;padding-top:30px}.brand-art>span:first-child{font-size:76px}.brand-art>i{right:55px}.arch{left:25%}.sphere{right:21%}.service-card summary{font-size:10px}.process-steps{grid-template-columns:1fr;padding:10px 24px}.process-steps article{border:0;border-bottom:1px solid #FFFFFF;padding:26px 0;display:grid;grid-template-columns:48px 1fr;column-gap:10px}.step-index{grid-column:1/-1}.step-icon{grid-row:2/4;margin-top:23px}.process-steps h3{margin-top:23px;font-size:23px}.process-steps p{margin-top:10px;font-size:13px}.window-bar{font-size:8px;padding:16px 12px;gap:10px}.online{font-size:0;gap:0}.window-footer{align-items:start;gap:15px;font-size:10px;padding:17px}.window-footer>span{max-width:155px}.window-footer>a{white-space:nowrap}.explorations .section-top{gap:18px}.explorations .section-top h2{font-size:34px;letter-spacing:-1.6px}.explorations .handwritten{font-size:18px}.text-link{font-size:11px}.work-grid{gap:26px;grid-template-columns:1fr}.mini-project>div{height:auto;aspect-ratio:1.4;padding:14px}.mini-project h3{font-size:19px;margin-top:15px}.faq{grid-template-columns:1fr;gap:25px}.faq h2{font-size:40px}.faq>div>p{margin-top:15px}.contact h2{font-size:45px;letter-spacing:-2px}.contact .handwritten{max-width:260px;margin-inline:auto}.contact-spark{font-size:67px;margin-top:22px}.contact>p{font-size:14px}.contact{padding-bottom:62px}.footer-logo{font-size:38px}.footer-links{font-size:10px;gap:15px}.footer-bottom{flex-wrap:wrap;font-size:7px;gap:12px}.footer-bottom>span:nth-child(2){display:none}.footer-bottom>a{margin-left:auto}}
@media(max-width:760px){nav a{white-space:nowrap;padding:9px 12px}.hero-sticker,.designer-tag{display:none}.desktop-break{display:none}.hero-copy{max-width:320px}.hero{min-height:515px}.ruler-live{white-space:nowrap}}
@media(max-width:380px){nav{gap:0}nav a{font-size:10px;padding:9px}nav .nav-contact span{display:none}.hero-intro{font-size:7px;letter-spacing:.2px}.hero-copy{font-size:14px}.hero-actions{gap:8px}.button{padding-inline:12px;font-size:11px;gap:10px}.hero-bottom{font-size:6px}.ruler-live{font-size:7px;letter-spacing:0}.ruler-brand{font-size:7px;letter-spacing:.4px}.project-footer{flex-wrap:wrap}.project-footer h3{font-size:13px}.section-heading h2{font-size:32px}.contact h2{font-size:39px}.footer-logo{font-size:31px}.footer-links{gap:10px}.note-card h3{font-size:18px}}
.service-card{min-width:0}.service-art{min-width:0}
@media(prefers-reduced-motion:reduce){html,.project-rail{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* ==== studio ==== */
@font-face{font-family:'Bricolage Grotesque';src:url('../assets/fonts/bricolage.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../assets/fonts/hanken.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/space-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/space-mono-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--display:'Bricolage Grotesque',sans-serif;--body:'Hanken Grotesk',system-ui,sans-serif;--mono:'Space Mono',monospace;--orange:#F1EB1C}
body{font-family:var(--body)}h1,h2,h3,.signature,.footer-wordmark{font-family:var(--display);font-optical-sizing:auto}button,input{font-family:inherit}
.hero h1{font-family:var(--display);font-size:clamp(52px,7.8vw,112px);font-weight:800;letter-spacing:-.065em;line-height:.98}.hero-heading{padding:17px 26px 21px}.hero{min-height:610px;padding-top:30px}.hero-sticker{right:5%;top:152px}.hero-copy{margin-top:36px}.hero-intro{font-size:9px}.hero-bottom{margin-top:48px}.handwritten{font-family:var(--display);font-style:italic;font-size:22px;letter-spacing:-.8px}.section-heading h2{font-weight:800;font-size:clamp(34px,4.7vw,64px);letter-spacing:-.055em}.section-heading p{font-family:var(--body)}.card-signoff .eyebrow{font-size:9px}.specialties{font-size:10px}.section-top>.eyebrow{font-size:10px}.service-top .eyebrow{font-size:9px}.contact h2{font-weight:800;font-size:clamp(40px,6vw,82px)}.faq h2{font-size:44px;font-weight:800;letter-spacing:-.06em}.project-footer h3{font-size:18px}.project-image{user-select:none}.project-rail{cursor:grab}.project-rail.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}.project-rail.is-dragging a{cursor:grabbing}.project-rail img{-webkit-user-drag:none}.button>span,.project-arrow{transition:transform .2s}.button:hover>span{transform:translate(2px,-2px)}.project-card:hover .project-arrow,.mini-project:hover .project-arrow{transform:rotate(45deg)}
.chat-window{max-width:760px;margin:auto;background:#FFFFFF;border:1px solid #FFFFFF;border-radius:20px;overflow:hidden;box-shadow:0 26px 45px -32px #30303080}.chat-preview{margin-left:auto;color:#919191;font:7px var(--mono);letter-spacing:.5px;white-space:nowrap}.chat-thread{padding:18px 32px 28px;background:radial-gradient(#C4C4C433 .8px,transparent 1px) 0 0/20px 20px}.chat-divider{display:flex;align-items:center;gap:15px;color:#535353;font:bold 8px var(--mono);letter-spacing:1.1px;margin:27px 0}.chat-divider:before,.chat-divider:after{content:'';height:1px;flex:1;background:#F1EB1C22}.chat-message{display:grid;grid-template-columns:37px 1fr;gap:12px;margin:23px 0}.chat-avatar{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:var(--orange);color:white;font:bold 24px var(--display);letter-spacing:-2px}.chat-avatar.client{background:#F1EB1C;font:bold 17px var(--body);letter-spacing:0}.chat-message h3{font:700 13px var(--body);display:flex;align-items:center;gap:10px;line-height:1.6}.chat-message h3 small{font:7px var(--mono);font-weight:400;color:#919191}.chat-message p{font-size:14px;margin-top:3px}.chat-file{display:inline-block;padding:7px 10px;border:1px solid #FFFFFF;border-radius:7px;font:9px var(--mono);margin-top:11px;background:#FFFFFF}.chat-file[href]:hover{background:#FFFFFF;border-color:#F1EB1C}.reaction{font:10px var(--mono);border:1px solid #C4C4C4;background:#FFFFFF;border-radius:20px;color:#535353;padding:3px 9px;margin-top:9px}.reaction[aria-pressed=true]{background:var(--orange);color:white;border-color:var(--orange)}.chat-compose{display:flex;align-items:center;justify-content:space-between;margin:0 28px 24px;padding:10px 13px 10px 17px;border:1px solid #FFFFFF;border-radius:10px;background:#FFFFFF;color:#535353;font-size:12px}.chat-compose a{background:var(--ink);color:white;border-radius:8px;width:32px;height:32px;display:grid;place-items:center}.chat-compose a:hover{background:var(--orange)}
.comparison-window{overflow:hidden;border-radius:20px;background:#FFFFFF;box-shadow:var(--shadow);border:1px solid #FFFFFF}.comparison-stage{position:relative;height:430px;background:#FFFFFF;isolation:isolate}.compare-art{position:absolute;inset:0;padding:30px 45px;overflow:hidden}.concept-logo{font:800 20px var(--display);letter-spacing:-1px;position:relative;z-index:1}.concept-nav{position:absolute;right:40px;top:39px;font:7px var(--mono);letter-spacing:.6px}.concept-copy{position:absolute;left:8%;top:26%;z-index:2}.concept-copy>span:first-child{font:8px var(--mono);letter-spacing:1px}.concept-copy h3{font-size:54px;font-weight:600;letter-spacing:-2px;margin:15px 0}.concept-copy p{font-size:13px}.concept-button{display:inline-block;margin-top:23px;font-size:11px;border:1px solid currentColor;border-radius:5px;padding:8px 15px}.concept-version{position:absolute;bottom:22px;left:40px;font:7px var(--mono);letter-spacing:1px}.compare-before{background:#FFFFFF;color:#535353}.compare-before .concept-copy{top:33%}.compare-before .concept-logo{font:700 15px var(--body);letter-spacing:2px}.compare-before h3{font-family:var(--body);font-weight:400}.plain-vase{position:absolute;right:15%;top:30%;width:135px;height:208px;border-radius:45% 45% 30% 30%;background:linear-gradient(90deg,#C4C4C4,#FFFFFF 40%,#C4C4C4);box-shadow:20px 26px 20px -13px #91919144}.compare-after{background:#FFFFFF;color:#303030;clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}.compare-after .concept-logo{font-size:31px;letter-spacing:-1.8px}.concept-logo>span{color:var(--orange);font-weight:400;margin-left:3px}.compare-after h3{font-weight:800;font-size:86px;line-height:.83;letter-spacing:-5px;margin-top:16px}.compare-after h3 em{font-weight:600;color:var(--orange)}.compare-after .concept-button{border-radius:30px;background:#303030;color:#FFFFFF;border-color:#303030}.sculpture{position:absolute;right:11%;top:21%;width:225px;height:290px}.sculpture i{position:absolute;left:10px;top:10px;width:160px;height:220px;border:35px solid #C4C4C4;border-bottom:0;border-radius:100px 100px 0 0;transform:rotate(-12deg);box-shadow:20px 18px 16px -10px #53535333}.sculpture b{position:absolute;bottom:19px;right:10px;width:115px;height:115px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#C4C4C4,#919191 55%,#535353);box-shadow:18px 14px 13px -8px #91919155}.sculpture>span{position:absolute;top:-5px;right:-12px;font:75px var(--body);color:var(--orange);transform:rotate(-9deg)}.compare-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--reveal);width:2px;background:#F1EB1C;pointer-events:none}.compare-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;border:2px solid #F1EB1C;box-shadow:0 3px 9px #30303033;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;color:#535353;font-size:20px}.comparison-control{padding:21px 30px 19px}.comparison-control label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:10px}.comparison-control input{width:100%;display:block;accent-color:var(--orange);cursor:ew-resize;height:22px;margin:0}.comparison-control p{display:flex;justify-content:space-between;font:8px var(--mono);color:#535353;margin-top:12px;gap:15px}.comparison-control input:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.planner-card{padding:30px;border-radius:25px}.plan-switch{display:grid;grid-template-columns:1fr 1fr;background:#FFFFFF;padding:5px;border-radius:40px;max-width:630px;margin:0 auto 28px;gap:4px}.plan-switch button{border:0;padding:13px 20px;border-radius:30px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:transparent;font-size:13px;font-weight:600;transition:background .2s,color .2s}.plan-switch button[aria-pressed=true]{background:var(--ink);color:white;box-shadow:0 3px 7px #1D1D1D20}.plan-switch button:not([aria-pressed=true]):hover{background:#FFFFFF}.plan-switch button span{font-size:20px}.plan-overview{background:#FFFFFF;border-radius:16px;padding:35px;display:grid;grid-template-columns:1.4fr 1fr;gap:60px}.plan-overview .eyebrow{font-size:10px;letter-spacing:1px}.plan-overview h3{font-size:60px;line-height:.95;letter-spacing:-3px;font-weight:800;margin:25px 0 20px}.plan-overview h3 em{color:#535353}.plan-overview p{max-width:430px;min-height:72px;font-size:14px;color:#535353;line-height:1.7}.plan-note{align-self:center;justify-self:center;position:relative;background:#FFFFFF;padding:25px 28px;max-width:285px;width:100%;transform:rotate(5deg);box-shadow:9px 14px 0 #53535310;border-radius:3px}.plan-note .eyebrow{font-size:9px;display:block;color:#535353}.plan-note strong{display:block;font:700 36px/.98 var(--display);letter-spacing:-1.7px;margin:25px 0 20px}.plan-note>span:last-of-type{font-size:12px;line-height:1.8;color:#535353}.plan-note>i{position:absolute;right:18px;bottom:13px;font:53px var(--body);color:var(--orange)}.plan-features{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;padding:30px 10px;border-bottom:1px solid var(--line);font-size:12px}.plan-features span::first-letter{color:var(--orange)}.planner-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 10px 0}.planner-bottom .eyebrow{font-size:10px}.planner-bottom p{font-size:12px;color:var(--muted);margin-top:7px}.planner-bottom .button{flex-shrink:0}
.scribble{display:block;width:172px;height:60px;margin:-7px 0 14px;transform:rotate(-6deg)}.hw{width:100%;height:100%;overflow:visible}.js-ready .scribble .hw-ink{stroke-dasharray:1;stroke-dashoffset:1}.js-ready .scribble.writing .hw-ink{animation:write-ink 1.7s ease forwards}@keyframes write-ink{to{stroke-dashoffset:0}}
.play-canvas{height:430px;border:1px solid #FFFFFFc9;border-radius:20px;background:radial-gradient(#91919145 1px,transparent 1px) 0 0/20px 20px,#FFFFFFd9;position:relative;overflow:hidden;box-shadow:var(--shadow)}.play-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #FFFFFF;background:#FFFFFFb3}.play-toolbar .eyebrow{font-size:10px;color:#919191}.play-toolbar button{border:1px solid #FFFFFF;background:white;border-radius:7px;padding:5px 10px;font:9px var(--mono)}.play-toolbar button:hover{border-color:var(--orange);color:var(--orange)}.canvas-cross{position:absolute;color:#919191;font-size:20px;line-height:1;pointer-events:none}.cross-one{top:75px;left:22px}.cross-two{top:75px;right:22px}.cross-three{bottom:25px;left:22px}.cross-four{bottom:25px;right:22px}.play-object{position:absolute;border:0;cursor:grab;touch-action:none;user-select:none;transition:box-shadow .2s;transform:rotate(var(--angle,0deg));left:var(--x);top:var(--y)}.play-object:active,.play-object.dragging{cursor:grabbing;z-index:5}.play-object:focus-visible{outline:2px solid var(--blue);outline-offset:8px;z-index:6}.play-object.selected{outline:2px solid var(--blue);outline-offset:8px;z-index:6}.play-object.selected::after,.play-object:focus-visible::after{content:"";position:absolute;inset:-8px;pointer-events:none;background:radial-gradient(circle,var(--blue) 0 3.4px,#FFFFFF 3.4px 4.6px,transparent 4.6px) 0 0/9px 9px,radial-gradient(circle,var(--blue) 0 3.4px,#FFFFFF 3.4px 4.6px,transparent 4.6px) 100% 0/9px 9px,radial-gradient(circle,var(--blue) 0 3.4px,#FFFFFF 3.4px 4.6px,transparent 4.6px) 0 100%/9px 9px,radial-gradient(circle,var(--blue) 0 3.4px,#FFFFFF 3.4px 4.6px,transparent 4.6px) 100% 100%/9px 9px;background-repeat:no-repeat}.play-object.dragging{outline:2px solid var(--blue);outline-offset:8px}.play-flower{left:13%;top:25%;width:140px;height:140px;font:170px/.7 var(--body);background:transparent;color:var(--orange);--angle:-14deg;padding:0}.play-note{left:33%;top:21%;background:#FFFFFF;width:180px;height:210px;text-align:left;padding:20px;box-shadow:8px 12px 0 #53535312;--angle:8deg;border-radius:2px}.play-note>span{font:9px var(--mono);color:#535353}.play-note strong{font:700 39px/.9 var(--display);letter-spacing:-1.8px;display:block;margin:15px 0}.play-note strong em{color:var(--orange)}.play-note small{font:6px var(--mono)}.play-disc{left:60%;top:36%;width:165px;height:165px;border-radius:50%;background:#535353;color:#FFFFFF;--angle:-13deg;padding:30px;box-shadow:8px 10px 0 #53535312}.play-disc>span{font:800 27px/.95 var(--display);letter-spacing:-1px}.play-disc>b{position:absolute;right:27px;bottom:20px;font-size:27px}.play-label{left:22%;top:67%;background:#FFFFFF;color:#535353;border:1px solid #C4C4C4;outline:4px solid #FFFFFF;border-radius:30px;font:10px var(--mono);padding:12px 18px;--angle:-8deg}.canvas-hint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font:7px var(--mono);letter-spacing:.8px;color:#919191;white-space:nowrap;pointer-events:none}.play-status{font:9px var(--mono);text-align:center;color:#535353;margin-top:18px;min-height:16px}
.studio-footer{margin:0 0 0;background:radial-gradient(#30303066 1px,transparent 1.5px) 0 0/24px 24px,#0E0E0E;color:#FFFFFF;border-radius:36px 36px 0 0;padding:23px 27px 0;overflow:hidden;position:relative}.footer-topline{display:flex;align-items:center;justify-content:space-between}.footer-topline>span{display:flex;align-items:center;gap:10px;font:8px var(--mono);font-weight:700;letter-spacing:.8px;color:#C4C4C4}.footer-topline .mini-mark{font-size:19px;line-height:21px;background:transparent;display:inline-block;color:white}.footer-up{display:grid;place-items:center;width:43px;height:43px;border:1px solid #FFFFFF2e;border-radius:50%;font-size:22px;transition:background .2s,transform .2s}.footer-up:hover{background:var(--orange);transform:translateY(-3px)}.footer-content{max-width:1160px;margin:10px auto 58px;display:grid;grid-template-columns:1.65fr 1fr;gap:55px}.footer-invite>.eyebrow{color:#F1EB1C;font-size:9px;letter-spacing:1.5px}.footer-big-link{display:block;font:800 clamp(30px,4vw,59px)/1.06 var(--display);letter-spacing:-.065em;margin:17px 0 25px;white-space:nowrap}.footer-big-link>span{font:36px var(--body);color:var(--orange);display:inline-block;margin-left:13px;transition:transform .2s}.footer-big-link:hover>span{transform:translate(4px,-4px)}.footer-invite>div{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.footer-invite .button{font-size:12px;min-height:42px;padding:10px 18px}.footer-available{font:8px var(--mono);font-weight:700;color:#C4C4C4;display:flex;align-items:center;gap:8px}.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.footer-columns h3{font:700 8px var(--mono);letter-spacing:1px;color:#C4C4C4;margin-bottom:18px;white-space:nowrap}.footer-columns a{display:block;color:#FFFFFF;font-size:12px;margin-bottom:9px;transition:color .15s,transform .15s}.footer-columns a:hover{color:#F1EB1C;transform:translateX(3px)}.footer-scale{height:13px;margin-inline:-27px;border-top:1px solid #C4C4C421;background:repeating-linear-gradient(90deg,transparent 0 23px,#C4C4C429 23px 24px) top/100% 9px no-repeat}.footer-meta{max-width:1160px;margin:auto;display:flex;justify-content:space-between;gap:20px;padding:18px 0 23px;color:#C4C4C4;font:700 8px var(--mono);letter-spacing:.2px}.footer-meta>span{display:flex;align-items:center;gap:7px}.file-dot{width:8px;height:8px;display:inline-block;background:var(--orange);border-radius:3px}.canvas-cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;opacity:0;display:none}.canvas-cursor.visible{opacity:1}.canvas-cursor>span{position:absolute;top:19px;left:13px;font:700 8px var(--mono);color:white;background:#F1EB1C;padding:3px 7px;border-radius:3px;white-space:nowrap;box-shadow:0 3px 6px #53535320}.canvas-cursor svg{display:block}
@media(hover:hover) and (pointer:fine){.canvas-cursor{display:block}}
@media(max-width:1100px){.hero h1{font-size:8.4vw}.hero-heading{padding:14px 20px 18px}.hero-sticker{right:3%;width:96px;height:96px}.hero-intro{font-size:8px}.hero{min-height:570px}.footer-content{grid-template-columns:1.2fr 1fr;gap:30px}.footer-big-link{font-size:42px}.footer-columns{gap:18px}.footer-invite>div{gap:14px}.plan-overview{gap:30px}.plan-overview h3{font-size:53px}.plan-note{padding:23px}.planner-bottom .eyebrow{font-size:9px}.concept-copy h3{font-size:46px}.compare-after h3{font-size:76px}.sculpture{right:8%}.specialties{font-size:9px}}
@media(max-width:760px){.hero{min-height:510px;padding-top:25px}.hero-heading{padding:12px 10px 16px}.hero h1{font-size:8.8vw;letter-spacing:-.065em;line-height:1.08}.hero-intro{font-size:6px;letter-spacing:.4px;margin-bottom:30px}.hero-copy{margin-top:35px}.hero-bottom{font-size:6px;letter-spacing:.3px;margin-top:48px}.hero-bottom p{max-width:128px}.hero .frame-label{font-size:7px}.dimension{font-size:6px}.section-heading h2{font-size:34px;letter-spacing:-.055em}.handwritten{font-size:18px}.card-signoff .eyebrow{font-size:8px}.service-top .eyebrow{font-size:10px}.project-footer h3{font-size:14px}.project-footer{flex-wrap:wrap}.project-image .image-caption{font-size:5px}.specialties{font-size:8px}.chat-thread{padding:12px 18px 20px}.chat-window .window-bar{font-size:7px}.chat-preview{font-size:5px;letter-spacing:0}.chat-message{grid-template-columns:30px 1fr;gap:10px}.chat-avatar{width:30px;height:30px;border-radius:9px;font-size:22px}.chat-message h3{font-size:12px;gap:7px}.chat-message h3 small{font-size:6px}.chat-message p{font-size:13px;line-height:1.7}.chat-divider{font-size:6px;gap:10px}.chat-file{font-size:8px}.chat-compose{margin:0 16px 18px;font-size:11px}.comparison-stage{height:410px}.compare-art{padding:22px}.concept-logo{font-size:17px}.concept-nav{display:none}.concept-copy{top:23%;left:8%}.concept-copy h3{font-size:34px}.concept-copy>span:first-child{font-size:6px;letter-spacing:.3px}.concept-copy p{font-size:10px}.concept-button{font-size:9px;padding:6px 10px}.concept-version{left:22px;font-size:5px;bottom:19px}.compare-before .concept-copy{top:28%}.compare-after .concept-logo{font-size:24px}.compare-after h3{font-size:59px;letter-spacing:-3px}.compare-after .concept-copy{z-index:2}.plain-vase{width:76px;height:116px;right:13%;top:auto;bottom:34px}.sculpture{width:115px;height:150px;right:4%;top:auto;bottom:27px}.sculpture i{width:77px;height:111px;border-width:18px;left:0;top:0}.sculpture b{width:60px;height:60px;right:0;bottom:11px}.sculpture>span{font-size:40px;right:-4px;top:0}.compare-divider>span{width:33px;height:33px;font-size:18px}.comparison-control{padding:18px}.comparison-control label{font-size:10px}.comparison-control p{font-size:6px;gap:14px}.comparison-control p>span{max-width:95px;text-align:right}.planner-card{padding:16px;border-radius:20px}.plan-switch{margin-bottom:16px;gap:0;padding:4px}.plan-switch button{font-size:10px;padding:10px 11px;gap:4px}.plan-switch button>span{font-size:16px}.plan-overview{padding:23px;grid-template-columns:1fr;gap:30px}.plan-overview h3{font-size:45px;letter-spacing:-2px;margin:20px 0}.plan-overview .eyebrow{font-size:10px;letter-spacing:.5px}.plan-overview p{font-size:13px;min-height:110px}.plan-note{max-width:235px;transform:rotate(4deg);padding:21px;margin-bottom:10px}.plan-note strong{font-size:33px}.plan-features{grid-template-columns:1fr 1fr;gap:15px;font-size:10px;padding:25px 4px}.planner-bottom{align-items:start;flex-direction:column;gap:20px;padding:23px 4px 6px}.planner-bottom .eyebrow{font-size:10px}.planner-bottom p{font-size:11px}.planner-bottom .button{width:100%;font-size:12px}.scribble{width:143px;height:49px;margin-bottom:12px}.faq h2{font-size:37px}.play-canvas{height:400px}.play-toolbar{padding:14px 13px}.play-toolbar .eyebrow{font-size:9px}.play-toolbar button{font-size:7px}.play-flower{width:88px;height:88px;font-size:109px}.play-note{width:127px;height:162px;padding:16px}.play-note strong{font-size:29px;letter-spacing:-1.4px}.play-note>span{font-size:7px}.play-note small{font-size:4px}.play-disc{width:104px;height:104px;padding:20px}.play-disc>span{font-size:18px}.play-disc>b{font-size:18px;right:19px;bottom:9px}.play-label{font-size:7px;padding:9px 12px}.canvas-hint{font-size:5px;letter-spacing:.4px;bottom:17px}.play-status{font-size:7px}.contact h2{font-size:41px;letter-spacing:-2.2px}.studio-footer{border-radius:25px 25px 0 0;padding:18px 18px 0}.footer-topline>span{font-size:6px}.footer-up{width:35px;height:35px;font-size:18px}.footer-content{display:block;margin:25px 6px 39px}.footer-invite>.eyebrow{font-size:9px;letter-spacing:1px}.footer-big-link{font-size:39px;letter-spacing:-2.2px;margin:15px 0 21px}.footer-big-link>span{font-size:25px;margin-left:7px}.footer-invite>div{gap:15px}.footer-invite .button{font-size:11px;min-height:40px}.footer-available{font-size:6px;gap:6px}.footer-columns{margin-top:39px;gap:15px}.footer-columns h3{font-size:6px;margin-bottom:14px;letter-spacing:.7px}.footer-columns a{font-size:11px;margin-bottom:10px}.footer-scale{margin-inline:-18px}.footer-meta{flex-wrap:wrap;gap:12px;font-size:6px;padding:16px 5px 22px}.footer-meta>span:last-child{flex-basis:100%;font-size:5px}.canvas-cursor{display:none}}
@media(max-width:380px){.hero{min-height:480px}.hero h1{font-size:8.55vw}.hero-intro{font-size:5px}.hero-heading{padding-inline:8px}.section-heading h2{font-size:29px}.hero-bottom{font-size:5px}.ruler-brand{font-size:6px}.ruler-live{font-size:6px}.plan-switch button{font-size:8px}.footer-big-link{font-size:32px}.footer-available{font-size:5px}.footer-invite .button{font-size:10px}.footer-columns h3{font-size:5px}.footer-columns a{font-size:10px}.footer-content{margin-inline:0}.plan-overview h3{font-size:39px}.service-top .eyebrow{font-size:8px}}
.compare-before{z-index:0}.compare-after{z-index:1}
.sky-track{position:absolute;left:0;top:0;bottom:0;width:200%;display:flex;animation:cloud-marquee var(--cloud-duration,150s) linear infinite;will-change:transform}.sky-panel{position:relative;flex:0 0 50%;height:100%}@keyframes cloud-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}.clouds-paused .sky-track{animation-play-state:paused}
.section-scribble{width:var(--scribble-width,320px);max-width:100%;height:54px;margin:0 0 15px;transform:rotate(-3deg)}.section-heading .scribble,.contact>.scribble{margin-inline:auto}.explorations .section-top .scribble{margin-left:0}.section-scribble .hw{overflow:visible}.js-ready .section-scribble.writing .hw-ink{animation-duration:2.2s}
.section-top>div{min-width:0;max-width:100%}
.compare-divider{pointer-events:auto;width:44px;margin-left:-21px;background:transparent;touch-action:none;cursor:ew-resize}.compare-divider:before{content:'';position:absolute;top:0;bottom:0;left:21px;width:2px;background:#F1EB1C}.compare-divider>span{pointer-events:none}
.footer-tools{display:flex;align-items:center;gap:16px}.footer-tools button{border:1px solid #C4C4C440;color:#FFFFFF;background:#1D1D1D;border-radius:30px;padding:8px 12px;font:8px var(--mono);cursor:pointer}.footer-tools button:hover{border-color:#F1EB1C;color:white}.footer-tools button:disabled{cursor:default;opacity:.7}
@media(max-width:760px){.section-scribble{height:46px;margin-bottom:13px}.footer-tools{gap:9px}.footer-tools button{font-size:6px;padding:7px 9px}.section-heading .section-scribble{max-width:calc(100% - 16px)}}
@media(prefers-reduced-motion:reduce){.sky-track{animation:none;will-change:auto}.js-ready .scribble .hw-ink{stroke-dashoffset:0}.footer-tools button{transition:none}}
.arriving{animation:canvas-arrival .45s cubic-bezier(.2,.7,.2,1)}@keyframes canvas-arrival{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.service-card:hover{outline:1px solid #F1EB1C;outline-offset:4px}.note-card:hover{border-color:#F1EB1C}}
@media(max-width:760px){.hero h1{font-size:11.2vw}}
@media(max-width:380px){.hero h1{font-size:10.9vw}}
@media(prefers-reduced-motion:reduce){.js-ready .scribble .hw-ink{stroke-dashoffset:0}.canvas-cursor{display:none!important}.button:hover>span,.project-card:hover,.mini-project:hover img{transform:none}.arriving{animation:none}}

/* USER SETTINGS: lower duration = faster clouds (90s fast, 150s gentle, 280s slow). */
:root{--cloud-duration:80s;--heading-tracking:-.012em;--footer-tracking:-.012em}
.scribble,.section-scribble,.sticky-note{transform:none}
.scribble .hw,.scribble .hw-ink{transform:none}
h1,h2,h3,.hero h1,.section-heading h2,.section-top h2,.explorations .section-top h2,.faq h2,.contact h2,.statement h3,.service-card h3,.service-card h3 span,.note-card h3,.plan-overview h3,.plan-note strong,.concept-copy h3,.footer-big-link{letter-spacing:var(--heading-tracking)}
.hero h1{font-size:clamp(52px,7.8vw,110px)}
.studio-footer{padding-bottom:0}
.footer-content,.footer-wordmark,.footer-scale,.footer-meta{width:100%;max-width:1160px;margin-left:auto;margin-right:auto}
.footer-content{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:45px;margin-top:16px;margin-bottom:6px}
.footer-invite,.footer-columns{min-width:0}.footer-big-link{font-size:clamp(34px,4.2vw,59px);letter-spacing:-.03em}
.footer-wordmark{display:block;text-align:left;font-size:clamp(52px,13.9vw,198px);font-weight:800;letter-spacing:var(--footer-tracking);line-height:1.15;white-space:nowrap;padding:0 0 12px}
.footer-wordmark>span{display:inline;color:#FFFFFF;transition:color .2s}.footer-wordmark>span:first-child{color:var(--orange)}.footer-wordmark:hover>span{color:#919191}.footer-wordmark>span:hover{color:var(--orange)}
.footer-scale{margin-top:0;height:14px}.footer-meta{padding-top:16px;padding-bottom:25px;align-items:center}.footer-meta>span:last-child{justify-content:flex-end;text-align:right}.footer-tools{gap:9px;flex-wrap:wrap;justify-content:flex-end}
.canvas-cursor{z-index:2000}.canvas-cursor svg{overflow:visible}.canvas-cursor>span{top:19px;left:13px}
@media(hover:hover) and (pointer:fine){html.cursor-active,html.cursor-active *{cursor:none!important}html.cursor-active .canvas-cursor{display:block!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Reviews: the profile metrics are sourced; each sample quote is explicitly marked. */
.reviews .section-heading>.eyebrow{display:block;margin-bottom:19px;font-size:11px;letter-spacing:1.6px}
.review-proof{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;align-items:center;gap:20px;background:#FFFFFF;border:1px solid #FFFFFFb3;border-radius:18px;padding:26px 30px;box-shadow:var(--shadow)}
.upwork-source{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.upwork-source img{width:85px;height:45px;object-fit:contain;}.upwork-source>span{display:block;font:10px var(--mono);color:#535353;width:100%}
.review-proof>div{border-left:1px solid #FFFFFF;padding-left:23px}.review-proof strong{display:block;font:700 40px/1 var(--display);letter-spacing:-.025em}.review-proof strong>span{font-size:18px;font-weight:400;margin-left:3px}.review-proof p{font-size:13px;color:#535353;margin-top:8px}.review-proof .stars{font-size:14px;margin-top:6px;display:block}.review-proof .rising-talent{font-size:23px;line-height:1.15;color:var(--orange)}
.stars{color:var(--orange);letter-spacing:2px}.review-demo-note{font-size:12px;color:#535353;margin:24px 0 16px;text-align:center}.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.review-card{padding:25px;background:#FFFFFF;border-radius:18px;box-shadow:var(--shadow);border:1px solid #FFFFFFcc;display:flex;flex-direction:column;min-width:0}.review-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.review-card .stars{font-size:14px}.demo-badge{font:9px var(--mono);border:1px solid #FFFFFF;border-radius:20px;padding:6px 11px;color:#535353;white-space:nowrap}.review-card blockquote{font:500 18px/1.55 var(--body);margin:24px 0 25px;flex:1}.review-person{display:flex;align-items:center;gap:10px}.review-avatar{display:grid;place-items:center;width:40px;height:40px;background:#FFFFFF;color:#535353;border-radius:50%;font:11px var(--mono);flex-shrink:0}.review-person h3{font-size:15px;font-weight:700;margin:0 0 6px}.review-person>div>span{font:9px var(--mono);color:#919191;line-height:1.5}.review-category{border-top:1px solid #FFFFFF;margin-top:22px;padding-top:14px;font-size:11px;color:#535353}.review-source-note{display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px var(--mono);color:#535353;margin-top:21px}.review-source-note a{border-bottom:1px solid #919191;padding-bottom:4px}

/* Short first-visit loader: no image, video, or framework dependency. */
.intro-screen{display:none;position:fixed;inset:0;z-index:1000;background:linear-gradient(#FFFFFF66 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,#FFFFFF66 1px,transparent 1px) 0 0/34px 34px,#FFFFFF;align-items:center;justify-content:center;color:var(--ink)}
.intro-active .intro-screen{display:flex;animation:intro-failsafe 0s 3s forwards}.intro-canvas{width:min(650px,calc(100% - 52px));text-align:center}.intro-selection{position:relative;border:1px solid #F1EB1C;padding:26px 20px 30px}.intro-wordmark{font:800 clamp(30px,5.8vw,77px)/1.2 var(--display);letter-spacing:-.03em;white-space:nowrap}.intro-wordmark>b{color:var(--orange);font-weight:800}.intro-dimensions{display:inline-block;margin-top:8px;background:#F1EB1C;color:white;border-radius:3px;font:700 9px var(--mono);padding:3px 8px}.intro-progress{height:3px;width:190px;max-width:65%;background:#FFFFFF;margin:8px auto 0;border-radius:3px;overflow:hidden}.intro-progress>span{display:block;height:100%;background:#F1EB1C;transform-origin:left;animation:intro-progress 1.2s cubic-bezier(.2,.7,.2,1) both}.intro-caption{font:7px var(--mono);letter-spacing:1.3px;color:#535353;display:block;margin-top:15px}#skip-intro{position:absolute;right:25px;bottom:24px;border:1px solid #C4C4C4;background:#FFFFFF;border-radius:25px;color:#535353;padding:9px 13px;font:9px var(--mono)}@keyframes intro-progress{from{transform:scaleX(.05)}to{transform:scaleX(1)}}@keyframes intro-failsafe{to{visibility:hidden;pointer-events:none}}

/* Opt-in ambient sound. Audio starts only after pressing the control. */
.sound-dock{position:fixed;left:18px;bottom:18px;z-index:60;display:none;align-items:center;gap:12px;background:#FFFFFF;border:1px solid #FFFFFF;border-radius:35px;padding:4px 14px 4px 5px;box-shadow:0 5px 22px #30303020}.js-ready .sound-dock{display:flex}.sound-dock button{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:9px 10px;border-radius:25px;color:#303030;font:9px var(--mono);min-height:35px}.sound-dock button:hover{background:#FFFFFF}.sound-dock button:disabled{opacity:.65}.sound-bars{display:flex;align-items:center;gap:3px;height:15px;width:16px}.sound-bars i{display:block;width:3px;height:6px;background:#F1EB1C;border-radius:2px}.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:9px}.is-playing .sound-bars i{animation:sound-level .85s ease-in-out infinite alternate}.is-playing .sound-bars i:nth-child(2){animation-delay:-.25s}.is-playing .sound-bars i:nth-child(3){animation-delay:-.5s}.music-volume{display:flex;align-items:center}.music-volume input{width:58px;height:22px;margin:0;accent-color:#F1EB1C}.music-volume input:focus-visible{outline:2px solid #F1EB1C;outline-offset:3px}@keyframes sound-level{to{transform:scaleY(.4)}}
@media(min-width:1101px){.footer-meta>span:first-child{padding-left:210px}}@media(max-width:1100px){.footer-content{gap:28px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.footer-big-link{font-size:40px}.review-proof{gap:14px;padding:24px}.review-proof>div{padding-left:17px}.review-proof strong{font-size:34px}.review-proof .rising-talent{font-size:20px}.review-card{padding:20px}.review-card blockquote{font-size:16px}}
@media(max-width:760px){.hero h1{font-size:10.6vw}.section-heading h2,.faq h2{letter-spacing:-.02em}.footer-content{display:block;margin:25px auto 38px}.footer-big-link{font-size:36px;letter-spacing:-.025em;white-space:normal}.footer-wordmark{font-size:13.1vw;letter-spacing:-.008em;padding-bottom:15px}.footer-scale{max-width:100%}.footer-meta{padding-bottom:72px}.footer-meta>span:last-child{justify-content:flex-start;text-align:left}.footer-columns{gap:14px}.footer-columns h3{font-size:6px}.footer-tools{gap:6px}.footer-tools button{font-size:6px;padding:7px 8px}.review-proof{grid-template-columns:1fr 1fr;gap:24px 14px;padding:24px}.review-proof>div{padding-left:15px}.review-proof>div:nth-child(3){border-left:0;padding-left:0}.upwork-source img{width:76px;height:36px}.upwork-source>span{font-size:9px}.review-proof strong{font-size:34px}.review-proof .rising-talent{font-size:18px}.review-proof p{font-size:11px}.review-grid{grid-template-columns:1fr;gap:14px}.review-card{padding:25px}.review-card blockquote{font-size:18px;margin-top:21px}.review-person>div>span{font-size:8px}.review-demo-note{font-size:11px;line-height:1.7;margin-inline:8px}.review-source-note{flex-direction:column;align-items:flex-start;font-size:9px;gap:12px}.reviews .section-heading>.eyebrow{font-size:9px}.intro-wordmark{font-size:7.4vw}.intro-selection{padding:24px 10px}.intro-caption{font-size:6px}.sound-dock{left:12px;bottom:12px;gap:5px;padding-right:11px}.sound-dock button{font-size:8px;gap:8px;padding:8px}.music-volume input{width:47px}}
@media(max-width:380px){.hero h1{font-size:10.2vw}.footer-big-link{font-size:30px}.footer-wordmark{font-size:13.1vw}.footer-topline>span{font-size:5px;gap:5px}.footer-topline .mini-mark{width:15px;font-size:16px}.footer-tools{gap:4px}.footer-tools button{font-size:5px;padding:6px}.footer-up{width:30px;height:30px}.section-heading h2{font-size:28px}.contact h2{font-size:36px}.intro-dimensions{font-size:7px}}
@media(prefers-reduced-motion:reduce){.intro-screen{display:none!important}.sound-bars i{animation:none!important}}

/* Specialties marquee: one transform animation, duplicated group for a seamless loop. */
.specialties{display:block;overflow:hidden;padding-inline:0;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#060606 9%,#060606 91%,transparent);mask-image:linear-gradient(90deg,transparent,#060606 9%,#060606 91%,transparent)}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee var(--marquee-duration,42s) linear infinite}
.marquee-group{display:flex;align-items:center;gap:38px;padding-right:38px;flex:none}
.specialties span{white-space:nowrap;transition:color .18s}
.specialties:hover .marquee-track{animation-play-state:paused}
.specialties span:hover{color:var(--orange)}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@media(max-width:760px){.marquee-group{gap:23px;padding-right:23px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* FAQ frames: each question is its own editor frame with a name tab. */
.faq-item{position:relative;margin-top:15px}
.faq-frame{position:absolute;top:-15px;left:12px;display:inline-flex;align-items:center;gap:6px;
 background:#FFFFFF;color:#535353;border-radius:6px 6px 0 0;padding:5px 10px 4px;font:8px var(--mono);letter-spacing:.6px;transition:background .18s,color .18s}
.faq-frame::before{content:"";width:6px;height:6px;border:1px solid currentColor;border-radius:1px}
.faq-item[open]>summary .faq-frame,.faq-item>summary:hover .faq-frame{background:var(--blue);color:#FFFFFF}
.faq-item>summary{list-style:none;cursor:pointer;background:var(--paper);border:1px solid #FFFFFF;border-radius:14px;
 padding:19px 22px;box-shadow:var(--shadow);transition:border-color .18s,box-shadow .18s,transform .18s}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary:hover{transform:translateY(-2px);border-color:#C4C4C4;box-shadow:0 10px 26px #5353531f}
.faq-item[open]>summary{border-color:var(--blue);border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none}
.faq-row{display:flex;align-items:center;gap:16px}
.faq-number{font:700 11px var(--mono);color:var(--blue);flex:none}
.faq-item[open] .faq-number{color:var(--orange)}
.faq-question{flex:1;font:700 16px/1.4 var(--body);letter-spacing:-.01em}
.faq-toggle{position:relative;width:16px;height:16px;flex:none}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;left:50%;top:50%;background:var(--orange);border-radius:2px;transform:translate(-50%,-50%);transition:transform .22s,opacity .22s}
.faq-toggle::before{width:15px;height:2px}
.faq-toggle::after{width:2px;height:15px}
.faq-item[open] .faq-toggle::before{background:var(--blue)}
.faq-item[open] .faq-toggle::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.faq-answer{display:flex;gap:16px;background:var(--paper);border:1px solid var(--blue);border-top:0;
 border-radius:0 0 14px 14px;padding:20px 22px;animation:faq-open .22s ease}
.faq-answer-label{font:8px var(--mono);color:#919191;letter-spacing:.8px;padding-top:4px;flex:none;width:52px}
.faq-answer p{margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
@keyframes faq-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:760px){.faq-question{font-size:14px}.faq-row{gap:11px}.faq-answer{gap:0;flex-direction:column;padding:17px 18px}
 .faq-answer-label{width:auto;padding-top:0;padding-bottom:8px}.faq-item>summary{padding:17px 18px}.faq-answer p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.faq-answer{animation:none}.faq-item>summary:hover{transform:none}}

/* Signed-by mark beside the handwritten signature. */
.signed-by{display:flex;align-items:center;gap:13px}
.signature-mark{display:block;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;
 box-shadow:0 3px 10px #53535324;transition:transform .25s}
.signature-mark svg{display:block}
.statement:hover .signature-mark{transform:rotate(-8deg) scale(1.06)}
@media(max-width:380px){.signature-mark{width:38px;height:38px}}

/* Footer wordmark: each letter lifts on hover, staying on the same baseline. */
.footer-wordmark>span{display:inline-block;color:#FFFFFF;transition:transform .26s cubic-bezier(.22,1.2,.36,1),color .22s}
.footer-wordmark>span:first-child{color:var(--orange)}
.footer-wordmark:hover>span{color:#919191}
.footer-wordmark>span:hover{color:var(--orange);transform:translateY(-.06em)}

/* Small, consistent hover feedback across the page. */
.review-card{transition:transform .22s,box-shadow .22s}
.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #5353531f}
.review-card:hover .stars{letter-spacing:3.5px;transition:letter-spacing .22s}
.upwork-source img{transition:transform .25s}
.upwork-source:hover img{transform:scale(1.07)}
.service-card{transition:transform .22s,box-shadow .22s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #5353531f}
.service-number{transition:color .2s,transform .2s;display:inline-block}
.service-card:hover .service-number{color:var(--orange);transform:translateY(-2px)}
.footer-columns a{position:relative}
.hero-sticker{transition:transform .3s}
.hero-sticker:hover{transform:rotate(-6deg) scale(1.05)}
.process-steps article{transition:transform .22s}
.process-steps article:hover{transform:translateY(-3px)}
.process-steps article .step-icon{transition:transform .25s}
.process-steps article:hover .step-icon{transform:rotate(20deg) scale(1.15)}
@media(prefers-reduced-motion:reduce){
 .review-card:hover,.service-card:hover,.process-steps article:hover,.footer-wordmark>span:hover,
 .hero-sticker:hover,.statement:hover .signature-mark,.upwork-source:hover img{transform:none}
}

/* ==== night ==== */
/* Dark is the default. Colour rules are scoped to :root:not([data-theme=light]); layout rules apply to both themes. */
/* Night palette. Layout and interactions live in the original stylesheets. */
:root{--star-speed-far:150s;--star-speed-near:85s}
:root:not([data-theme=light]){color-scheme:dark;--ink:#FFFFFF;--muted:#C4C4C4;--orange:#F1EB1C;--blue:#F1EB1C;--paper:#1D1D1D;--line:#303030;--shadow:0 18px 36px -25px #060606bb}
:where(:root:not([data-theme=light])) body{background:#0E0E0E}
:where(:root:not([data-theme=light])) body:before{background:radial-gradient(ellipse at 75% 8%,#53535340,transparent 55%),linear-gradient(155deg,#0E0E0E,#1D1D1D 65%,#0E0E0E)}
:where(:root:not([data-theme=light])) ::selection{background:#F1EB1C;color:#0E0E0E}
.starfield{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}
.star-track{position:absolute;inset:0 auto 0 0;width:calc(100% + 1200px);background-repeat:repeat;background-size:1200px 900px;will-change:transform;animation:star-drift var(--star-speed-far) linear infinite}
:where(:root:not([data-theme=light])) .star-far{background-image:url('../assets/svg/stars-far.svg')}
.star-near{animation-duration:var(--star-speed-near)}
:where(:root:not([data-theme=light])) .star-near{background-image:url('../assets/svg/stars-near.svg')}
@keyframes star-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}
.stars-paused .star-track{animation-play-state:paused}
:where(:root:not([data-theme=light])) .ruler{background:#0E0E0Ef5;border-color:var(--line)}
:where(:root:not([data-theme=light])) .availability{background:#1D1D1D;border-color:#303030;color:#FFFFFF}
:where(:root:not([data-theme=light])) .mini-mark{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .progress-marker{background:#F1EB1C1a}
:where(:root:not([data-theme=light])) nav{box-shadow:0 5px 24px #06060633;border:1px solid var(--line)}
:where(:root:not([data-theme=light])) nav .nav-contact,:where(:root:not([data-theme=light])) .chat-compose a,:where(:root:not([data-theme=light])) .plan-switch button[aria-pressed=true]{background:#535353;color:#FFFFFF}
:where(:root:not([data-theme=light])) nav .nav-contact:hover{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .hero .headline-orange{background:none;color:var(--orange);-webkit-text-fill-color:var(--orange)}
:where(:root:not([data-theme=light])) .hero-heading{border-color:#F1EB1C80}
:where(:root:not([data-theme=light])) .hero-copy,:where(:root:not([data-theme=light])) .contact>p{color:#C4C4C4}
:where(:root:not([data-theme=light])) .dimension,:where(:root:not([data-theme=light])) .file-label,:where(:root:not([data-theme=light])) .note-card>.eyebrow,:where(:root:not([data-theme=light])) .chat-preview,:where(:root:not([data-theme=light])) .chat-message h3 small,:where(:root:not([data-theme=light])) .comparison-control p,:where(:root:not([data-theme=light])) .plan-overview p,:where(:root:not([data-theme=light])) .play-toolbar .eyebrow,:where(:root:not([data-theme=light])) .canvas-hint,:where(:root:not([data-theme=light])) .play-status,:where(:root:not([data-theme=light])) .review-proof p,:where(:root:not([data-theme=light])) .upwork-source>span,:where(:root:not([data-theme=light])) .review-demo-note,:where(:root:not([data-theme=light])) .review-source-note,:where(:root:not([data-theme=light])) .review-category,:where(:root:not([data-theme=light])) .review-person>div>span,:where(:root:not([data-theme=light])) .intro-caption{color:var(--muted)}
:where(:root:not([data-theme=light])) .frame-label,:where(:root:not([data-theme=light])) .designer-tag b,:where(:root:not([data-theme=light])) .intro-dimensions,:where(:root:not([data-theme=light])) .canvas-cursor>span{background:#F1EB1C;color:#1D1D1D}
:where(:root:not([data-theme=light])) .handle{background:#1D1D1D}
:where(:root:not([data-theme=light])) .orange{background:#F1EB1C;color:#1D1D1D}
:where(:root:not([data-theme=light])) .orange:hover{background:#FFFFFF;color:#1D1D1D}
:where(:root:not([data-theme=light])) .outline{border-color:#919191;background:#30303066}
:where(:root:not([data-theme=light])) .outline:hover{background:#303030}
:where(:root:not([data-theme=light])) .hero-sticker,:where(:root:not([data-theme=light])) .sticky-note,:where(:root:not([data-theme=light])) .plan-note,:where(:root:not([data-theme=light])) .play-note{background:#303030;color:#FFFFFF;border-color:#919191}
:where(:root:not([data-theme=light])) .hero-sticker{color:#FFFFFF}
:where(:root:not([data-theme=light])) .round-button:hover{background:#303030}
:where(:root:not([data-theme=light])) .project-card,:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .chat-window,:where(:root:not([data-theme=light])) .process-window,:where(:root:not([data-theme=light])) .comparison-window,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .review-proof{background:var(--paper);border-color:#303030}
:where(:root:not([data-theme=light])) .project-card{border-color:#303030}
:where(:root:not([data-theme=light])) .peach{background:#303030}
:where(:root:not([data-theme=light])) .lilac{background:#303030}
:where(:root:not([data-theme=light])) .green{background:#303030}
:where(:root:not([data-theme=light])) .mini-project>div,:where(:root:not([data-theme=light])) .mini-project:nth-child(2)>div,:where(:root:not([data-theme=light])) .mini-project:nth-child(3)>div,:where(:root:not([data-theme=light])) .mini-project:nth-child(4)>div{background:#1D1D1D;border-color:#303030}
:where(:root:not([data-theme=light])) .project-arrow{background:#1D1D1De6;border-color:#919191;color:#FFFFFF}
:where(:root:not([data-theme=light])) .pill,:where(:root:not([data-theme=light])) .chat-file,:where(:root:not([data-theme=light])) .chat-compose,:where(:root:not([data-theme=light])) .plan-switch,:where(:root:not([data-theme=light])) .play-toolbar button,:where(:root:not([data-theme=light])) .demo-badge,:where(:root:not([data-theme=light])) .review-avatar{background:#1D1D1D;border-color:#303030;color:#C4C4C4}
:where(:root:not([data-theme=light])) .dark-card{background:#0E0E0E;border-color:#303030;color:var(--ink)}
:where(:root:not([data-theme=light])) .pills>span{border-color:#535353}
:where(:root:not([data-theme=light])) .note-card{background:#1D1D1Dcf;border-color:#303030}
:where(:root:not([data-theme=light])) .profile-note{background:#1D1D1D}
:where(:root:not([data-theme=light])) .window-bar,:where(:root:not([data-theme=light])) .play-toolbar{background:#1D1D1D;border-color:var(--line)}
:where(:root:not([data-theme=light])) .window-footer,:where(:root:not([data-theme=light])) .service-card details,:where(:root:not([data-theme=light])) .chat-message,:where(:root:not([data-theme=light])) .chat-compose,:where(:root:not([data-theme=light])) .review-category,:where(:root:not([data-theme=light])) .planner-bottom,:where(:root:not([data-theme=light])) .plan-features{border-color:var(--line)}
:where(:root:not([data-theme=light])) .step-index,:where(:root:not([data-theme=light])) .chat-divider{color:var(--orange)}
:where(:root:not([data-theme=light])) .process-steps{background:radial-gradient(#91919126 1px,transparent 1px) 0 0/18px 18px}
:where(:root:not([data-theme=light])) .chat-thread{background:radial-gradient(#9191911a .8px,transparent 1px) 0 0/20px 20px}
:where(:root:not([data-theme=light])) .chat-avatar{background:#535353;color:white}
:where(:root:not([data-theme=light])) .chat-avatar.client{background:#F1EB1C}
:where(:root:not([data-theme=light])) .chat-file[href]:hover{background:#303030}
:where(:root:not([data-theme=light])) .reaction{background:#303030;border-color:#919191;color:#FFFFFF}
:where(:root:not([data-theme=light])) .reaction[aria-pressed=true]{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .plan-switch button:not([aria-pressed=true]):hover{background:#303030}
:where(:root:not([data-theme=light])) .plan-overview{background:#303030}
:where(:root:not([data-theme=light])) .plan-overview h3 em{color:var(--orange)}
:where(:root:not([data-theme=light])) .plan-note .eyebrow,:where(:root:not([data-theme=light])) .plan-note>span:last-of-type,:where(:root:not([data-theme=light])) .play-note>span{color:#C4C4C4}
:where(:root:not([data-theme=light])) .play-canvas{background:radial-gradient(#91919133 1px,transparent 1px) 0 0/20px 20px,#1D1D1Dee;border-color:#535353}
:where(:root:not([data-theme=light])) .play-label{background:#303030;color:#FFFFFF;border-color:#919191}
:where(:root:not([data-theme=light])) .play-disc{background:#919191;color:#0E0E0E}
:where(:root:not([data-theme=light])) .faq-frame{background:#303030;color:#FFFFFF}
:where(:root:not([data-theme=light])) .faq-item>summary{border-color:#535353}
:where(:root:not([data-theme=light])) .faq-item>summary:hover{border-color:#F1EB1C;box-shadow:0 10px 26px #06060633}
:where(:root:not([data-theme=light])) .intro-screen{background:linear-gradient(#30303033 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,#30303033 1px,transparent 1px) 0 0/34px 34px,#0E0E0E}
:where(:root:not([data-theme=light])) .intro-progress{background:#303030}
:where(:root:not([data-theme=light])) #skip-intro{background:#1D1D1D;border-color:#535353;color:#FFFFFF}
:where(:root:not([data-theme=light])) .sound-dock{background:#1D1D1D;border-color:#535353;box-shadow:0 5px 22px #06060644}
:where(:root:not([data-theme=light])) .sound-dock button{color:#FFFFFF}
:where(:root:not([data-theme=light])) .sound-dock button:hover{background:#303030}
:where(:root:not([data-theme=light])) .studio-footer{background:#060606}
.footer-wordmark{font-size:clamp(40px,11.4vw,161px)}
.intro-wordmark{font-size:clamp(28px,5.2vw,70px)}
.proof-copy{font:500 18px/1.55 var(--body);margin:24px 0 25px;flex:1}
.behance-mark{font-size:42px}
:where(:root:not([data-theme=light])) .behance-mark{color:var(--ink)}
:where(:root:not([data-theme=light])) .brand-art{background:#303030;color:#FFFFFF}
:where(:root:not([data-theme=light])) .book-art{background:#303030}
:where(:root:not([data-theme=light])) .book-object{background:#F1EB1C;color:#1D1D1D}
:where(:root:not([data-theme=light])) .spatial-art{background:#1D1D1D}
.digital-mockup{position:absolute;inset:20px 28px 28px;border-radius:8px;padding:12px 15px;transform:rotate(-5deg)}
:where(:root:not([data-theme=light])) .digital-mockup{border:1px solid #919191;background:#1D1D1D;color:#FFFFFF;box-shadow:10px 12px 0 #1D1D1D}
.digital-mockup>span{display:block;font:8px var(--mono);padding-bottom:8px}
:where(:root:not([data-theme=light])) .digital-mockup>span{border-bottom:1px solid #535353}
.digital-mockup>b{display:block;font:700 28px/.95 var(--display);padding-top:12px}
.digital-mockup>i{display:block;font:7px var(--mono);margin-top:12px}
:where(:root:not([data-theme=light])) .digital-mockup>i{color:var(--orange)}
:where(:root:not([data-theme=light])) .spatial-art>.art-caption{color:#C4C4C4}
/* Artwork within the comparison remains its original color: it is the design being demonstrated. */
:where(:root:not([data-theme=light])) .compare-divider>span{color:#535353}
.signed-by .signature-mark{display:grid;place-items:center;font:800 27px var(--display)}
:where(:root:not([data-theme=light])) .signed-by .signature-mark{background:#303030;color:var(--orange)}
.signature{font-style:italic}
:where(:root:not([data-theme=light])) .signature{color:var(--orange)}
@media(max-width:600px){.footer-wordmark{font-size:10.6vw;letter-spacing:-.025em}.intro-wordmark{font-size:6.4vw}.hero-intro{font-size:8px;letter-spacing:.3px}.review-source-note{flex-wrap:wrap}.header .availability{font-size:8px;border:0}:where(:root:not([data-theme=light])) .header .availability{background:transparent}}
@media(prefers-reduced-motion:reduce){.star-track{animation:none;will-change:auto}}
/* Refined accents and a clear black horizon. */
:where(:root:not([data-theme=light])) body:before{background:radial-gradient(ellipse at 92% 12%,#53535330,transparent 45%),radial-gradient(ellipse at 8% 80%,#53535314,transparent 45%),#0E0E0E}
:where(:root:not([data-theme=light])) .hero .headline-orange{background:linear-gradient(105deg,#F1EB1C 8%,#FFFFFF 48%,#C4C4C4 94%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
:where(:root:not([data-theme=light])) .hero-heading{border-color:#F1EB1C66;box-shadow:0 0 70px -40px #F1EB1C33}
:where(:root:not([data-theme=light])) .hero .dimension{color:#C4C4C4}
:where(:root:not([data-theme=light])) .hero-intro .small-spark{color:#C4C4C4}
:where(:root:not([data-theme=light])) .orange{box-shadow:0 5px 26px #F1EB1C15}
:where(:root:not([data-theme=light])) .orange:hover{box-shadow:0 7px 32px #F1EB1C2b}
:where(:root:not([data-theme=light])) .hero-sticker{outline-color:#919191}
:where(:root:not([data-theme=light])) .status-dot{background:#F1EB1C;box-shadow:0 0 0 3px #F1EB1C14}
:where(:root:not([data-theme=light])) .progress-marker{background:#F1EB1C13}
:where(:root:not([data-theme=light])) .scroll-cue span{border-color:#91919166}
:where(:root:not([data-theme=light])) .hw-ink{stroke:var(--orange)}
:where(:root:not([data-theme=light])) .sound-bars i{background:var(--orange)}
:where(:root:not([data-theme=light])) .music-volume input{accent-color:var(--orange)}
:where(:root:not([data-theme=light])) .intro-selection,:where(:root:not([data-theme=light])) .compare-divider>span{border-color:var(--blue)}
:where(:root:not([data-theme=light])) .intro-progress>span,:where(:root:not([data-theme=light])) .compare-divider:before{background:var(--blue)}
:where(:root:not([data-theme=light])) .project-card{box-shadow:0 18px 45px -28px #060606bb}
:where(:root:not([data-theme=light])) .project-card:hover,:where(:root:not([data-theme=light])) .mini-project:hover>div{border-color:#F1EB1C;box-shadow:0 16px 44px -26px #F1EB1C5c}
.project-arrow{transition:background .2s,color .2s,transform .2s}
.project-card:hover .project-arrow,.mini-project:hover .project-arrow{transform:rotate(7deg)}
:where(:root:not([data-theme=light])) .project-card:hover .project-arrow,:where(:root:not([data-theme=light])) .mini-project:hover .project-arrow{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .note-card{background-image:radial-gradient(ellipse at 0 0,#F1EB1C09,transparent 70%)}
.service-card{position:relative;overflow:hidden}
.service-card:before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px}
:where(:root:not([data-theme=light])) .service-card:before{background:linear-gradient(90deg,transparent,#F1EB1C80,transparent)}
:where(:root:not([data-theme=light])) .service-card:nth-child(2):before{background:linear-gradient(90deg,transparent,#F1EB1C80,transparent)}
:where(:root:not([data-theme=light])) .tool-row span{background:#1D1D1D;border-color:#535353;color:#C4C4C4}
:where(:root:not([data-theme=light])) .tool-row span:nth-child(2),:where(:root:not([data-theme=light])) .tool-row span:nth-child(4){color:#F1EB1C}
:where(:root:not([data-theme=light])) .tool-row span:nth-child(3){color:#FFFFFF}
:where(:root:not([data-theme=light])) .book-art>i{color:#C4C4C4}
:where(:root:not([data-theme=light])) .play-note strong em{color:#F1EB1C}
:where(:root:not([data-theme=light])) .play-disc{box-shadow:8px 12px 28px #06060633}
:where(:root:not([data-theme=light])) .canvas-cross{color:#919191}
:where(:root:not([data-theme=light])) .chat-avatar.client{color:#1D1D1D}
:where(:root:not([data-theme=light])) .faq-item[open]>summary .faq-frame,:where(:root:not([data-theme=light])) .faq-item>summary:hover .faq-frame{color:#1D1D1D}
.contact{position:relative;isolation:isolate;overflow:hidden}
:where(:root:not([data-theme=light])) .contact{background:radial-gradient(ellipse at 50% 100%,#F1EB1C1c,transparent 65%)}
.contact:before{content:'';position:absolute;z-index:-1;pointer-events:none;width:min(88vw,1040px);height:330px;left:50%;bottom:-270px;transform:translateX(-50%);border-radius:50%}
:where(:root:not([data-theme=light])) .contact:before{border:1px solid #F1EB1C66;box-shadow:0 -16px 65px #F1EB1C10,0 -1px 15px #F1EB1C29}
.studio-footer{position:relative}
:where(:root:not([data-theme=light])) .studio-footer{background:#060606;background-image:none;border-top:1px solid #F1EB1C29}
:where(:root:not([data-theme=light])) .footer-topline>span,:where(:root:not([data-theme=light])) .footer-meta,:where(:root:not([data-theme=light])) .footer-columns h3{color:#C4C4C4}
:where(:root:not([data-theme=light])) .footer-columns a,:where(:root:not([data-theme=light])) .footer-available{color:#C4C4C4}
:where(:root:not([data-theme=light])) .footer-invite>.eyebrow,:where(:root:not([data-theme=light])) .footer-columns a:hover{color:var(--orange)}
:where(:root:not([data-theme=light])) .footer-topline .mini-mark{color:var(--orange)}
:where(:root:not([data-theme=light])) .footer-wordmark:hover>span{color:#535353}
:where(:root:not([data-theme=light])) .footer-wordmark>span:hover{color:var(--orange)}
:where(:root:not([data-theme=light])) .footer-scale{background:repeating-linear-gradient(90deg,transparent 0 23px,#F1EB1C30 23px 24px) top/100% 9px no-repeat}
/* Site palette: yellow is the primary accent; orange is used sparingly. */
:root:not([data-theme=light]){--ink:#FFFFFF;--muted:#C4C4C4;--orange:#F1EB1C;--blue:#F1EB1C;--paper:#060606;--line:#303030}
:where(:root:not([data-theme=light])) body,:where(:root:not([data-theme=light])) body:before{background:#0E0E0E}
:where(:root:not([data-theme=light])) .hero .headline-orange{background:none;-webkit-text-fill-color:#F1EB1C;color:#F1EB1C}
:where(:root:not([data-theme=light])) .hero-intro .small-spark,:where(:root:not([data-theme=light])) .footer-topline .mini-mark{color:#F05D32}
:where(:root:not([data-theme=light])) .status-dot,:where(:root:not([data-theme=light])) .file-dot{background:#F05D32;box-shadow:0 0 0 3px #F05D3214}
:where(:root:not([data-theme=light])) .ruler,:where(:root:not([data-theme=light])) .availability,:where(:root:not([data-theme=light])) .sound-dock,:where(:root:not([data-theme=light])) .window-bar,:where(:root:not([data-theme=light])) .play-toolbar{background:#060606}
:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .review-proof,:where(:root:not([data-theme=light])) .process-window,:where(:root:not([data-theme=light])) .chat-window,:where(:root:not([data-theme=light])) .comparison-window{background-color:#060606}
:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .note-card{background-image:none}
:where(:root:not([data-theme=light])) .note-card,:where(:root:not([data-theme=light])) .profile-note,:where(:root:not([data-theme=light])) .plan-overview,:where(:root:not([data-theme=light])) .play-canvas{background-color:#161616}
:where(:root:not([data-theme=light])) .frame-label,:where(:root:not([data-theme=light])) .designer-tag b,:where(:root:not([data-theme=light])) .intro-dimensions,:where(:root:not([data-theme=light])) .canvas-cursor>span,:where(:root:not([data-theme=light])) .chat-avatar.client{background:#F1EB1C;color:#060606}
:where(:root:not([data-theme=light])) .frame-label,:where(:root:not([data-theme=light])) .hero-heading,:where(:root:not([data-theme=light])) .intro-selection{border-color:#F1EB1C66}
:where(:root:not([data-theme=light])) .orange,:where(:root:not([data-theme=light])) .orange:hover{background:#F1EB1C;color:#060606}
:where(:root:not([data-theme=light])) .hero-sticker,:where(:root:not([data-theme=light])) .sticky-note,:where(:root:not([data-theme=light])) .plan-note,:where(:root:not([data-theme=light])) .play-note{background:#232310;color:#FFFFFF;border-color:#F1EB1C40}
:where(:root:not([data-theme=light])) .plan-note .eyebrow,:where(:root:not([data-theme=light])) .plan-note>span:last-of-type,:where(:root:not([data-theme=light])) .play-note>span{color:#C4C4C4}
:where(:root:not([data-theme=light])) .play-disc{background:#FFFFFF;color:#060606}
:where(:root:not([data-theme=light])) .play-label{background:#F1EB1C;color:#060606;border-color:#F1EB1C}
:where(:root:not([data-theme=light])) .book-object{background:#F1EB1C;color:#060606}
:where(:root:not([data-theme=light])) .brand-art{background:#1D1D1D;color:#F1EB1C}
:where(:root:not([data-theme=light])) .contact{background:radial-gradient(ellipse at 50% 100%,#F1EB1C08,transparent 65%)}
:where(:root:not([data-theme=light])) .contact:before{border-color:#F1EB1C55;box-shadow:0 -16px 65px #F1EB1C08,0 -1px 15px #F1EB1C19}
:where(:root:not([data-theme=light])) .studio-footer{background:#000;background-image:none;border-top-color:#303030}

/* ==== finish ==== */
/* Final interaction layer: the studio's original charcoal / electric yellow palette. */
.ui-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.14em;pointer-events:none;overflow:visible}
.tool-row .ui-icon{width:25px;height:25px}.small-spark .ui-icon,.wave .ui-icon,.contact-spark .ui-icon,.note-symbol .ui-icon{width:1em;height:1em}
.button .ui-icon,.round-button .ui-icon,.project-arrow .ui-icon{width:20px;height:20px}.button{transition:translate .25s,background .2s,box-shadow .2s;translate:var(--mx,0px) var(--my,0px)}
.button:active{scale:.97}.hero-heading{isolation:isolate}.hero h1{position:relative}.hero h1.particle-ready{opacity:0}#hero-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.particle-hint{display:block;margin:24px auto 0;color:var(--orange);font-size:9px;letter-spacing:1.8px}.hero-copy{margin-top:15px}.hero-sticker b .ui-icon{width:54px;height:54px}
.work-cta{display:flex;align-items:center;flex-direction:column;gap:15px;text-align:center;margin:24px auto 60px;padding:0 24px}.work-cta p{color:var(--muted);margin:0}.work-cta>.eyebrow{font-size:8px;color:var(--muted);letter-spacing:1.3px}.project-rail{position:relative;scroll-snap-type:x mandatory}.project-footer{gap:14px}.project-footer .pill{max-width:52%;white-space:normal;text-align:center;font-size:9px}.project-rail .project-card{transition:transform .25s,border-color .25s;transform-origin:center}.project-rail .project-card:hover{transform:translateY(-6px) rotate(-.6deg)}.rail-controls{gap:20px}#pause-projects{width:34px;height:34px;border-color:var(--line);margin-right:8px}#pause-projects .ui-icon{width:14px;height:14px}#project-count{min-width:70px;text-align:center}
.services-story{position:relative;margin:80px 0 110px;--service-progress:0}.services-pin{padding:38px 0}.services-heading{display:flex;align-items:end;justify-content:space-between;margin:0 auto 34px;gap:20px}.services-heading h2{font:800 clamp(26px,3.2vw,46px)/1.05 var(--display);letter-spacing:-.035em;margin:12px 0 0}.services-heading h2 em{color:var(--orange);font-style:normal}.services-heading .eyebrow{font-size:9px}.services-hint{display:flex;align-items:center;gap:16px;color:var(--muted);white-space:nowrap}.services-hint .ui-icon{width:25px;height:25px;color:var(--orange)}.services-viewport{overflow:clip;padding:28px 0 20px}.services-track{display:grid;gap:40px}.service-panel{padding:0 max(24px,calc((100vw - 1140px)/2));min-width:0}.service-sheet{position:relative;padding:32px 38px;background:linear-gradient(130deg,#222,#171717);border:1px solid #424242;border-radius:16px;box-shadow:0 30px 70px -40px #000;transition:border-color .25s}.service-sheet:hover{border-color:var(--orange)}.service-sheet>.handle{opacity:0;transition:opacity .2s;border-color:var(--orange)}.service-sheet:hover>.handle{opacity:1}.service-file{position:absolute;top:-25px;left:3px;display:flex;align-items:center;gap:8px;color:var(--orange);font:10px var(--mono)}.service-file .ui-icon{width:12px;height:12px}.service-main{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.service-tile{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#303030;box-shadow:inset 0 1px 1px #ffffff24,inset 0 -2px 4px #0005;color:var(--orange);font:700 22px var(--display);margin-bottom:16px}.service-intro>.eyebrow{font-size:8px;letter-spacing:1.5px;color:#aaa}.service-intro h3{font:800 clamp(28px,3.1vw,42px)/1.04 var(--display);letter-spacing:-.035em;margin:12px 0 15px}.service-intro h3 em{display:block;font-style:normal;color:var(--orange);margin-top:5px}.service-intro p{max-width:36ch;font-size:14px;line-height:1.6;color:var(--muted);margin:0}.service-preview{position:relative;border:1px solid #444;border-radius:11px;overflow:hidden;background:#111;box-shadow:0 15px 35px #0005;transform:perspective(1000px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .3s}.preview-bar{height:28px;background:#2b2b2b;display:flex;align-items:center;gap:5px;padding:0 11px}.preview-bar>i{width:6px;height:6px;border-radius:50%;background:#777}.preview-bar>i:first-child{background:var(--orange)}.preview-bar>span{font:7px var(--mono);letter-spacing:.5px;margin:auto;color:#bbb}.preview-bar>.ui-icon{width:10px;height:10px;color:#aaa}.service-preview>img{display:block;width:100%;height:clamp(180px,20vw,260px);object-fit:cover}.preview-cursor{position:absolute;bottom:24px;right:30px;color:var(--orange);transform:rotate(-8deg);transition:translate .3s}.preview-cursor>.ui-icon{display:block;width:23px;height:23px;filter:drop-shadow(0 1px 2px #000)}.preview-cursor>b{display:block;background:var(--orange);color:#111;padding:3px 6px;margin-left:17px;font:8px var(--mono);border-radius:3px}.service-sheet:hover .preview-cursor{translate:-12px -10px}.service-details{border-top:1px solid #3a3a3a;margin-top:24px;padding-top:16px}.service-details summary{display:flex;align-items:center;gap:16px;width:max-content;max-width:100%;padding:10px 13px;border:1px solid #c9c516;border-radius:8px;list-style:none;font:700 9px var(--mono);letter-spacing:1.2px;cursor:pointer;transition:background .2s}.service-details summary::-webkit-details-marker{display:none}.service-details summary:hover{background:#F1EB1C15}.service-details summary>.ui-icon{border-radius:50%;padding:3px;width:20px;height:20px;background:var(--orange);color:#111;transition:rotate .2s}.service-details:not([open]) summary>.ui-icon{rotate:180deg}.service-body{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-top:17px}.service-body h4{font:700 9px var(--mono);letter-spacing:1.2px;color:#999;margin:0 0 10px}.service-body p{font-size:12px;line-height:1.65;color:#c4c4c4;margin:0}.service-body .service-process{font-size:9px;color:#999;margin-top:10px}.service-body ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}.service-body li{font-size:11px;padding:6px 11px;border:1px solid #414141;background:#2b2b2b;border-radius:7px;color:#ddd}.services-navigation{display:flex;justify-content:space-between;align-items:center;max-width:1140px;margin:0 auto;padding:0 0 4px}.services-navigation>.eyebrow{font-size:8px;color:#888}.services-dots{display:flex;gap:14px}.services-dots button{display:flex;align-items:center;gap:10px;background:none;border:0;padding:10px 0;color:#999;font:9px var(--mono)}.services-dots i{height:2px;width:36px;background:#454545;transition:width .3s,background .3s}.services-dots [aria-current] {color:var(--orange)}.services-dots [aria-current] i{width:65px;background:var(--orange)}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.services-story.is-horizontal .services-pin{position:sticky;top:38px;height:auto;display:flex;flex-direction:column;justify-content:center;padding:20px 0}.is-horizontal .services-heading{width:min(1140px,calc(100% - 48px));margin-bottom:14px}.is-horizontal .services-track{display:flex;gap:0;will-change:transform}.is-horizontal .service-panel{flex:0 0 100vw}.is-horizontal .services-navigation{width:min(1140px,calc(100% - 48px))}.is-horizontal .services-viewport{flex-shrink:0}}
@media(max-width:1200px){.services-navigation{margin-inline:24px}.service-sheet{padding:26px}.service-main{gap:25px}.service-body{gap:25px}}
@media(max-width:900px){.services-story{margin:55px 0}.services-pin{padding:20px 0}.services-heading{margin-inline:24px}.services-hint{display:none}.service-main{gap:24px}.service-intro h3{font-size:30px}.service-preview>img{height:220px}.services-navigation{display:none}.services-track{gap:55px}.service-sheet{padding:25px}.particle-hint{font-size:7px;letter-spacing:1px}.service-panel{scroll-margin-top:75px}}
@media(max-width:600px){.service-panel{padding:0 18px}.services-heading{margin-inline:18px}.service-main{grid-template-columns:1fr;gap:22px}.service-body{grid-template-columns:1fr;gap:20px}.service-sheet{padding:24px 20px;border-radius:12px}.service-intro{position:relative}.service-tile{width:38px;height:38px;font-size:18px;margin-bottom:14px}.service-intro>.eyebrow{position:absolute;top:13px;left:52px;font-size:7px}.service-intro h3{font-size:31px;max-width:16ch}.service-intro p{font-size:13px}.service-preview>img{height:auto;aspect-ratio:1.6;object-fit:cover}.service-body p{font-size:12px}.service-body li{font-size:10px}.service-details summary{font-size:8px;letter-spacing:.8px}.work-cta{margin-top:18px;margin-bottom:42px}.work-cta p{font-size:13px}.project-footer .pill{font-size:7px}.particle-hint{max-width:90%;font-size:6px}.hero-sticker b .ui-icon{width:32px;height:32px}}
@media(pointer:coarse){.particle-hint{display:none}}
@media(prefers-reduced-motion:reduce){#hero-particles,.particle-hint{display:none}.hero h1.particle-ready{opacity:1}.button,.service-preview,.project-rail .project-card,.preview-cursor{transform:none!important;translate:none!important;transition:none!important}.services-dots i{transition:none}}

/* Laptop-height refinements and continuous portfolio motion. */
.services-story{margin:90px 0 0}.services-pin{padding-bottom:0}
.services-story.is-horizontal .services-pin{justify-content:flex-start;padding:16px 0 0}
.services-navigation{padding-bottom:0}
.project-rail.is-marquee{scroll-snap-type:none!important;scroll-behavior:auto!important;overflow-anchor:none}
.ruler-track::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#F1EB1C25,#F1EB1C80);transform:scaleX(var(--ruler-fill,0));transform-origin:left;pointer-events:none}
.ruler-numbers,.progress-marker{z-index:1}.ruler-numbers{position:relative}.progress-marker{background:#F1EB1C;color:#111;min-width:36px;text-align:center}
.play-flower{display:grid;place-items:center;font-size:inherit;line-height:1}
.play-flower>.ui-icon{display:block;width:100%;height:100%;overflow:hidden}
.play-disc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px}
.play-disc>span{display:block;font-size:25px;line-height:.95;text-align:center}
.play-disc>b{position:static;display:grid;place-items:center;flex:none;width:22px;height:22px;font-size:22px;line-height:1}
.play-disc>b>.ui-icon{display:block;width:100%;height:100%}
.play-object.selected,.play-object:focus-visible,.play-object.dragging{outline-offset:5px}
.play-object.selected::after,.play-object:focus-visible::after{inset:-7px;border-radius:0;background:linear-gradient(var(--orange),var(--orange)) 0 0/6px 6px,linear-gradient(var(--orange),var(--orange)) 100% 0/6px 6px,linear-gradient(var(--orange),var(--orange)) 0 100%/6px 6px,linear-gradient(var(--orange),var(--orange)) 100% 100%/6px 6px;background-repeat:no-repeat}
.play-disc.selected,.play-disc:focus-visible{outline:none;box-shadow:0 0 0 5px #111,0 0 0 7px var(--orange)}
.play-disc.selected::after,.play-disc:focus-visible::after{display:none}
.designer-tag{z-index:3}.designer-avatar{position:absolute;left:-18px;bottom:calc(100% + 10px);display:block;width:70px;height:70px;object-fit:cover;object-position:center;border-radius:50%;border:3px solid #F1EB1C;background:#23231a;box-shadow:0 0 0 5px #111,0 10px 25px #0006;transform:rotate(9deg)}
.contact:before{display:none}
.moon-rise{height:200px;position:relative;overflow:hidden;display:grid;place-items:start center;margin-top:-25px;isolation:isolate;pointer-events:none}
.moon-rise:before{content:'';position:absolute;inset:25% 10% -100%;background:radial-gradient(ellipse,#f1eb1c16,transparent 65%);z-index:-1}
.moon-system{position:relative;width:240px;height:240px;margin-top:28px}
.moon-surface{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 38px #eeedbb18,0 0 90px #f1eb1c0d;animation:moon-turn 100s linear infinite}
.moon-orbit{position:absolute;inset:-23px;border:1px solid #f1eb1c38;border-radius:50%;animation:moon-turn 24s linear infinite}
.moon-orbit:before{content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;border-radius:50%;background:#F1EB1C;box-shadow:0 0 12px #F1EB1C80}
.moon-orbit:after{content:'';position:absolute;left:50%;bottom:-3px;width:5px;height:5px;border-radius:50%;background:#8d8e80}
@keyframes moon-turn{to{transform:rotate(360deg)}}
.stars-paused .moon-surface,.stars-paused .moon-orbit{animation-play-state:paused}
@media(max-width:760px){.play-disc{padding:13px;gap:5px}.play-disc>span{font-size:16px}.play-disc>b{width:16px;height:16px;font-size:16px}.moon-rise{height:155px;margin-top:0}.moon-system{width:190px;height:190px}.designer-tag{display:block;position:relative;left:auto;top:auto;width:max-content;margin:22px auto 0;transform:none}.designer-avatar{position:static;width:48px;height:48px;margin:0 auto 5px;transform:none;border-width:2px}.designer-tag>span{position:absolute;left:-14px;bottom:9px;font-size:20px}.designer-tag b{margin-left:0}.hero-sticker{display:none}}
@media(prefers-reduced-motion:reduce){.moon-surface,.moon-orbit{animation:none}#pause-projects{display:none}}

/* Full-width lunar horizon behind the footer; the footer masks everything below this cap. */
.moon-rise{height:clamp(78px,7.6vw,108px);margin:0 0 -1px;display:block;overflow:hidden}
.moon-rise:before{inset:0;background:radial-gradient(ellipse at 50% 100%,#f1eb1c16,transparent 70%)}
.moon-system{position:absolute;inset:0 -2%;width:auto;height:100%;margin:0;overflow:hidden;filter:drop-shadow(0 0 22px #f1eb1c14)}
.moon-surface{position:absolute;left:-1%;top:0;width:102%;height:100%;object-fit:fill;opacity:.78;filter:none;box-shadow:none;animation:moon-texture-drift 18s ease-in-out infinite alternate}
.studio-footer{z-index:1}
@keyframes moon-texture-drift{from{transform:translateX(-.6%)}to{transform:translateX(.6%)}}
@media(max-width:760px){.moon-rise{height:68px}.moon-system{inset:0 -12%}.moon-surface{width:104%;left:-2%}}
@media(prefers-reduced-motion:reduce){.moon-surface{animation:none}}

/* Moon concept removed; keep the handoff into the footer clean. */
.moon-rise{display:none!important}

/* Hero headline: each line shrink-wraps and centres, so the particle canvas (which reads line rects) centres too. */
.hero h1{text-align:center}
.hero h1>span{width:fit-content;margin-inline:auto}

/* Portfolio: the card in the centre of the rail takes the selection frame and shows its own file label. */
.project-rail .project-card{outline:1.5px solid transparent;outline-offset:4px;transition:transform .25s,border-color .25s,outline-color .45s cubic-bezier(.32,.72,0,1),outline-offset .45s cubic-bezier(.32,.72,0,1)}
.project-rail .project-card.featured-card{outline-color:var(--blue);outline-offset:4px}
.project-card>.frame-label{top:-27px;left:-10px;opacity:0;translate:0 6px;transition:opacity .35s,translate .45s cubic-bezier(.32,.72,0,1);pointer-events:none}
.project-card.featured-card>.frame-label{opacity:1;translate:0 0}

/* Capability pills link to the Behance project galleries. */
.pills>a{display:inline-flex;align-items:center;gap:6px;font-size:11px;border:1px solid #535353;padding:6px 10px 6px 12px;border-radius:30px;transition:background .35s cubic-bezier(.32,.72,0,1),color .25s,border-color .25s,scale .2s cubic-bezier(.32,.72,0,1)}
.pills>a .pill-go{width:11px;height:11px;opacity:.5;transition:translate .35s cubic-bezier(.32,.72,0,1),opacity .25s}
.pills>a:hover{background:var(--orange);border-color:var(--orange);color:#060606}
.pills>a:hover .pill-go{opacity:1;translate:2px -2px}
.pills>a:active{scale:.96}
:root[data-theme=light] .pills>a{border-color:#19303c}
:root[data-theme=light] .pills>a:hover{border-color:var(--orange);color:#fff}
@media(prefers-reduced-motion:reduce){.project-card>.frame-label,.pills>a,.pills>a .pill-go{transition:none}}
.frame-instant .project-card,.frame-instant .project-card>.frame-label{transition:none!important}

/* Process cards: the step arrow stays put on hover so it never covers the step label. */
.process-steps article:hover .step-icon{transform:none}

/* FAQ accordion: finish.js animates the answer, so the CSS entrance is turned off and the closing state reacts immediately. */
.js-ready .faq-item .faq-answer{animation:none;overflow:hidden}
.faq-item.is-closing .faq-toggle::after{opacity:1;transform:translate(-50%,-50%)}
.faq-item.is-closing .faq-number{color:var(--blue)}
.faq-item.is-closing .faq-toggle::before{background:var(--orange)}

/* Services: heading scrolls like every other section; only the cards pin and pan. Larger sheets, no drop shadow. */
.services-story{margin:clamp(90px,9vw,130px) 0 0}
.services-heading.section-heading{display:block;text-align:left;width:min(1140px,calc(100% - 48px));margin:0 auto clamp(40px,5vw,72px);padding:0}
.services-heading.section-heading h2{font:800 clamp(34px,4.7vw,64px)/1.05 var(--display);letter-spacing:-.02em;margin:0}
.services-pin{padding:0}
.services-story.is-horizontal .services-pin{height:calc(100dvh - 38px);justify-content:center;padding:0}
.services-viewport{padding:30px 0 22px}
.service-panel{padding:0 max(24px,calc((100vw - 1200px)/2))}
.service-sheet{padding:clamp(26px,3vw,46px) clamp(24px,3.4vw,52px);border-radius:24px;box-shadow:none}
.service-main{grid-template-columns:1fr 1.15fr;gap:clamp(28px,4.5vw,72px)}
.service-tile{width:52px;height:52px;border-radius:14px;margin-bottom:20px}
.service-intro h3{font-size:clamp(30px,3.4vw,48px);margin:14px 0 18px}
.service-intro p{font-size:16px;line-height:1.65;max-width:38ch}
.service-preview{border-radius:14px;box-shadow:none}
.service-preview>img{height:clamp(240px,26vw,400px)}
.is-horizontal .service-preview>img{height:clamp(200px,calc(100dvh - 545px),430px)}
.service-details{margin-top:clamp(18px,2.4vw,30px);padding-top:clamp(14px,1.8vw,22px)}
.service-body{gap:clamp(24px,4vw,56px);padding-top:clamp(12px,1.6vw,20px)}
.service-body p{font-size:14px;max-width:62ch}
.service-body li{font-size:12px;padding:7px 12px}
.services-navigation{max-width:1200px;padding:0 0 4px}
.services-navigation .services-hint{display:flex;font-size:9px}
.services-navigation .services-hint .ui-icon{width:22px;height:22px}
@media(max-width:1260px){.services-navigation{margin-inline:24px}}
@media(max-width:900px){.services-story{margin-top:80px}.service-main{grid-template-columns:1fr}.service-preview>img{height:clamp(220px,44vw,340px)}}
@media(max-width:760px){.services-heading.section-heading h2{font-size:34px}}
@media(max-width:600px){.service-sheet{border-radius:18px}.service-intro p{font-size:14px}.service-preview>img{height:auto}}
@media(max-width:380px){.services-heading.section-heading h2{font-size:29px}}
@media(min-width:901px) and (max-height:820px){
 .is-horizontal .services-viewport{padding:26px 0 12px}
 .is-horizontal .service-sheet{padding:22px 36px}
 .is-horizontal .service-tile{width:38px;height:38px;font-size:17px;border-radius:11px;margin-bottom:12px}
 .is-horizontal .service-intro h3{font-size:clamp(30px,2.6vw,36px);margin:10px 0 12px}
 .is-horizontal .service-intro p{font-size:14px}
 .is-horizontal .service-preview>img{height:clamp(180px,calc(100dvh - 430px),320px)}
 .is-horizontal .service-details{margin-top:14px;padding-top:12px}
 .is-horizontal .service-body{padding-top:10px}
 .is-horizontal .service-body p{font-size:13px;line-height:1.55}
 .is-horizontal .service-process{display:none}
}
/* Title stays at two lines max; nav centres between the fixed music dock and theme switch. */
.service-main{grid-template-columns:1.05fr 1fr}
.service-intro h3{font-size:clamp(30px,2.75vw,40px)}
.service-process{text-wrap:balance}
.services-navigation{justify-content:center;gap:clamp(32px,5vw,72px)}
@media(max-width:900px){.service-main{grid-template-columns:1fr}.service-intro h3{font-size:clamp(28px,6.5vw,36px)}}

/* Footer curtain (finish.js sets --footer-h / --contact-top / --cover). a spacer after main's content reserves the footer's height (sticky ignores padding) so the
   pinned contact section has room to stay put; the footer pulls up by the same amount and slides over it. */
.footer-curtain main::after{content:"";display:block;height:var(--footer-h,0px)}
.footer-curtain .contact{position:sticky;top:var(--contact-top,38px);z-index:0;transform-origin:50% 0;scale:calc(1 - var(--cover,0) * .06);opacity:calc(1 - var(--cover,0) * .6);will-change:scale,opacity}
.footer-curtain .studio-footer{margin-top:calc(-1 * var(--footer-h,0px));z-index:2;box-shadow:0 -24px 60px -30px #00000059}
:root[data-theme=light].footer-curtain .studio-footer{box-shadow:0 -24px 60px -30px #183a5873}
@media(prefers-reduced-motion:reduce){.footer-curtain .contact{scale:none;opacity:1;will-change:auto}}

/* ==== light ==== */
/* Day theme: the sky palette from "new design", generated against the base stylesheets. Active when <html data-theme="light">. */
/* from styles.css */
:root[data-theme=light]{--ink:#142a36;--muted:#426276;--orange:#ed4815;--blue:#009bff;--paper:#fffefb;--line:#dce4e8;--shadow:0 18px 36px -25px #183a5866}
:root[data-theme=light] body{background:#9fd2ed}
:root[data-theme=light] body:before{background:linear-gradient(155deg,#53a5e5 0%,#7cbeeb 46%,#bae1ed 100%)}
:root[data-theme=light] ::selection{background:#ffedb4}
:root[data-theme=light] .status-dot{background:#25be75;box-shadow:0 0 0 3px #25be751c}
:root[data-theme=light] .ruler{background:#edf6fbeF;border-bottom:1px solid #4f7c9c50}
:root[data-theme=light] .ruler-brand{border-right:1px solid #92a8b5}
:root[data-theme=light] .ruler-track{background:repeating-linear-gradient(90deg,#5d7e9466 0 1px,transparent 1px 10px) bottom/100% 6px no-repeat}
:root[data-theme=light] .progress-marker{background:#ffe8dc88}
:root[data-theme=light] .ruler-live{border-left:1px solid #b4c9d6}
:root[data-theme=light] .availability{background:#fffefa;border:1px solid #ffffff80}
:root[data-theme=light] nav{box-shadow:0 8px 20px #30668d1f}
:root[data-theme=light] nav .nav-contact{color:#fff}
:root[data-theme=light] nav .nav-contact:hover{color:#fff}
:root[data-theme=light] .hero-heading{border:1px solid #079cff80}
:root[data-theme=light] .hero .headline-orange{background:radial-gradient(circle,#ffd39b 0 .8px,transparent 1px) 0 0/4px 4px,var(--orange)}
:root[data-theme=light] .handle{background:#fff}
:root[data-theme=light] .dimension{color:#285d7c}
:root[data-theme=light] .hero-copy{color:#23485e}
:root[data-theme=light] .hero-copy em{border-bottom:1px solid #275d7a}
:root[data-theme=light] .orange{color:#fff;box-shadow:0 8px 17px #e9572333}
:root[data-theme=light] .orange:hover{background:#cf3910;box-shadow:0 10px 20px #e9572350}
:root[data-theme=light] .outline{background:#d2eafa30}
:root[data-theme=light] .outline:hover{background:#ffffff65}
:root[data-theme=light] .hero-sticker{background:#ffe5a6;color:#ae461c;box-shadow:3px 5px 0 #557b9220;border:1px dashed #cfa456;outline:5px solid #ffe5a6}
:root[data-theme=light] .designer-tag b{color:#fff}
:root[data-theme=light] .scroll-cue span{border:1px solid #41687f55}
:root[data-theme=light] .project-card{border:6px solid #ffffff60}
:root[data-theme=light] .peach{background:#f4ceb8}
:root[data-theme=light] .lilac{background:#e3daf3}
:root[data-theme=light] .green{background:#d9e2cd}
:root[data-theme=light] .project-image img{box-shadow:0 14px 24px #22242a25}
:root[data-theme=light] .project-arrow{border:1px solid #ffffff80;background:#ffffffa6}
:root[data-theme=light] .pill{border:1px solid #dfe3e7;background:#f3f4f5}
:root[data-theme=light] .round-button:hover{background:#ffe5a6}
:root[data-theme=light] .specialties{border-top:1px solid #fff6;border-bottom:1px solid #fff6}
:root[data-theme=light] .handwritten{color:#b82f06}
:root[data-theme=light] .card{border:1px solid #ffffffb3}
:root[data-theme=light] .file-label{color:#5f788a}
:root[data-theme=light] .dark-card{color:#fff}
:root[data-theme=light] .dark-card .file-label{color:#a4b9c6}
:root[data-theme=light] .tool-row span{border:1px solid #fff3;color:#85cdff;background:#203c4c}
:root[data-theme=light] .tool-row span:nth-child(2){color:#ffb058}
:root[data-theme=light] .tool-row span:nth-child(3){color:#ff89be}
:root[data-theme=light] .tool-row span:nth-child(4){color:#c6eca0}
:root[data-theme=light] .dark-card p{color:#a7becb}
:root[data-theme=light] .pills>span{border:1px solid #19303c}
:root[data-theme=light] .note-card{border:1px solid #ffffffb0;background:#e6f2fc99}
:root[data-theme=light] .note-card>.eyebrow{color:#46667b}
:root[data-theme=light] .profile-note{background:#fffefb}
:root[data-theme=light] .sticky-note{background:#ffebc9;box-shadow:2px 4px 0 #375d7a10}
:root[data-theme=light] .sticky-note:after{border-bottom:11px solid #bba58260}
:root[data-theme=light] .service-number{color:#7f9bab}
:root[data-theme=light] .brand-art{background:#e4edb6;color:#3c5027}
:root[data-theme=light] .book-art{background:#e3ddf0}
:root[data-theme=light] .book-object{background:#f34c23;color:#ffe8ad;box-shadow:-4px 3px 0 #ffd18c,9px 13px 15px #26323a30;border-left:3px solid #d74421}
:root[data-theme=light] .book-art>i{color:#8664ab}
:root[data-theme=light] .spatial-art{background:linear-gradient(165deg,#efcfb7 60%,#d8b89c 60%)}
:root[data-theme=light] .arch{border:27px solid #f9e7d8;box-shadow:13px 8px 12px #946f5044;background:linear-gradient(130deg,#9a785f,#d4b18f)}
:root[data-theme=light] .sphere{background:radial-gradient(circle at 30% 25%,#d6dfa8,#9ea563 65%,#687441);box-shadow:13px 10px 10px #76593733}
:root[data-theme=light] .process-window{background:#fffdfd;border:1px solid #ffffffa0}
:root[data-theme=light] .window-bar{background:#f1f6fa;border-bottom:1px solid #dfe9ef}
:root[data-theme=light] .window-dots i{background:#ff6a60}
:root[data-theme=light] .window-dots i:nth-child(2){background:#edbb4e}
:root[data-theme=light] .window-dots i:nth-child(3){background:#3fc47d}
:root[data-theme=light] .process-steps{background:radial-gradient(#b4cad366 1px,transparent 1px) 0 0/18px 18px}
:root[data-theme=light] .process-steps article{border-right:1px solid #dae2e7}
:root[data-theme=light] .step-index{color:#a33516}
:root[data-theme=light] .mini-project>div{background:#ebf3f4;border:1px solid #ffffff70}
:root[data-theme=light] .mini-project:nth-child(2)>div{background:#e4dfcf}
:root[data-theme=light] .mini-project:nth-child(3)>div{background:#eddccc}
:root[data-theme=light] .mini-project:nth-child(4)>div{background:#e1dced}
:root[data-theme=light] .faq p a{border-bottom:1px solid #6e98ae}
:root[data-theme=light] .contact>p{color:#2f5166}
:root[data-theme=light] .footer{border-top:1px solid #4b7f972e}
:root[data-theme=light] .footer-bottom{border-top:1px solid #4b7f972e}
@media(max-width:760px){:root[data-theme=light] .availability{background:none;border:0}:root[data-theme=light] .hero-sticker{outline-width:3px}:root[data-theme=light] .project-card{border-width:4px;border-radius:17px}:root[data-theme=light] .process-steps article{border:0;border-bottom:1px solid #dae2e7}}
/* from studio.css */
:root[data-theme=light]{--orange:#f0531c}
:root[data-theme=light] .chat-window{background:#fafdff;border:1px solid #fff;box-shadow:0 26px 45px -32px #193b5d80}
:root[data-theme=light] .chat-preview{color:#617c8d}
:root[data-theme=light] .chat-thread{background:radial-gradient(#a8c1d433 .8px,transparent 1px) 0 0/20px 20px}
:root[data-theme=light] .chat-divider{color:#b53810}
:root[data-theme=light] .chat-divider:before,:root[data-theme=light] .chat-divider:after{background:#f0531c22}
:root[data-theme=light] .chat-avatar.client{background:#009bff}
:root[data-theme=light] .chat-message h3 small{color:#657e8f}
:root[data-theme=light] .chat-file{border:1px solid #d5e1e9;background:#f0f6fa}
:root[data-theme=light] .chat-file[href]:hover{background:#e0f0ff;border-color:#009bff}
:root[data-theme=light] .reaction{border:1px solid #f3c0af;background:#fff5ef;color:#ac3814}
:root[data-theme=light] .chat-compose{border:1px solid #d9e6ee;background:#f0f6fa;color:#587387}
:root[data-theme=light] .comparison-window{background:#fff;border:1px solid #fff}
:root[data-theme=light] .comparison-stage{background:#eef0ed}
:root[data-theme=light] .compare-before{background:#eaeceb;color:#59615d}
:root[data-theme=light] .plain-vase{background:linear-gradient(90deg,#bcc2bd,#d4d8d4 40%,#a9b1ab);box-shadow:20px 26px 20px -13px #85908444}
:root[data-theme=light] .compare-after{background:#f7e9c9;color:#334b29}
:root[data-theme=light] .compare-after .concept-button{background:#334b29;color:#f7e9c9;border-color:#334b29}
:root[data-theme=light] .sculpture i{border:35px solid #c4cb76;box-shadow:20px 18px 16px -10px #83704833}
:root[data-theme=light] .sculpture b{background:radial-gradient(circle at 30% 25%,#fbab7d,#e46832 55%,#b44f22);box-shadow:18px 14px 13px -8px #97734555}
:root[data-theme=light] .compare-divider{background:#009bff}
:root[data-theme=light] .compare-divider>span{border:2px solid #009bff;box-shadow:0 3px 9px #193a5533;color:#007ad4}
:root[data-theme=light] .comparison-control p{color:#567185}
:root[data-theme=light] .plan-switch{background:#eaf0f4}
:root[data-theme=light] .plan-switch button[aria-pressed=true]{box-shadow:0 3px 7px #15314320}
:root[data-theme=light] .plan-switch button:not([aria-pressed=true]):hover{background:#dbe6ef}
:root[data-theme=light] .plan-overview{background:#b9ddf1}
:root[data-theme=light] .plan-overview h3 em{color:#c94516}
:root[data-theme=light] .plan-overview p{color:#34546b}
:root[data-theme=light] .plan-note{background:#ffebc9;box-shadow:9px 14px 0 #4178a010}
:root[data-theme=light] .plan-note .eyebrow{color:#856441}
:root[data-theme=light] .plan-note>span:last-of-type{color:#735e3f}
:root[data-theme=light] .play-canvas{border:1px solid #ffffffc9;background:radial-gradient(#779db445 1px,transparent 1px) 0 0/20px 20px,#eaf6fbd9}
:root[data-theme=light] .play-toolbar{border-bottom:1px solid #c7dce7;background:#f9fcffb3}
:root[data-theme=light] .play-toolbar .eyebrow{color:#567b91}
:root[data-theme=light] .play-toolbar button{border:1px solid #c5d5df}
:root[data-theme=light] .canvas-cross{color:#75a8c5}
:root[data-theme=light] .play-object.selected::after,:root[data-theme=light] .play-object:focus-visible::after{background:radial-gradient(circle,var(--blue) 0 3.4px,#fff 3.4px 4.6px,transparent 4.6px) 0 0/9px 9px,radial-gradient(circle,var(--blue) 0 3.4px,#fff 3.4px 4.6px,transparent 4.6px) 100% 0/9px 9px,radial-gradient(circle,var(--blue) 0 3.4px,#fff 3.4px 4.6px,transparent 4.6px) 0 100%/9px 9px,radial-gradient(circle,var(--blue) 0 3.4px,#fff 3.4px 4.6px,transparent 4.6px) 100% 100%/9px 9px}
:root[data-theme=light] .play-note{background:#ffebb7;box-shadow:8px 12px 0 #37618112}
:root[data-theme=light] .play-note>span{color:#956b36}
:root[data-theme=light] .play-disc{background:#187bd1;color:#f5f6ec;box-shadow:8px 10px 0 #34658e12}
:root[data-theme=light] .play-label{background:#e7edb9;color:#465a29;border:1px solid #a7b56c;outline:4px solid #e7edb9}
:root[data-theme=light] .canvas-hint{color:#5b7a8e}
:root[data-theme=light] .play-status{color:#375e75}
:root[data-theme=light] .studio-footer{background:radial-gradient(#28404d66 1px,transparent 1.5px) 0 0/24px 24px,#0c1821;color:#fff}
:root[data-theme=light] .footer-topline>span{color:#80b3d0}
:root[data-theme=light] .footer-up{border:1px solid #ffffff2e}
:root[data-theme=light] .footer-invite>.eyebrow{color:#ff773e}
:root[data-theme=light] .footer-available{color:#c3cbd1}
:root[data-theme=light] .footer-columns h3{color:#9aa8b2}
:root[data-theme=light] .footer-columns a{color:#d9dee3}
:root[data-theme=light] .footer-columns a:hover{color:#ff773e}
:root[data-theme=light] .footer-scale{border-top:1px solid #a3b6c221;background:repeating-linear-gradient(90deg,transparent 0 23px,#a3b6c229 23px 24px) top/100% 9px no-repeat}
:root[data-theme=light] .footer-meta{color:#a6b7c2}
:root[data-theme=light] .canvas-cursor>span{background:#009bff;box-shadow:0 3px 6px #0068ac20}
.canvas-cursor>span,.canvas-cursor.is-link>span,.canvas-cursor.is-drag>span,.canvas-cursor.is-text>span{top:2px;left:27px;display:inline-flex;align-items:center;gap:5px}
@media(max-width:760px){:root[data-theme=light] .sculpture i{border-width:18px}}
:root[data-theme=light] .compare-divider{background:transparent}
:root[data-theme=light] .compare-divider:before{background:#009bff}
:root[data-theme=light] .footer-tools button{border:1px solid #a3b6c240;color:#c3d6e0;background:#162630}
:root[data-theme=light] .footer-tools button:hover{border-color:#f0531c}
@media(hover:hover){:root[data-theme=light] .service-card:hover{outline:1px solid #009bff}:root[data-theme=light] .note-card:hover{border-color:#009bff}}
:root[data-theme=light] .footer-wordmark>span{color:#fff}
:root[data-theme=light] .footer-wordmark:hover>span{color:#8fa3b2}
:root[data-theme=light] .review-proof{background:#f8fcfa;border:1px solid #ffffffb3}
:root[data-theme=light] .upwork-source>span{color:#5b7285}
:root[data-theme=light] .review-proof>div{border-left:1px solid #dbe8dd}
:root[data-theme=light] .review-proof p{color:#536a5f}
:root[data-theme=light] .review-demo-note{color:#315b72}
:root[data-theme=light] .review-card{background:#fffefa;border:1px solid #ffffffcc}
:root[data-theme=light] .demo-badge{border:1px solid #d8e3e8;color:#51677a}
:root[data-theme=light] .review-avatar{background:#dfeaf1;color:#46748e}
:root[data-theme=light] .review-person>div>span{color:#6d8090}
:root[data-theme=light] .review-category{border-top:1px solid #e6ebed;color:#5b7285}
:root[data-theme=light] .review-source-note{color:#43667d}
:root[data-theme=light] .review-source-note a{border-bottom:1px solid #628aa3}
:root[data-theme=light] /* Short first-visit loader: no image,:root[data-theme=light] video,:root[data-theme=light] or framework dependency. */
.intro-screen{background:linear-gradient(#d7eafa66 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,#d7eafa66 1px,transparent 1px) 0 0/34px 34px,#fafdff}
:root[data-theme=light] .intro-selection{border:1px solid #009bff}
:root[data-theme=light] .intro-dimensions{background:#009bff}
:root[data-theme=light] .intro-progress{background:#c9e7fa}
:root[data-theme=light] .intro-progress>span{background:#009bff}
:root[data-theme=light] .intro-caption{color:#507690}
:root[data-theme=light] #skip-intro{border:1px solid #b7d5e6;background:#fafdff;color:#416881}
:root[data-theme=light] /* Opt-in ambient sound. Audio starts only after pressing the control. */
.sound-dock{background:#fbfdff;border:1px solid #c7dce9;box-shadow:0 5px 22px #23465e20}
:root[data-theme=light] .sound-dock button{color:#284558}
:root[data-theme=light] .sound-dock button:hover{background:#e9f3fa}
:root[data-theme=light] .sound-bars i{background:#f0531c}
:root[data-theme=light] .music-volume input{accent-color:#f0531c}
:root[data-theme=light] .music-volume input:focus-visible{outline:2px solid #009bff}
:root[data-theme=light] /* Specialties marquee: one transform animation,:root[data-theme=light] duplicated group for a seamless loop. */
.specialties{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
:root[data-theme=light] .faq-frame{background:#cfe8fb;color:#25566f}
:root[data-theme=light] .faq-item[open]>summary .faq-frame,:root[data-theme=light] .faq-item>summary:hover .faq-frame{color:#fff}
:root[data-theme=light] .faq-item>summary{border:1px solid #dbe9f3}
:root[data-theme=light] .faq-item>summary:hover{border-color:#a9d3ee;box-shadow:0 10px 26px #2a5c7a1f}
:root[data-theme=light] .faq-answer-label{color:#8aa3b4}
:root[data-theme=light] .signature-mark{box-shadow:0 3px 10px #2a5c7a24}
:root[data-theme=light] /* Footer wordmark: each letter lifts on hover,:root[data-theme=light] staying on the same baseline. */
.footer-wordmark>span{color:#fff}
:root[data-theme=light] .footer-wordmark:hover>span{color:#8fa3b2}
:root[data-theme=light] .review-card:hover{box-shadow:0 16px 34px #2a5c7a1f}
:root[data-theme=light] .service-card:hover{box-shadow:0 16px 34px #2a5c7a1f}

/* ==== theme ==== */
/* Night / day switch. Night is the default; day uses light.css (sky palette) plus the overrides below. */
:root{--spring:cubic-bezier(.32,.72,0,1)}

/* Sky: clouds replace the stars in day mode. Base cloud and sky-track rules live in styles.css / studio.css. */
.sky{display:none}
:root[data-theme=light] .sky{display:block}
:root[data-theme=light] .starfield{display:none}
.stars-paused .sky-track{animation-play-state:paused}

/* Circular reveal from the theme button when the View Transitions API is available. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* Day overrides for colours hard-coded in finish.css. */
:root[data-theme=light] .service-sheet{background:linear-gradient(130deg,#fffefb,#f2f8fc);border-color:#ffffff;box-shadow:none}
:root[data-theme=light] .service-tile{background:#ffe5a6;color:var(--orange);box-shadow:inset 0 1px 1px #fff,inset 0 -2px 4px #cfa45633}
:root[data-theme=light] .service-intro>.eyebrow{color:var(--muted)}
:root[data-theme=light] .service-preview{border-color:var(--line);background:#fff;box-shadow:none}
:root[data-theme=light] .preview-bar{background:#f1f5f8}
:root[data-theme=light] .preview-bar>i{background:#b7c6cf}
:root[data-theme=light] .preview-bar>span,:root[data-theme=light] .preview-bar>.ui-icon{color:var(--muted)}
:root[data-theme=light] .preview-cursor>b{color:#fff}
:root[data-theme=light] .preview-cursor>.ui-icon{filter:drop-shadow(0 1px 2px #183a5840)}
:root[data-theme=light] .service-details{border-color:var(--line)}
:root[data-theme=light] .service-details summary{border-color:var(--orange)}
:root[data-theme=light] .service-details summary:hover{background:#ed481512}
:root[data-theme=light] .service-details summary>.ui-icon{color:#fff}
:root[data-theme=light] .service-body h4,:root[data-theme=light] .service-body .service-process,:root[data-theme=light] .services-navigation>.eyebrow,:root[data-theme=light] .services-dots button{color:var(--muted)}
:root[data-theme=light] .service-body p{color:#23485e}
:root[data-theme=light] .service-body li{border-color:var(--line);background:#f3f4f5;color:var(--ink)}
:root[data-theme=light] .services-dots i{background:#b4c9d6}
:root[data-theme=light] .services-dots [aria-current] i{background:var(--orange)}
:root[data-theme=light] .ruler-track::before{background:linear-gradient(90deg,#ed481520,#ed481566)}
:root[data-theme=light] .progress-marker{background:var(--orange);color:#fff}
:root[data-theme=light] .play-disc.selected,:root[data-theme=light] .play-disc:focus-visible{box-shadow:0 0 0 5px #fff,0 0 0 7px var(--orange)}
:root[data-theme=light] .designer-avatar{border-color:var(--orange);background:#ffe5a6;box-shadow:0 0 0 5px #fff,0 10px 25px #183a5833}

/* Day colours for elements that only night.css styled. */
:root[data-theme=light] .digital-mockup{border:1px solid var(--line);background:#fffefb;color:var(--ink);box-shadow:10px 12px 0 #ffe5a6}
:root[data-theme=light] .digital-mockup>span{border-bottom:1px solid var(--line)}
:root[data-theme=light] .digital-mockup>i{color:var(--orange)}
:root[data-theme=light] .signed-by .signature-mark{background:#ffe5a6;color:var(--orange)}
:root[data-theme=light] .signature{color:var(--orange)}
:root[data-theme=light] .behance-mark{color:var(--ink)}
:root[data-theme=light] .hw-ink{stroke:var(--orange)}
:root[data-theme=light] .spatial-art>.art-caption{color:var(--muted)}
:root[data-theme=light] .mini-project:hover>div{border-color:var(--orange);box-shadow:0 16px 44px -26px #e9572366}
:root[data-theme=light] .service-card:before{background:linear-gradient(90deg,transparent,#ed481580,transparent)}
/* light.css's selection-handle shorthand would reset background-repeat and tile the dots; keep finish.css's corner squares. */
:root[data-theme=light] .play-object.selected::after,:root[data-theme=light] .play-object:focus-visible::after{background:linear-gradient(var(--orange),var(--orange)) 0 0/6px 6px,linear-gradient(var(--orange),var(--orange)) 100% 0/6px 6px,linear-gradient(var(--orange),var(--orange)) 0 100%/6px 6px,linear-gradient(var(--orange),var(--orange)) 100% 100%/6px 6px;background-repeat:no-repeat}

/* Cursor label: describes the hovered element (studio.js), with an icon and a small pop on change. */
.canvas-cursor>span{display:inline-flex;align-items:center;gap:5px;transform-origin:0 0}
.canvas-cursor>span .ui-icon{width:10px;height:10px;flex:none}
.canvas-cursor>svg{transition:scale .3s var(--spring),rotate .3s var(--spring)}
.canvas-cursor.is-action>svg{scale:.8;rotate:-8deg}
.canvas-cursor.is-action>span{padding:4px 8px 4px 7px}
.canvas-cursor>span.label-pop{animation:cursor-label-pop .38s var(--spring)}
@keyframes cursor-label-pop{from{opacity:.4;scale:.82 .82}to{opacity:1;scale:1 1}}
@media(prefers-reduced-motion:reduce){.canvas-cursor>span.label-pop{animation:none}.canvas-cursor>svg{transition:none}}

/* Smart nav (finish.js): floats below the ruler after the header, hides on scroll down, returns on scroll up. */
.nav-holder{display:none}
.nav-floating .nav-holder{display:block}
.nav-floating .header nav{position:fixed;top:40px;left:50%;z-index:55;margin:0;translate:-50% 0;opacity:1;background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 12px 32px -14px #000a,inset 0 1px 0 #ffffff12;transition:translate .55s var(--spring),opacity .35s}
:root[data-theme=light].nav-floating .header nav{box-shadow:0 12px 32px -14px #183a5866,inset 0 1px 0 #fff}
.nav-floating.nav-hidden .header nav{translate:-50% calc(-100% - 56px);opacity:0;pointer-events:none}
.nav-instant .header nav{transition:none!important}
@media(max-width:760px){.nav-floating .header nav{top:36px;max-width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.nav-floating .header nav{transition:opacity .2s}}

/* Interaction layer (interactions.js). */
/* Scroll reveal: individual translate + opacity, so existing hover transforms keep working. */
.reveal{opacity:0;translate:0 28px;filter:blur(6px);transition:opacity .7s var(--spring) var(--reveal-delay,0ms),translate .9s var(--spring) var(--reveal-delay,0ms),filter .7s var(--spring) var(--reveal-delay,0ms)}
.reveal.is-in{opacity:1;translate:0 0;filter:none}
/* Spotlight: soft accent glow plus a brighter edge where the pointer is. */
.has-spotlight{position:relative}
.spotlight{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--orange) 9%,transparent),transparent 70%)}
.spotlight::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(180px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--orange) 75%,transparent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.has-spotlight:hover>.spotlight{opacity:1}
.review-proof strong{font-variant-numeric:tabular-nums}
/* Nav hover pill. */
.header nav{position:relative}
.nav-pill{position:absolute;top:6px;bottom:6px;left:0;width:var(--pw,0);translate:var(--px,0) 0;border-radius:25px;background:color-mix(in srgb,var(--ink) 7%,transparent);opacity:0;pointer-events:none;transition:translate .45s var(--spring),width .45s var(--spring),opacity .25s}
.nav-pill.no-slide{transition:opacity .25s}
nav.pill-on .nav-pill{opacity:1}
.header nav a{position:relative}
/* Press feedback everywhere it was missing. */
.round-button,.pills>a,.plan-switch button,.play-toolbar button,.footer-up,.chat-file,.reaction,.services-dots button,.service-details summary,.faq-item>summary,.header nav a,#theme-toggle{transition-property:background,color,border-color,box-shadow,transform,scale,translate,opacity}
.round-button:active,.plan-switch button:active,.play-toolbar button:active,.footer-up:active,.chat-file:active,.reaction:active,.services-dots button:active,.service-details summary:active,.header nav a:active{scale:.95}
.faq-item>summary:active{scale:.99}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;translate:none;filter:none;transition:none}.nav-pill{transition:none}}
@media print{.reveal{opacity:1!important;translate:none!important;filter:none!important}}

/* Left dock: theme button + music. */
.sound-dock{gap:4px;padding:4px 10px 4px 4px}
.dock-icon{position:relative;display:grid!important;place-items:center;width:35px;height:35px;padding:0!important;border-radius:50%!important;color:var(--ink)!important}
.dock-icon .ui-icon{position:absolute;width:16px;height:16px;transition:opacity .3s,rotate .5s var(--spring),scale .5s var(--spring)}
.dock-icon .theme-moon{opacity:0;rotate:-60deg;scale:.5}
:root[data-theme=light] .dock-icon .theme-sun{opacity:0;rotate:60deg;scale:.5}
:root[data-theme=light] .dock-icon .theme-moon{opacity:1;rotate:0deg;scale:1}
.dock-icon:hover .ui-icon{rotate:25deg}
.dock-icon:active{scale:.9}
.sound-dock button{transition:background-color .18s ease,transform .14s cubic-bezier(.22,1,.36,1)}
.sound-dock button:active{transform:scale(.92)}
.sound-dock.is-playing #music-toggle{background:color-mix(in srgb,var(--orange) 14%,transparent)}
.sound-dock.is-playing .sound-bars i{animation:sound-level .58s ease-in-out infinite alternate}
@media(max-width:600px){.services-heading.section-heading{width:calc(100% - 36px)}}
.dock-divider{width:1px;height:18px;background:var(--line);margin:0 2px}
:root[data-theme=light] .dock-divider{background:#c9d8e1}

/* Right dock: Ask AI + Upwork. */
.action-dock{position:fixed;right:18px;bottom:18px;z-index:60;display:none;align-items:center;gap:10px}
.js-ready .action-dock{display:flex}
.ask-ai-button{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--orange);color:#060606;font:700 13px var(--body);box-shadow:0 8px 26px -10px color-mix(in srgb,var(--orange) 70%,transparent),inset 0 1px 0 #ffffff59;transition:translate .35s var(--spring),box-shadow .35s,scale .2s var(--spring)}
.ask-ai-button .ui-icon{width:16px;height:16px;transition:rotate .6s var(--spring)}
.ask-ai-button:hover{translate:0 -2px;box-shadow:0 14px 30px -10px color-mix(in srgb,var(--orange) 80%,transparent),inset 0 1px 0 #ffffff59}
.ask-ai-button:hover .ui-icon{rotate:90deg}
.ask-ai-button:active{scale:.96}
:root[data-theme=light] .ask-ai-button{color:#fff}
.hire-button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#14A800;color:#fff;box-shadow:0 8px 24px -10px #14A800cc,inset 0 1px 0 #ffffff55;transition:translate .35s var(--spring),scale .2s var(--spring)}
.hire-button .ui-icon{width:22px;height:22px}
.hire-button:hover{translate:0 -2px}
.hire-button:active{scale:.94}
.ask-ai-button:focus-visible,.hire-button:focus-visible,.dock-icon:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Ask AI drawer: slides in from the right. */
/* Cursor label flips to the pointer's left near the right edge, and above it near the bottom. */
.canvas-cursor.flip-x>span{left:-6px;translate:-100% 0;transform-origin:100% 0}
.canvas-cursor.flip-y>span{top:-4px;translate:0 -100%;transform-origin:0 100%}
.canvas-cursor.flip-x.flip-y>span{translate:-100% -100%;transform-origin:100% 100%}

/* The top ruler shows scroll progress, so the native page scrollbar is hidden. Scrolling itself is unchanged. */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ===== Hero celestial: a sun by day, the moon at night. Pure CSS/SVG layers; parallax vars from interactions.js. ===== */
:root .hero-sticker.celestial{--cel:clamp(130px,13vw,200px);--px:0;--py:0;display:block;width:var(--cel);height:var(--cel);padding:0;background:none;border:0;outline:0;box-shadow:none;transform:none;border-radius:50%;color:#e9e6d8}
:root .hero-sticker.celestial:hover{transform:none}
:root[data-theme=light] .hero-sticker.celestial{background:none;border:0;outline:0;box-shadow:none;color:#8a3510}
.celestial-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:cel-spin 40s linear infinite;pointer-events:none}
.celestial-ring text{font:700 12px var(--mono);letter-spacing:.2px;fill:currentColor;opacity:.88}
.orb{position:absolute;inset:23%;translate:calc(var(--px) * 3px) calc(var(--py) * 3px);transition:translate .8s var(--spring),scale .6s var(--spring);animation:cel-float 7s ease-in-out infinite alternate}
.celestial:hover .orb{scale:1.07}
.orb i,.orb .sun,.orb .moon,.orb .sun-body,.orb .moon-body{position:absolute;display:block}
.sun,.moon{inset:0;transition:opacity .7s,translate 1s var(--spring),scale 1s var(--spring)}
/* Night shows the moon; day swaps in the sun (it rises as the moon sets). */
.sun{opacity:0;translate:0 38%;scale:.6}
:root[data-theme=light] .sun{opacity:1;translate:0 0;scale:1}
:root[data-theme=light] .moon{opacity:0;translate:0 -38%;scale:.6}

/* --- Sun --- */
.sun-corona{inset:-46%;border-radius:50%;background:radial-gradient(circle,#fffbe8 0 29%,#ffe08acc 36%,#ffc65a66 46%,#ffb3472b 58%,transparent 71%);animation:cel-pulse 5.5s ease-in-out infinite alternate}
.sun-rays{inset:-64%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff4cf 0deg 1.6deg,transparent 2.4deg 14deg);-webkit-mask:radial-gradient(circle,transparent 27%,#000 31%,#0008 45%,transparent 70%);mask:radial-gradient(circle,transparent 27%,#000 31%,#0008 45%,transparent 70%);filter:blur(1.2px);opacity:.7;animation:cel-spin 110s linear infinite}
.sun-rays-b{inset:-52%;background:repeating-conic-gradient(from 6deg,#ffe3a1 0deg 1deg,transparent 1.6deg 9deg);opacity:.5;animation-duration:160s;animation-direction:reverse}
.sun-body{inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at calc(46% + var(--px) * 4%) calc(42% + var(--py) * 4%),#fffef6 0%,#fff3b8 16%,#ffd65c 38%,#ffaa2b 63%,#f2711b 84%,#d4500f 100%);box-shadow:0 0 16px 3px #ffd770b3,0 0 42px 12px #ffb54770,0 0 90px 28px #ffcf7a3d}
.sun-surface{inset:-10%;background:url(../assets/svg/sun-granules.svg?v=2) 0 0/19px 19px repeat;mix-blend-mode:multiply;opacity:.36;translate:calc(var(--px) * -5px) calc(var(--py) * -5px);transition:translate .8s var(--spring);animation:cel-boil 28s linear infinite}
.sun-surface-b{background-size:13px 13px;mix-blend-mode:screen;opacity:.28;animation:cel-boil-b 36s linear infinite}
.sun-spots{top:0;bottom:0;left:0;width:200%;translate:calc(var(--px) * -5px) calc(var(--py) * -5px);background:
  radial-gradient(circle 3px at 18% 40%,#2e0e02 0 1.1px,#8f3409d9 1.7px,transparent 3px),
  radial-gradient(circle 2px at 20.5% 44%,#2e0e02 0 .7px,#8f3409cc 1.1px,transparent 2px),
  radial-gradient(circle 2.5px at 34% 63%,#2e0e02 0 .9px,#8f3409cc 1.4px,transparent 2.5px),
  radial-gradient(circle 3px at 68% 40%,#2e0e02 0 1.1px,#8f3409d9 1.7px,transparent 3px),
  radial-gradient(circle 2px at 70.5% 44%,#2e0e02 0 .7px,#8f3409cc 1.1px,transparent 2px),
  radial-gradient(circle 2.5px at 84% 63%,#2e0e02 0 .9px,#8f3409cc 1.4px,transparent 2.5px);
  animation:cel-rotate 90s linear infinite}
/* Limb darkening, a soft hot spot and the rim: what makes the disc read as a ball of gas. */
.sun-limb{inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 50%,#d4500f40 74%,#9a2d06a6 100%),radial-gradient(circle at calc(40% - var(--px) * 6%) calc(34% - var(--py) * 6%),#ffffffc0 0,#fff8dc55 18%,transparent 36%);box-shadow:inset -7px -9px 16px #b0380a55,inset 4px 5px 10px #fffbe399;transition:background .3s}

/* --- Moon --- */
.moon-halo{inset:-34%;border-radius:50%;background:radial-gradient(circle,#eef0ff2e 0 38%,#cdd5ff14 52%,transparent 70%)}
.moon-body{inset:0;border-radius:50%;overflow:hidden;background:#cfcdc4;box-shadow:0 0 24px 3px #e9edff3d,0 0 80px 20px #b9c3ff1f;animation:cel-librate 16s ease-in-out infinite alternate}
.moon-surface{inset:-5%;background:url(../assets/svg/moon-surface.svg?v=3) center/cover no-repeat;filter:brightness(1.12) contrast(1.05);translate:calc(var(--px) * -4px) calc(var(--py) * -4px);transition:translate .8s var(--spring)}
/* Sphere shading, a waxing-gibbous terminator, earthshine on the dark side, and a bright rim on the lit edge. */
.moon-shade{inset:0;border-radius:50%;background:radial-gradient(circle at calc(68% + var(--px) * 5%) calc(30% + var(--py) * 5%),#fffef51a 0,transparent 34%,#0000002e 66%,#00000080 100%);box-shadow:inset 22px 5px 22px -5px #070a1ce6,inset 9px 2px 10px -2px #1a2350a6,inset -2px -1px 2px #fffef56b}

@keyframes cel-spin{to{rotate:360deg}}
@keyframes cel-float{from{translate:calc(var(--px) * 3px) calc(var(--py) * 3px - 3px)}to{translate:calc(var(--px) * 3px) calc(var(--py) * 3px + 3px)}}
@keyframes cel-pulse{from{scale:.96;opacity:.85}to{scale:1.05;opacity:1}}
@keyframes cel-boil{to{background-position:38px 19px}}
@keyframes cel-boil-b{to{background-position:-26px 13px}}
@keyframes cel-rotate{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cel-librate{from{rotate:-4deg;scale:.995}to{rotate:4deg;scale:1.005}}
@media(max-width:1100px){:root .hero-sticker.celestial{--cel:120px;right:2%}.celestial-ring text{font-size:11px}}
@media(prefers-reduced-motion:reduce){.celestial-ring,.orb,.sun-corona,.sun-rays,.sun-surface,.sun-spots,.moon-body{animation:none}.sun,.moon{transition:opacity .3s}}
.stars-paused .celestial *{animation-play-state:paused}
@media(max-width:820px){:root .hero-sticker.celestial{display:none}}

/* Cursor arrow matches the theme accent (the same colour as its label). */
.canvas-cursor>svg path{fill:#F1EB1C;stroke:#060606;transition:fill .3s,stroke .3s}
:root[data-theme=light] .canvas-cursor>svg path{fill:#009bff;stroke:#fff}
.sky .cloud{height:auto}
/* The sun's rays and the moon's halo may reach the screen edge; clip them there instead of widening the page. */
.hero{overflow-x:clip}
/* Tablet widths: the avatar tag sits under the headline (as on phones) instead of beside it, where it would touch the intro copy. */
@media(min-width:761px) and (max-width:900px){
  .designer-tag{display:block;position:relative;left:auto;top:auto;width:max-content;margin:22px auto 0;transform:none}
  .designer-avatar{position:static;width:56px;height:56px;margin:0 auto 6px;transform:none;border-width:2px}
  .designer-tag>span{position:absolute;left:-14px;bottom:9px;font-size:20px}
  .designer-tag b{margin-left:0}
}

/* Portrait in the About signature (replaces the "s." mark). */
.signed-by .signature-mark.has-photo{display:block;width:48px;height:48px;flex:none;padding:0;border-radius:50%;overflow:hidden;background:#1d1d1d;box-shadow:0 0 0 2px var(--orange),0 0 0 5px color-mix(in srgb,var(--orange) 18%,transparent);transition:transform .35s var(--spring)}
.signature-mark.has-photo img{display:block;width:100%;height:100%}
.signature-mark.has-photo img{object-fit:cover;border-radius:50%}
:root[data-theme=light] .signed-by .signature-mark.has-photo{box-shadow:0 0 0 2px var(--orange),0 6px 16px -6px #2a5c7a59}
@media(max-width:380px){.signed-by .signature-mark.has-photo{width:40px;height:40px}}
/* Hero avatar: the real photo, cropped by the existing circle. */
.designer-avatar{object-fit:cover;object-position:50% 40%}

/* Chat preview message bar: a real input that hands the question to the Ask AI panel. */
.chat-compose{gap:12px;transition:border-color .25s,box-shadow .25s}
.chat-compose input{flex:1;min-width:0;padding:8px 0;border:0;background:none;color:var(--ink);font:500 13px var(--body);outline:none}
.chat-compose input::placeholder{color:var(--muted);opacity:1;transition:opacity .3s}
.chat-compose:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 18%,transparent)}
.chat-compose button{display:grid;place-items:center;width:34px;height:34px;flex:none;border:0;border-radius:9px;background:#535353;color:#fff;transition:background .2s,scale .2s var(--spring)}
.chat-compose button .ui-icon{width:16px;height:16px;transition:translate .3s var(--spring)}
.chat-compose button:hover,.chat-compose:focus-within button{background:var(--orange);color:#060606}
.chat-compose button:hover .ui-icon{translate:2px -2px}
.chat-compose button:active{scale:.92}
:root[data-theme=light] .chat-compose button{background:var(--ink)}
:root[data-theme=light] .chat-compose button:hover,:root[data-theme=light] .chat-compose:focus-within button{background:var(--orange);color:#fff}
@media(max-width:600px){.chat-compose input{font-size:16px}}

/* Ask AI voice toggle and the "speaking" state on the reply being read aloud. */


/* Shared interaction details retained on the home page. */
.tool-row{display:flex;flex-wrap:wrap;gap:10px}
.tool-row span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #6b879744!important;border-radius:12px;background:#172b38!important;color:inherit!important;transition:transform .2s,border-color .2s,background .2s}
.tool-row span:hover{transform:translateY(-4px);border-color:var(--orange)!important;background:#213f50!important}
.tool-row img{display:block;width:30px;height:30px;object-fit:contain}
.dark-card .tool-row+p{max-width:32ch;line-height:1.6}
.service-details summary>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#111;font-size:17px;line-height:1}
.service-details:not([open]) summary>span{transform:rotate(180deg)}
.service-intro h3 em{display:block}
.canvas-cursor>.cursor-hand,.canvas-cursor>.cursor-text{display:none}
.canvas-cursor.is-link>.cursor-arrow,.canvas-cursor.is-drag>.cursor-arrow,.canvas-cursor.is-text>.cursor-arrow{display:none}
.canvas-cursor.is-link>.cursor-hand,.canvas-cursor.is-drag>.cursor-hand{display:block}
.canvas-cursor.is-drag>.cursor-hand{transform:rotate(-12deg)}
.canvas-cursor.is-text>.cursor-text{display:block}
.canvas-cursor.is-link>span,.canvas-cursor.is-drag>span{left:19px;top:25px}
.canvas-cursor.is-text>span{left:15px;top:23px}
.canvas-cursor>span,.canvas-cursor.is-link>span,.canvas-cursor.is-drag>span,.canvas-cursor.is-text>span{left:31px;top:2px;translate:none;display:inline-flex;align-items:center;gap:5px}
.canvas-cursor.is-action>.cursor-arrow{display:none}
.canvas-cursor.is-action>.cursor-hand{display:block}
.canvas-cursor.is-action>.cursor-text{display:none}
.canvas-cursor.is-action>span{left:31px;top:2px;translate:none;display:inline-flex;align-items:center;gap:5px}
.contact .hero-actions{max-width:760px;margin-inline:auto}.contact-email{white-space:nowrap}
@media(max-width:520px){.contact .hero-actions{width:100%}.contact .hero-actions .button{width:min(100%,330px)}}
a,button,summary,[role="button"]{cursor:pointer}
input,textarea{cursor:text}
.project-rail,.play-canvas,.compare-divider{cursor:grab}
.footer-wordmark{width:100%;max-width:none;display:flex;align-items:baseline;justify-content:space-between;font-size:clamp(36px,12.8vw,230px);letter-spacing:-.07em;line-height:1;padding:14px 0 26px;white-space:nowrap}
.footer-wordmark>span{flex:none;transition:transform .25s cubic-bezier(.22,1.2,.36,1),color .25s,text-shadow .25s}
.footer-wordmark:hover>span{color:#a6bac6}
.footer-wordmark>span:hover,.footer-wordmark:hover>span:hover{color:#ff6b36!important;transform:translateY(-.13em) rotate(-2deg);text-shadow:0 5px 22px #ff5a2055}
@media(max-width:600px){.footer-wordmark{font-size:11.5vw;letter-spacing:-.08em;padding:10px 0 20px}.tool-row span{width:48px;height:48px}.tool-row img{width:28px;height:28px}.hero h1{font-size:9.1vw}}
@media(min-width:761px) and (max-width:980px){.footer-content{display:block}.footer-big-link{white-space:normal;max-width:650px}.footer-columns{margin-top:38px;max-width:660px}}
@media(prefers-reduced-motion:reduce){.footer-wordmark>span:hover{transform:none}}

/* Publishing, graphic and website previews show the complete artwork. */
.service-preview{background:#e8eef2}
.service-preview>img,.is-horizontal .service-preview>img{object-fit:contain;object-position:center;background:#e8eef2}
.project-rail .project-image.actual-work{background:radial-gradient(circle at 50% 43%,#304e5e,#132731 76%);overflow:hidden}
.project-rail .project-image.actual-work img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;filter:none;transform:none;padding:10px}
.project-rail .project-card:hover .project-image.actual-work img{transform:scale(1.045)}
.project-rail .project-image.actual-work .image-caption{background:#102631b8;color:#fff;backdrop-filter:blur(8px);border-radius:4px;padding:4px 7px}
.project-rail .project-image.actual-work img{object-fit:cover;padding:0;box-shadow:none}
.service-preview-book{border:0;background:transparent;overflow:visible;box-shadow:none}
.book-stage{position:relative;height:clamp(240px,26vw,400px);display:grid;place-items:center;overflow:hidden;border:1px solid #a5bdc8;border-radius:13px;background:radial-gradient(circle at 48% 45%,#f4f0eb 0%,#d7e5ec 48%,#aecbdc 100%)}
.book-stage:before{content:'';position:absolute;left:10%;right:10%;bottom:5%;height:16%;border-radius:50%;background:#1b405345;filter:blur(16px)}
.book-stage-label,.book-stage-foot{position:absolute;z-index:2;color:#385568;font:700 7px var(--mono);letter-spacing:.08em}
.book-stage-label{top:12px;left:15px}.book-stage-foot{right:15px;bottom:11px;display:flex;align-items:center;gap:8px}
.book-stage-foot i{width:15px;height:1px;background:#7b9aab}
.book-jacket{position:relative;z-index:1;display:flex;width:min(83%,480px);height:80%;filter:drop-shadow(13px 18px 9px #24445765);transform:perspective(900px) rotateY(-7deg) rotateZ(-2deg);transition:transform .35s}
.service-preview-book:hover .book-jacket{transform:perspective(900px) rotateY(-2deg) rotateZ(0)}
.book-panel{height:100%;background-image:url('../assets/portfolio/ebook-my-published-ebooks-01.webp');background-repeat:no-repeat}
.book-back,.book-front{width:46.5%;background-size:215% 100%}.book-back{background-position:left center;box-shadow:inset -10px 0 12px #142d3140}.book-front{background-position:right center;box-shadow:inset 8px 0 12px #142d3124}
.book-spine{position:relative;width:7%;background:#f7d9dc;box-shadow:inset 4px 0 7px #894d6b4d,inset -4px 0 7px #894d6b4d}
.book-spine:after{content:'VALLEY OF THE DUDES';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);width:max-content;color:#d22085;font:800 clamp(7px,.7vw,11px) var(--display);letter-spacing:.07em}
.book-jacket{width:64%;height:73%;margin-right:18%;transform:perspective(900px) rotateY(12deg) rotateZ(-6deg);filter:drop-shadow(10px 16px 8px #2444575b)}
.service-preview-book:hover .book-jacket{transform:perspective(900px) rotateY(5deg) rotateZ(-4deg)}
.book-standing{position:absolute;z-index:2;left:62%;top:8%;width:28%;height:84%;display:flex;transform:perspective(900px) rotateY(-17deg) rotateZ(5deg);box-shadow:12px 17px 10px #23495e75,2px 2px 0 #fff8;transition:transform .35s}
.service-preview-book:hover .book-standing{transform:perspective(900px) rotateY(-9deg) rotateZ(2deg) translateY(-3px)}
.standing-spine{width:8%;height:100%;background:linear-gradient(90deg,#d5a8bf,#f6d3dd 45%,#e9acc8);box-shadow:inset -3px 0 4px #8a61728c}
.standing-face{width:92%;height:100%;background-image:url('../assets/portfolio/ebook-my-published-ebooks-01.webp');background-repeat:no-repeat;background-size:217% 100%;background-position:right center;border:1px solid #ffffffb0;box-shadow:inset 5px 0 8px #73275f33}
.service-preview-graphic{background:linear-gradient(135deg,#172635,#465c67);border-color:#7a909c}
.service-preview-graphic>img,.is-horizontal .service-preview-graphic>img{object-fit:cover;object-position:center 38%;background:#1f3540}
.service-preview-web>img,.is-horizontal .service-preview-web>img{object-fit:cover;object-position:top;background:#fff}
.service-preview-web .preview-bar,.service-preview-graphic .preview-bar{background:#e9eef2;color:#385161}.service-preview-web .preview-bar>span,.service-preview-graphic .preview-bar>span{color:#385161}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.is-horizontal .book-stage{height:clamp(200px,calc(100dvh - 545px),430px)}}
@media(max-width:900px){.book-stage{height:clamp(220px,44vw,340px)}}
@media(max-width:600px){.book-stage{height:auto;aspect-ratio:1.6}.book-jacket{width:62%;height:73%;margin-right:18%}.book-stage-label,.book-stage-foot{font-size:5px}.book-spine:after{font-size:6px}}
.service-view{display:inline-flex;align-items:center;gap:10px;margin-top:19px;color:var(--orange);font:700 11px var(--mono);letter-spacing:.02em;border-bottom:1px solid currentColor;padding-bottom:5px}
.service-view span{font-size:17px;line-height:1;transition:transform .2s}
.service-view:hover span{transform:translate(3px,-3px)}
.dark-card .tool-row+p{max-width:45ch}
@media(max-width:600px){.service-preview>img,.is-horizontal .service-preview>img{height:auto;aspect-ratio:1.6}}

/* Selected work uses art-directed mockups so every project stays fully visible. */
.project-rail .project-image.actual-work{
  isolation:isolate;
  padding:24px 34px;
  background:
    linear-gradient(#ffffff08 1px,transparent 1px),
    linear-gradient(90deg,#ffffff08 1px,transparent 1px),
    radial-gradient(circle at 48% 42%,#31596d 0%,#1c3b4b 47%,#112a36 100%);
  background-size:22px 22px,22px 22px,auto;
}
.project-rail .project-image.actual-work:before,
.project-rail .project-image.actual-work:after{content:'';position:absolute;pointer-events:none}
.project-rail .project-image.actual-work img{
  position:relative;z-index:2;width:auto;height:auto;max-width:84%;max-height:84%;
  object-fit:contain;object-position:center;padding:0;filter:none;
  box-shadow:0 22px 35px -18px #061119d9;
  transform:var(--art-rest,none);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s;
}
.project-rail .project-card:hover .project-image.actual-work img{
  transform:var(--art-hover,scale(1.025));
  box-shadow:0 28px 42px -18px #061119ed;
}
.project-rail .project-image.actual-work .project-arrow{z-index:6}

/* Brand identity: the artwork sits on layered presentation boards. */
.project-card[href*="#business-card"] .actual-work:before{
  z-index:0;width:58%;height:70%;left:18%;top:15%;border-radius:8px;
  background:#dfeaf0;transform:rotate(-7deg);box-shadow:0 18px 28px #07182155;
}
.project-card[href*="#business-card"] .actual-work:after{
  z-index:1;width:56%;height:68%;right:15%;top:17%;border-radius:8px;
  background:linear-gradient(145deg,#6554f6,#27c6ec);transform:rotate(6deg);
}
.project-card[href*="#business-card"] .actual-work img{
  max-width:68%;max-height:80%;border:7px solid #f4f6f7;border-radius:7px;
  --art-rest:rotate(-1.5deg);--art-hover:rotate(0deg) translateY(-4px) scale(1.025);
}

/* Logo: a clean illuminated display panel rather than a cropped image. */
.project-card[href*="#logo-design"] .actual-work:before{
  z-index:0;inset:17% 12%;border:1px solid #b8d9e966;border-radius:14px;
  background:linear-gradient(135deg,#ffffff10,#ffffff03);transform:rotate(-2deg);
}
.project-card[href*="#logo-design"] .actual-work:after{
  z-index:0;width:38%;height:7px;left:31%;bottom:13%;border-radius:50%;
  background:#07151c99;filter:blur(7px);
}
.project-card[href*="#logo-design"] .actual-work img{
  width:76%;max-width:76%;max-height:70%;border:7px solid #23343d;border-radius:10px;
  --art-rest:rotate(1.5deg);--art-hover:rotate(0deg) translateY(-4px) scale(1.025);
}

/* Website: full desktop capture with a smaller responsive-device detail. */
.project-card[href*="#novelkeys"] .actual-work:before{
  z-index:1;left:11%;right:11%;top:17%;height:20px;border-radius:10px 10px 0 0;
  background:radial-gradient(circle at 13px 10px,#ff705d 0 3px,transparent 3.5px),radial-gradient(circle at 24px 10px,#ffc34d 0 3px,transparent 3.5px),radial-gradient(circle at 35px 10px,#44cb75 0 3px,transparent 3.5px),#e9eef1;
  box-shadow:0 19px 35px #0718218c;
}
.project-card[href*="#novelkeys"] .actual-work:after{
  z-index:4;right:8%;bottom:10%;width:14%;height:52%;border:5px solid #111b21;border-radius:12px;
  background:url('../assets/portfolio/websites/novelkeys-cover.webp') top center/cover no-repeat;
  box-shadow:0 18px 24px #06131bc9;
}
.project-card[href*="#novelkeys"] .actual-work img{
  width:78%;max-width:78%;max-height:72%;border:7px solid #e9eef1;border-top-width:23px;border-radius:10px;
  --art-rest:translateY(4px);--art-hover:translateY(-1px) scale(1.018);
}

/* Book cover: standing-book presentation with visible page block. */
.project-card[href*="#book-covers"] .actual-work:before{
  z-index:1;width:31%;height:77%;left:35%;top:12%;border-radius:2px 8px 8px 2px;
  background:repeating-linear-gradient(90deg,#f8f5ea 0 2px,#d9d3c5 2px 3px);
  transform:perspective(700px) rotateY(-16deg) translateX(12px);
  box-shadow:14px 19px 26px #06151dbd;
}
.project-card[href*="#book-covers"] .actual-work:after{
  z-index:0;width:45%;height:12%;left:29%;bottom:7%;border-radius:50%;
  background:#06151dac;filter:blur(12px);
}
.project-card[href*="#book-covers"] .actual-work img{
  height:80%;max-height:80%;max-width:40%;border:1px solid #f8d074;border-radius:2px 6px 6px 2px;
  --art-rest:perspective(700px) rotateY(-13deg) rotateZ(-1deg);
  --art-hover:perspective(700px) rotateY(-6deg) rotateZ(0deg) translateY(-4px) scale(1.02);
}

/* Illustration: gallery print with two colourful backing mats. */
.project-card[href*="#illustrations"] .actual-work:before{
  z-index:0;width:48%;height:72%;left:22%;top:13%;border-radius:5px;
  background:#f3a79f;transform:rotate(-8deg);box-shadow:0 18px 26px #0719236b;
}
.project-card[href*="#illustrations"] .actual-work:after{
  z-index:1;width:48%;height:72%;right:20%;top:14%;border-radius:5px;
  background:#f3dc6e;transform:rotate(7deg);
}
.project-card[href*="#illustrations"] .actual-work img{
  height:80%;max-height:80%;max-width:53%;border:9px solid #f7f2ea;border-radius:4px;
  --art-rest:rotate(-1deg);--art-hover:rotate(0deg) translateY(-4px) scale(1.02);
}

/* Flyer: printed-sheet stack that preserves the complete artwork. */
.project-card[href*="#flyer-designs"] .actual-work:before{
  z-index:0;width:54%;height:76%;left:24%;top:13%;border-radius:4px;
  background:#eaf0f2;transform:rotate(7deg);box-shadow:0 16px 28px #0618218a;
}
.project-card[href*="#flyer-designs"] .actual-work:after{
  z-index:1;width:52%;height:74%;left:22%;top:14%;border-radius:4px;
  background:#a6dbe2;transform:rotate(-5deg);
}
.project-card[href*="#flyer-designs"] .actual-work img{
  height:80%;max-height:80%;max-width:58%;border:7px solid #f5f7f7;border-radius:4px;
  --art-rest:rotate(.5deg);--art-hover:rotate(0deg) translateY(-4px) scale(1.02);
}

/* Editorial layout: an open spread floating above a subtle desk mat. */
.project-card[href*="#ebook-layout-designs"] .actual-work:before{
  z-index:0;width:84%;height:68%;left:8%;top:17%;border-radius:50%;
  background:radial-gradient(ellipse,#0719239c 0%,#07192300 68%);filter:blur(8px);
}
.project-card[href*="#ebook-layout-designs"] .actual-work:after{
  z-index:1;width:1px;height:57%;left:50%;top:21%;background:#aab7bc80;box-shadow:0 0 8px #30444d;
}
.project-card[href*="#ebook-layout-designs"] .actual-work img{
  width:82%;max-width:82%;max-height:72%;border:8px solid #eef2f3;border-radius:6px;
  --art-rest:perspective(800px) rotateX(4deg);--art-hover:perspective(800px) rotateX(1deg) translateY(-4px) scale(1.018);
}

@media(max-width:600px){
  .project-rail .project-image.actual-work{padding:18px 20px}
  .project-card[href*="#novelkeys"] .actual-work:after{right:5%;width:16%;height:47%;border-width:3px}
  .project-card[href*="#novelkeys"] .actual-work img{width:82%;max-width:82%;border-width:5px;border-top-width:18px}
  .project-card[href*="#book-covers"] .actual-work img{max-width:48%}
  .project-card[href*="#business-card"] .actual-work img{max-width:74%}
}

/* Taste pass: one dominant artwork per card, with only essential format cues. */
.project-rail .project-image.actual-work{
  padding:20px 28px;
  background:#173542;
}
.project-rail .project-image.actual-work:before,
.project-rail .project-image.actual-work:after{display:none}
.project-rail .project-image.actual-work img{
  width:auto;height:auto;max-width:88%;max-height:86%;
  border:0;border-radius:0;padding:0;
  box-shadow:none;
  transform:none;
}
.project-rail .project-card:hover .project-image.actual-work img{
  transform:translateY(-3px) scale(1.012);
  box-shadow:none;
}

/* Wide identity work gets the full stage without extra presentation boards. */
.project-card[href*="#business-card"] .actual-work img{
  width:auto;max-width:86%;max-height:88%;
  border:6px solid #f4f6f7;
}
.project-card[href*="#logo-design"] .actual-work img{
  width:86%;max-width:86%;max-height:82%;
}

/* A single honest browser frame; the full website remains readable. */
.project-card[href*="#novelkeys"] .actual-work:before{display:none}
.project-card[href*="#novelkeys"] .actual-work:after{display:none}
.project-card[href*="#novelkeys"] .actual-work img{
  width:86%;max-width:86%;max-height:82%;
  border:6px solid #edf1f3;border-top-width:22px;border-radius:8px;
  transform:none;
}
.project-card[href*="#novelkeys"]:hover .actual-work img{transform:translateY(-3px) scale(1.012)}

/* The book alone supplies the depth; no unrelated decoration behind it. */
.project-card[href*="#book-covers"] .actual-work:before{
  display:block;z-index:1;width:35%;height:88%;left:34%;top:6%;
  border-radius:0 5px 5px 0;
  background:#eee9dc;border-right:8px solid #d5cebf;
  transform:translateX(12px);
  box-shadow:none;
}
.project-card[href*="#book-covers"] .actual-work img{
  z-index:2;height:88%;max-height:88%;max-width:42%;
  border:0;border-radius:0;
  transform:perspective(800px) rotateY(-8deg);
}
.project-card[href*="#book-covers"]:hover .actual-work img{
  transform:perspective(800px) rotateY(-3deg) translateY(-3px) scale(1.01);
}

/* Print and illustration work is shown as a single clean mounted piece. */
.project-card[href*="#illustrations"] .actual-work img,
.project-card[href*="#flyer-designs"] .actual-work img{
  height:88%;max-height:88%;max-width:72%;
  border:7px solid #f4f6f7;
}

/* The editorial spread stays wide and complete, without faux side panels. */
.project-card[href*="#ebook-layout-designs"] .actual-work img{
  width:88%;max-width:88%;max-height:84%;
  border:6px solid #eef1f2;
}

@media(max-width:600px){
  .project-rail .project-image.actual-work{padding:16px 18px}
  .project-card[href*="#business-card"] .actual-work img{max-width:88%;max-height:88%;border-width:4px}
  .project-card[href*="#novelkeys"] .actual-work img{width:90%;max-width:90%;border-width:4px;border-top-width:17px}
  .project-card[href*="#book-covers"] .actual-work img{height:90%;max-height:90%;max-width:49%}
  .project-card[href*="#book-covers"] .actual-work:before{height:90%;top:5%;width:41%;left:31%}
  .project-card[href*="#illustrations"] .actual-work img,
  .project-card[href*="#flyer-designs"] .actual-work img{height:90%;max-height:90%;max-width:76%;border-width:5px}
  .project-card[href*="#ebook-layout-designs"] .actual-work img{width:92%;max-width:92%;border-width:4px}
}

/* Final selected-work art direction: the work becomes the object it was made for. */
.project-rail .project-image.actual-work[data-mockup]{
  --stage:#d7dfe3;
  display:grid;place-items:center;
  padding:0;
  background:var(--stage);
  overflow:hidden;
}
.project-rail .project-image.actual-work[data-mockup]:before,
.project-rail .project-image.actual-work[data-mockup]:after{display:none!important}
.project-image[data-mockup] .project-presentation{
  position:relative;z-index:2;display:grid;place-items:center;
  transition:transform .38s cubic-bezier(.22,.8,.22,1);
}
.project-rail .project-image.actual-work[data-mockup] .project-presentation>img,
.project-rail .project-card:hover .project-image.actual-work[data-mockup] .project-presentation>img{
  display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  object-fit:contain!important;object-position:center!important;box-shadow:none!important;
  transform:none!important;filter:none;
}
.project-card:hover .project-image[data-mockup] .project-presentation{transform:translateY(-5px)}
.project-image[data-mockup] .project-arrow{z-index:8;background:#f5f3ee;color:#162d36;border:0}

/* Identity board: a large, complete artwork sheet. */
.project-image[data-mockup="identity"]{--stage:#bed3df}
.project-image[data-mockup="identity"] .project-presentation{
  width:50%;height:auto;aspect-ratio:1000/1062;
  background:#fff;padding:7px;
  box-shadow:0 20px 34px -18px #314c5d99;
  transform:rotate(-1.4deg);
}
.project-card:hover .project-image[data-mockup="identity"] .project-presentation{transform:rotate(0deg) translateY(-5px)}

/* Logo: treated as a finished environmental identity visual, not a thumbnail. */
.project-image[data-mockup="logo"]{--stage:#d7c0ac}
.project-image[data-mockup="logo"] .project-presentation{
  width:72%;aspect-ratio:1000/801;
  box-shadow:0 22px 38px -20px #3a2b2499;
}

/* Website: proper desktop browser and a secondary responsive crop. */
.project-image[data-mockup="website"]{--stage:#d9d3e7}
.project-image[data-mockup="website"] .project-presentation{
  width:80%;height:auto;
  padding:25px 8px 8px;background:#f7f5f0;border-radius:10px;
  box-shadow:0 22px 38px -18px #40394f88;
}
.project-image[data-mockup="website"] .project-presentation:before{
  content:'';position:absolute;left:12px;top:10px;width:7px;height:7px;border-radius:50%;
  background:#f06f5d;box-shadow:12px 0 #eab84c,24px 0 #54b87a;
}
.project-rail .project-image.actual-work[data-mockup="website"] .project-presentation>img{
  height:auto!important;aspect-ratio:2/1;object-fit:cover!important;object-position:top!important;
}
.project-image[data-mockup="website"] .project-phone{
  position:absolute;z-index:5;right:6.5%;bottom:8%;width:15%;height:61%;
  padding:15px 5px 6px;background:#10191d;border:3px solid #10191d;border-radius:15px;
  box-shadow:0 18px 28px -14px #393146aa;overflow:hidden;
  transition:transform .38s cubic-bezier(.22,.8,.22,1);
}
.project-image[data-mockup="website"] .project-phone:before{
  content:'';position:absolute;z-index:2;top:5px;left:50%;translate:-50% 0;width:36%;height:5px;border-radius:6px;background:#26343a;
}
.project-rail .project-image.actual-work[data-mockup="website"] .project-phone img{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  border:0!important;padding:0!important;border-radius:6px!important;
  object-fit:cover!important;object-position:20% top!important;transform:none!important;box-shadow:none!important;
}
.project-card:hover .project-image[data-mockup="website"] .project-phone{transform:translateY(-7px)}

/* Book: cover, page block and spine read as one object. */
.project-image[data-mockup="book"]{--stage:#cabb90}
.project-image[data-mockup="book"] .project-presentation{
  height:88%;aspect-ratio:784/1200;
  padding:0 10px 0 0;background:#e5e6e3;
  box-shadow:18px 24px 34px -20px #4b402599;
  transform:perspective(900px) rotateY(-10deg) rotateZ(-.8deg);
}
.project-image[data-mockup="book"] .project-presentation:after{
  content:'';position:absolute;right:3px;top:4px;bottom:4px;width:7px;
  background:#c9cbc7;
}
.project-card:hover .project-image[data-mockup="book"] .project-presentation{transform:perspective(900px) rotateY(-4deg) translateY(-5px)}

/* Illustration and flyer: physical mounted prints, full artwork visible. */
.project-image[data-mockup="illustration"]{--stage:#e0bfbd}
.project-image[data-mockup="illustration"] .project-presentation{
  height:87%;aspect-ratio:1;background:#f8f4ed;padding:9px;
  box-shadow:0 20px 34px -18px #65474680;
}
.project-image[data-mockup="flyer"]{--stage:#b7d5d7}
.project-image[data-mockup="flyer"] .project-presentation{
  height:88%;aspect-ratio:1000/1062;background:#f7f6f1;padding:8px;
  box-shadow:0 20px 34px -18px #31585d80;
  transform:rotate(1deg);
}
.project-card:hover .project-image[data-mockup="flyer"] .project-presentation{transform:rotate(0deg) translateY(-5px)}

/* Editorial spread: a wide proof sheet with the whole layout intact. */
.project-image[data-mockup="editorial"]{--stage:#d4ddd6}
.project-image[data-mockup="editorial"] .project-presentation{
  width:86%;height:84%;background:#f7f7f3;padding:10px;
  box-shadow:0 20px 34px -18px #465a4c80;
}

@media(max-width:600px){
  .project-image[data-mockup] .project-arrow{right:9px;top:9px}
  .project-image[data-mockup="identity"] .project-presentation{width:62%;padding:5px}
  .project-image[data-mockup="logo"] .project-presentation{width:84%}
  .project-image[data-mockup="website"] .project-presentation{width:84%;padding:20px 6px 6px}
  .project-image[data-mockup="website"] .project-presentation:before{top:8px;left:9px;width:5px;height:5px;box-shadow:9px 0 #eab84c,18px 0 #54b87a}
  .project-image[data-mockup="website"] .project-phone{right:4%;width:17%;height:56%;padding:12px 3px 4px;border-width:2px;border-radius:10px}
  .project-image[data-mockup="book"] .project-presentation{height:90%}
  .project-image[data-mockup="illustration"] .project-presentation,
  .project-image[data-mockup="flyer"] .project-presentation{height:89%;padding:6px}
  .project-image[data-mockup="editorial"] .project-presentation{width:90%;height:84%;padding:6px}
}

@media(prefers-reduced-motion:reduce){
  .project-image[data-mockup] .project-presentation,
  .project-image[data-mockup] .project-phone{transition:none!important}
}

/* Generated feature art: every image is authored at the card's 3:2 ratio. */
.project-rail .project-image.actual-work{
  aspect-ratio:3 / 2;
  height:auto!important;
  padding:0!important;
  background:#4f5152;
  display:block;
  overflow:hidden;
}
.project-rail .project-image.actual-work:before,
.project-rail .project-image.actual-work:after{
  display:none!important;
}
.project-rail .project-image.actual-work>img,
.project-rail .project-card:hover .project-image.actual-work>img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  object-fit:cover!important;
  object-position:center!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
}
.project-rail .project-image.actual-work .project-arrow{
  z-index:4;
  background:#f5f3eecc;
  color:#162d36;
  border:0;
}

@media(max-width:600px){
  .project-rail .project-image.actual-work{aspect-ratio:3 / 2;padding:0!important}
}

/* Generated service art: one finished 3:2 image, with the process copy removed. */
.services-story .service-main{
  grid-template-columns:minmax(280px,.82fr) minmax(440px,1.18fr);
  gap:48px;
}
.services-story .service-sheet{
  padding-block:36px;
}
.services-story .service-preview,
.services-story .service-preview-book,
.services-story .service-preview-graphic,
.services-story .service-preview-web{
  position:relative;
  aspect-ratio:3 / 2;
  overflow:hidden!important;
  border-radius:10px;
  border:0!important;
  background:#4f5152!important;
  box-shadow:none!important;
  transform:none!important;
}
.services-story .service-preview>img,
.services-story .is-horizontal .service-preview>img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:3 / 2;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}

@media(max-width:900px){
  .services-story .service-main{grid-template-columns:1fr;gap:26px}
}