nav a{transition:color .2s}nav a:hover{color:var(--blue)}.button{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.button:hover{box-shadow:0 8px 22px #00769b22}.button:active{transform:translateY(0)}.category-cards a{transition:background .25s,box-shadow .25s}.category-cards a:hover{box-shadow:inset 0 -3px var(--blue)}.service-priced{transition:background .2s}.service-priced:hover{background:color-mix(in srgb,var(--blue) 5%,transparent)}.project-image{transition:box-shadow .3s}.project:hover .project-image{box-shadow:0 16px 30px #0001}.scroll-progress{position:fixed;left:0;top:0;z-index:1000;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--blue);pointer-events:none}.contact-float{position:fixed;bottom:22px;right:24px;z-index:20;padding:11px 18px;border:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:0 5px 20px #0002;border-radius:28px;font-size:12px;display:flex;gap:12px;align-items:center}.contact-float:before{content:'';width:7px;height:7px;border-radius:50%;background:#06c755}.contact-float:hover{border-color:var(--blue)}.reveal-in{animation:reveal-in .65s cubic-bezier(.2,.6,.2,1) both}@keyframes reveal-in{from{opacity:.25;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}header>nav{gap:20px}.header-tools{gap:14px}.mobile-menu{z-index:30}@media(max-width:1050px){header>nav{gap:14px;font-size:12px}.header-tools{gap:10px}.nav-contact{font-size:12px}}@media(max-width:900px){header>nav{display:none}.mobile-menu{display:block}.brand{font-size:20px}}@media(max-width:600px){.contact-float{right:14px;bottom:14px;padding:9px 13px;font-size:11px}.brand{font-size:18px}}@media(prefers-reduced-motion:reduce){.reveal-in{animation:none}.article-card,.article-card img,.button,.project-image{transition:none!important}.article-card:hover,.button:hover{transform:none}}
.studio-drawing{width:min(100%,420px);margin:-12px 0 24px;color:var(--blue);position:relative}.studio-drawing svg{width:100%;height:42px;display:block;overflow:visible}.drawing-guide{stroke:currentColor;stroke-width:1;opacity:.4}.drawing-curve{stroke:currentColor;stroke-width:2.5;stroke-dasharray:430;stroke-dashoffset:430;animation:studio-draw 1.6s .2s ease forwards}.drawing-nodes{fill:var(--paper);stroke:currentColor;stroke-width:2}.studio-drawing>span{display:block;text-align:right;font-size:10px;letter-spacing:.08em;margin-top:2px;opacity:.75}@keyframes studio-draw{to{stroke-dashoffset:0}}
.studio-ribbon{display:flex;align-items:center;border-block:1px solid var(--line);background:color-mix(in srgb,var(--blue) 7%,var(--paper));margin:0 0 70px;overflow:hidden}.ribbon-window{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}.ribbon-track{display:flex;width:max-content;animation:studio-ribbon 34s linear infinite}.ribbon-track>span{display:block;white-space:nowrap;padding:22px 24px;font-size:clamp(17px,2vw,27px);font-weight:600;color:var(--blue);word-spacing:14px}.studio-ribbon>button{align-self:stretch;flex:0 0 56px;background:transparent;color:var(--ink);border:0;border-left:1px solid var(--line);font-size:16px}.ribbon-paused .ribbon-track,.studio-ribbon:focus-within .ribbon-track{animation-play-state:paused}@keyframes studio-ribbon{to{transform:translateX(-50%)}}
.category-cards a,.article-card{position:relative;isolation:isolate}.category-cards a:after,.article-card:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,50%),#16bce51a,transparent 75%);transition:opacity .25s}.category-cards a.studio-hover:after,.article-card.studio-hover:after{opacity:1}.service-row>b{display:inline-block;transition:transform .25s,color .25s}.service-row:hover>b{transform:translate(5px,-5px);color:var(--blue)}.category-cards a>b{transition:transform .25s}.category-cards a:hover>b{transform:rotate(45deg)}.project-image{position:relative}.project-image:after{content:'ดูรายละเอียด ↗';position:absolute;left:18px;bottom:18px;padding:10px 15px;border:1px solid #ffffff80;border-radius:30px;background:#111c;color:white;font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}.project:hover .project-image:after,.project:focus-visible .project-image:after{opacity:1;transform:translateY(0)}
@media(hover:hover) and (pointer:fine){.project .project-image{transition:transform .25s,box-shadow .25s;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.project.studio-hover .project-image{box-shadow:0 18px 38px #007b9a22}.art-sticker{animation:sticker-drift 5s ease-in-out infinite}@keyframes sticker-drift{50%{translate:0 -8px;rotate:3deg}}}
@media(max-width:600px){.studio-drawing{margin:0 0 20px;width:86%}.studio-drawing svg{height:32px}.studio-ribbon{margin-bottom:44px}.ribbon-track>span{padding:16px 20px}.studio-ribbon>button{flex-basis:44px}}
@media(prefers-reduced-motion:reduce){.drawing-curve{animation:none;stroke-dashoffset:0}.ribbon-track,.art-sticker{animation:none!important}.ribbon-track>span+span{display:none}.ribbon-window{overflow:auto;mask-image:none}.studio-ribbon>button{display:none}.project-image,.service-row>b,.category-cards a>b{transition:none!important}.project .project-image{transform:none!important}}
.rotating-headline{display:inline-block;min-height:1.4em}.phrase-enter{animation:phrase-enter .22s ease-out both}@keyframes phrase-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.headline-toggle{position:absolute;right:-32px;bottom:-2px;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--blue);font-size:11px}.headline-toggle:hover,.headline-toggle:focus-visible{background:color-mix(in srgb,var(--blue) 12%,var(--paper));border-color:var(--blue)}
.services .section-head .service-heading-note{font-size:clamp(14px,1.4vw,18px);font-weight:400;line-height:1.7;color:var(--muted);margin:12px 0 0;max-width:none;letter-spacing:0}
.studio-ribbon{margin-bottom:0}.ribbon-track>span{padding:11px 20px;font-size:clamp(15px,1.35vw,19px);word-spacing:10px}.studio-ribbon>button{flex-basis:44px;font-size:13px}.studio-ribbon+.work{padding-top:36px}.studio-ribbon+.work .section-head h2{margin-top:6px}@media(max-width:600px){.studio-ribbon{margin-bottom:0}.ribbon-track>span{padding:9px 16px;font-size:14px;word-spacing:8px}.studio-ribbon+.work{padding-top:28px}.studio-ribbon>button{flex-basis:38px}}
.pointer-halo{position:fixed;left:0;top:0;width:520px;height:520px;z-index:-1;pointer-events:none;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(0,118,155,.065) 0%,rgba(0,138,185,.04) 30%,rgba(0,155,205,.012) 54%,transparent 70%);transition:opacity .25s;will-change:transform}.pointer-halo.is-visible{opacity:1}[data-theme="dark"] .pointer-halo{background:radial-gradient(circle,rgba(0,135,185,.08) 0%,rgba(0,145,195,.045) 30%,rgba(0,155,205,.012) 54%,transparent 70%)}@media(hover:none),(pointer:coarse){.pointer-halo{display:none}}@media(prefers-reduced-motion:reduce){.pointer-halo{transition:none}}
.hero-dots.hero-counter{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em;min-width:82px;justify-content:center;color:var(--muted)}
.studio-ribbon:focus-within .ribbon-track{animation-play-state:running}.studio-ribbon.ribbon-paused .ribbon-track{animation-play-state:paused}