/* Landing-only, finite hover animations. Reduced motion leaves static artwork. */
.services .note{min-height:365px}
.services .yellow{--note-tilt:-4deg}
.services .blue{--note-tilt:5deg}
.services .pink{--note-tilt:-5deg}
.services .note:is(:hover,:focus-within){animation:note-hop 700ms cubic-bezier(.2,.7,.3,1) both}
.hero-icon{position:relative;display:block;width:56px;height:60px;margin-bottom:18px}
.hero-icon>img,.eye-art{display:block;width:50px;height:56px;object-fit:contain;transform-origin:50% 65%}
.eye-art{width:56px;height:48px;margin-top:5px;overflow:visible}
.eye-iris{transform-box:fill-box;transform-origin:center}
.pencil-trail{position:absolute;left:2px;bottom:-4px;width:78px;height:20px;overflow:visible}
.pencil-trail path{stroke:#4f421a;stroke-width:2;stroke-linecap:round;stroke-dasharray:130;stroke-dashoffset:130;opacity:0}
.note:is(:hover,:focus-within) .pencil-icon>img{animation:pencil-write 700ms ease-in-out 4}
.note:is(:hover,:focus-within) .pencil-trail path{animation:ink-write 2.8s ease both}
.note:is(:hover,:focus-within) .eye-iris{animation:eye-look 1.8s ease-in-out 2}
.note:is(:hover,:focus-within) .star-icon>img{animation:star-shine 1.2s ease-in-out 3}
.star-spark{position:absolute;font-size:20px;color:#702880;line-height:1;opacity:0}
.spark-one{right:-6px;top:0}.spark-two{left:-10px;bottom:2px;font-size:14px}
.note:is(:hover,:focus-within) .star-spark{animation:tiny-spark 1.2s ease-in-out 3}
.note:is(:hover,:focus-within) .spark-two{animation-delay:250ms}
.portrait-spinner{display:inline-flex;width:145px;max-width:28%;flex-shrink:0;align-items:center;justify-content:center;transform-origin:center;perspective:700px}
.portrait-line .portrait-spinner img{display:block;width:100%;max-width:none;height:auto;transform-origin:50% 50%;transform:rotateX(var(--portrait-x,0deg)) rotateY(var(--portrait-y,0deg)) rotateZ(var(--portrait-z,0deg));backface-visibility:hidden}
@keyframes note-hop{0%{transform:rotate(var(--note-tilt)) translateY(0)}35%{transform:rotate(0deg) translateY(-13px)}60%{transform:rotate(1deg) translateY(-3px)}80%{transform:rotate(-1deg) translateY(-7px)}100%{transform:rotate(0deg) translateY(-5px)}}
@keyframes pencil-write{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(7px,-3px) rotate(-12deg)}50%{transform:translate(2px,2px) rotate(5deg)}75%{transform:translate(10px,-2px) rotate(-8deg)}}
@keyframes ink-write{0%{stroke-dashoffset:130;opacity:0}10%{opacity:1}85%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes eye-look{0%,100%{transform:translate(0,0)}20%,35%{transform:translate(3px,1px)}65%,80%{transform:translate(-3px,-1px)}}
@keyframes star-shine{0%,100%{transform:scale(1) rotate(0);filter:brightness(1)}45%{transform:scale(1.18) rotate(12deg);filter:brightness(1.2)}75%{transform:scale(.95) rotate(-6deg);filter:brightness(1)}}
@keyframes tiny-spark{0%,100%{opacity:0;transform:scale(.5)}45%,60%{opacity:1;transform:scale(1.15)}}
@media(max-width:740px){.services .note{min-height:320px}.portrait-spinner{width:110px}}
@media(prefers-reduced-motion:reduce){.services .note:is(:hover,:focus-within){animation:none;transform:rotate(var(--note-tilt))}.hero-icon *,.portrait-line .portrait-spinner img{animation:none!important}.pencil-trail,.star-spark{display:none}}

@media(prefers-reduced-motion:reduce){.portrait-line .portrait-spinner img{transform:none}}

/* Work principles start neutral; draw the tick only on hover. */
.principles li,.principles li:last-child{
  background:transparent;border-color:#d4d3ca;color:var(--muted);
  transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease,transform 220ms ease;
}
.principles li::before{content:none}
.principle-check{width:18px;height:18px;flex-shrink:0;margin-top:3px;overflow:visible}
.principle-check rect{stroke:currentColor;stroke-width:1.5;fill:none}
.principle-check path{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset 350ms ease 80ms}
.principles li:hover{background:var(--green-bg);border-color:#d5dfa9;color:var(--green-text);transform:translateY(-2px)}
.principles li:hover .principle-check path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.principles li:hover{transform:none}.principle-check path{transition:none}}

.hero .hero-identity{margin:24px 0 12px;color:var(--muted)}.hero .hero-identity+h1{margin-top:0;white-space:normal;max-width:100%;overflow-wrap:normal}.hero-title-line{white-space:normal;overflow-wrap:normal}