/* Brush accents stay live text; self-hosted Knewave, SIL Open Font License. */
@font-face{font-family:GoBam Brush;src:url('fonts/knewave.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.intro h2 span,.section-head h2 span,.difference-copy h2 span,.faq h2 span,.contact h2 em{font-family:GoBam Brush,cursive;font-weight:400;font-style:normal;letter-spacing:-.025em;line-height:1.3;display:inline-block;transform:rotate(-2deg);padding:.06em .08em .16em 0;text-wrap:balance}
.section-head h2 span{font-size:.96em}.intro h2 span{font-size:.9em}.difference-copy h2 span{color:var(--blue);font-size:.95em}.faq h2 span{color:var(--blue)}.contact h2 em{font-size:1.02em;text-shadow:2px 3px 0 #f7f5ef60}
.services .section-head h2::after,.approach .section-head h2::after,.faq h2::after,.intro h2 span::after{display:none}
.section-head h2,.intro h2,.difference-copy h2,.faq h2{line-height:1.16;overflow:visible}
/* A hard edge establishes thickness; a softer shadow separates it from the page. */
.button,.nav-cta{position:relative;border:1px solid #20203b;box-shadow:0 5px 0 #45415c,0 12px 18px #20203b24,inset 0 1px 0 #ffffff55;transform:translateY(-2px);transition:transform .22s ease,box-shadow .22s ease}
@media(hover:hover) and (pointer:fine){.button:hover,.nav-cta:hover,.contact .button:hover{transform:translateY(-6px);box-shadow:0 9px 0 #45415c,0 20px 25px #20203b30,inset 0 1px 0 #ffffff55}}
.button:active,.nav-cta:active,.contact .button:active{transform:translateY(3px);box-shadow:0 1px 0 #45415c,0 3px 6px #20203b20,inset 0 1px 4px #0002}
.button:focus-visible,.nav-cta:focus-visible{outline:3px solid var(--blue);outline-offset:7px}
.service-grid .service{box-shadow:2px 3px 0 #20203b25,8px 16px 22px #20203b15,18px 32px 42px #20203b0b;border-top-color:#ffffffaa;transition:box-shadow .4s,transform .4s}
@media(hover:hover) and (pointer:fine){.service-grid .service:hover{box-shadow:2px 4px 0 #20203b28,10px 24px 30px #20203b20,20px 45px 55px #20203b12}}
.service-art{transform:perspective(800px) rotateX(calc(6deg + var(--depth-x,0deg))) rotateY(var(--depth-y,0deg));filter:drop-shadow(8px 16px 9px #20203b25);transition:transform .5s ease;transform-origin:50% 60%}
.service-art>path[fill]{filter:drop-shadow(4px 7px 2px #20203b28)}
.service-art .moving-piece{filter:drop-shadow(5px 10px 3px #20203b40)}
.studio-collage{perspective:1000px;transform-style:preserve-3d}
.paint-poster{transform:rotateX(calc(7deg + var(--depth-x,0deg))) rotateY(calc(-7deg + var(--depth-y,0deg))) translateZ(35px);box-shadow:2px 4px 0 #8ea02d,14px 25px 24px #20203b26,28px 45px 55px #20203b20;transition:transform .5s ease}
.collage-shape{filter:drop-shadow(8px 18px 9px #20203b22)}
.collage-star{text-shadow:2px 3px 0 #262080,6px 9px 0 #262080,14px 23px 16px #20203b40}
.scroll-piece{transform:perspective(800px) translateY(var(--art-travel)) rotateZ(var(--art-turn)) rotateY(calc(var(--art-turn) * 1.6)) rotateX(calc(var(--art-turn) * -.8));filter:drop-shadow(9px 18px 10px #20203b24)}
.step-art{perspective:650px}.step-art>span{text-shadow:2px 3px 0 #aaa7a0,6px 8px 0 #75727d,12px 20px 14px #0005;transform:rotateY(-12deg)}.step-art i{filter:drop-shadow(7px 13px 4px #0004)}
.contact form{box-shadow:2px 4px 0 #dad6ce,12px 20px 22px #20203b25,25px 38px 45px #20203b18;border-top:1px solid #fff}
.questions details{box-shadow:3px 5px 0 #20203b0c,6px 10px 15px #20203b0b}
.sculpture .core{transform:rotate(-9deg) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));transition:transform .5s ease;box-shadow:inset -18px -15px 30px #20203b38,inset 5px 6px 12px #fff7,18px 35px 28px #20203b28,30px 60px 65px #20203b20}
.sculpture .paint-planes{filter:drop-shadow(8px 16px 7px #20203b30)}
@media(max-width:700px){.intro h2 span,.section-head h2 span,.difference-copy h2 span,.faq h2 span{font-size:.88em;letter-spacing:-.035em}.faq>div:first-child{grid-template-columns:1fr}.faq .question-art{margin:20px 0 0;width:135px;max-width:100%}.service-art{filter:drop-shadow(5px 9px 5px #20203b25)}.paint-poster{transform:rotateX(5deg) rotateY(-6deg)}.contact h2 em{font-size:.98em}}
@media(prefers-reduced-motion:reduce){.service-art,.paint-poster,.sculpture .core{transform:none!important}.button,.nav-cta{transition:none}.button:hover,.button:active,.nav-cta:hover,.nav-cta:active{transform:none}}
body.motion-paused .service-art,body.motion-paused .paint-poster,body.motion-paused .sculpture .core{transform:none!important}body.motion-paused .button,body.motion-paused .nav-cta{transition:none;transform:none!important}

.approach .section-head h2 span{color:var(--pop)}
body.motion-paused .service-art,body.motion-paused .paint-poster,body.motion-paused .sculpture .core{transition:none!important}

/* Taped paper pivots at the top-center attachment, never translates away. */
.service-grid .service,.paint-poster,.contact form{
 --paper-hinge:0deg;transform-origin:50% 0;transform-style:preserve-3d;
 transform:perspective(900px) rotateX(var(--paper-hinge));
 transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,opacity .8s ease;
}
.service::before,.contact form::before,.paint-poster .tape-one{
 left:50%;top:-14px;bottom:auto;right:auto;height:28px;rotate:0deg;
 transform-origin:50% 50%;transform:translateX(-50%) translateZ(2px) rotateX(calc(-1 * var(--paper-hinge))) rotateZ(var(--tape-angle,-2deg));
 transition:transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.paint-poster .tape-two{display:none}
.paint-poster{box-shadow:2px 3px 0 #20203b25,8px 16px 22px #20203b18}
.service-art{transform:none!important}
@media(hover:hover) and (pointer:fine){
 .service-grid .service:hover,.paint-poster:hover{--paper-hinge:3deg}
 .contact form:hover:not(:focus-within){--paper-hinge:1.5deg}
 .paint-poster:hover{box-shadow:2px 4px 0 #20203b25,8px 23px 28px #20203b20}
}
@media(prefers-reduced-motion:reduce){
 .service-grid .service,.paint-poster,.contact form{--paper-hinge:0deg!important;transform:none!important;transition:none}
}
body.motion-paused .service-grid .service,body.motion-paused .paint-poster,body.motion-paused .contact form{--paper-hinge:0deg!important;transform:none!important;transition:none}

/* Illustration layers can slide while the taped sheet stays anchored. */
.service .service-art .moving-piece,.service .service-art .sliding-line{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){
 .service:hover .moving-piece{transform:translate(5px,-6px) rotate(4deg)}
 .service:hover .sliding-line{transform:translate(-5px,3px)}
}
@media(prefers-reduced-motion:reduce){.service .moving-piece,.service .sliding-line{transform:none!important;transition:none!important}}
body.motion-paused .service .moving-piece,body.motion-paused .service .sliding-line{transform:none!important;transition:none!important}

/* Keep the entire tape strip above the hinging paper, including its lower half. */
.service::before,.contact form::before,.paint-poster .tape-one{
 z-index:10;border:0;width:var(--tape-width,78px);height:28px;
 background-color:rgb(250 245 219 / var(--tape-opacity,.76));
 background-image:linear-gradient(4deg,#ffffff08,#ffffff33 48%,#d2c8a922),repeating-linear-gradient(97deg,#fff0 0 3px,#ffffff12 3px 4px,#fff0 4px 8px);
 box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #a49c7d33;
 clip-path:var(--tape-edge,polygon(2% 0,98% 0,100% 25%,97% 50%,100% 75%,98% 100%,1% 100%,3% 75%,0 50%,3% 25%));
 backface-visibility:visible;
}

/* Keep the reveal stroke animation from overriding the squiggle's hover glide. */
.art-motion .art-section.art-visible .draw-line.sliding-line{
 transition:stroke-dashoffset 1.6s cubic-bezier(.22,.7,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);
}

/* Fixed-size decoration: FAQ expansion must not reposition these dots. */
.faq::before{inset:50px 3% auto auto;width:52px;height:72px;background:radial-gradient(circle at 38px 26px,var(--ink) 0 2px,transparent 3px),radial-gradient(circle at 14px 10px,var(--ink) 0 4px,transparent 5px),radial-gradient(circle at 26px 54px,var(--ink) 0 2px,transparent 3px)}
.questions summary span{display:inline-block;transition:transform .25s ease}
body.motion-paused .questions summary span{transition:none}

/* Phone controls remain readable without focus zoom or intrinsic grid overflow. */
@media(max-width:700px){
 .contact{grid-template-columns:minmax(0,1fr)}
 .contact>div,.contact form,.contact label,.contact .form-row{min-width:0}
 .contact input,.contact select,.contact textarea{font-size:16px;min-width:0}
 #contact-security{min-height:140px}
 .palette-picker button,.menu-toggle,.motion-toggle{min-height:44px}
}
@media(hover:none){
 .button:hover,.nav-cta:hover,.contact .button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #45415c,0 12px 18px #20203b24,inset 0 1px 0 #ffffff55}
 .button:active,.nav-cta:active,.contact .button:active{transform:translateY(3px);box-shadow:0 1px 0 #45415c,0 3px 6px #20203b20,inset 0 1px 4px #0002}
}