.works .projects-more{display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;margin:32px auto 0;border-radius:50%;color:#59458c;cursor:pointer}
.works .projects-more[hidden]{display:none}
.works .projects-more svg{width:22px;height:22px}
.works .projects-more span{font-size:28px;line-height:1}
.work-toolbar{display:flex;align-items:flex-start;gap:10px;margin-bottom:32px}
.work-toolbar .filters{margin-bottom:0}
.project-sort{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;z-index:4}
.sort-trigger{display:inline-flex;min-height:42px;min-width:158px;padding:10px 14px 10px 17px;align-items:center;justify-content:space-between;gap:18px;border:1px solid #fff;border-radius:999px;background:#ffffff60;color:#626978;font:12px Manrope,system-ui,sans-serif;cursor:pointer;outline:0;box-shadow:inset 0 1px 1px #fff8;transition:background 180ms ease,color 180ms ease,transform 140ms cubic-bezier(.23,1,.32,1)}
.sort-trigger svg{width:15px;height:15px;color:#625b78;transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.sort-trigger:hover,.sort-trigger:focus-visible{background:#ffffffa0;color:#4d425f}
.sort-trigger:active{transform:scale(.98)}
.project-sort.is-open .sort-trigger svg{transform:rotate(180deg)}
.sort-menu{position:absolute;left:0;top:calc(100% + 8px);display:grid;width:196px;padding:7px;border:1px solid #fff;border-radius:19px;background:rgba(248,249,253,.9);box-shadow:0 18px 45px #53617d24,inset 0 1px 1px #fff;backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.98);transform-origin:top left;transition:opacity 160ms cubic-bezier(.23,1,.32,1),transform 180ms cubic-bezier(.23,1,.32,1),visibility 0s linear 180ms}
.project-sort.is-open .sort-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sort-menu button{display:flex;width:100%;padding:10px 11px;align-items:center;justify-content:space-between;border:0;border-radius:13px;background:transparent;color:#555b6d;font:12px Manrope,system-ui,sans-serif;text-align:left;cursor:pointer;transition:background 140ms ease,color 140ms ease}
.sort-menu button:hover,.sort-menu button:focus-visible{background:#e9e2f5;color:#4f3e72;outline:0}
.sort-menu button span{opacity:0;color:#6555a6;font-weight:700}
.sort-menu button[aria-checked="true"]{background:#eee8f7;color:#59458c}
.sort-menu button[aria-checked="true"] span{opacity:1}
.project-placeholder.na-estrada:before{background:linear-gradient(145deg,#344b63,#778b94 52%,#d5af8e)}
.project-placeholder.gui-santos:before{background:linear-gradient(145deg,#304a4a,#879e84 55%,#d5bc7e)}
.dialog-body .project-actions{display:flex;flex-wrap:wrap;gap:10px;max-width:640px;margin:28px auto 6px}
.dialog-body .project-actions .btn{margin:0}
.dialog-body .project-card{margin-bottom:10px}
.dialog-body .project-card .project-caption{padding-bottom:4px}
.project-tags{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.works .project-tags{flex-wrap:nowrap;gap:5px}
.works .project-tags .badge{padding:6px 8px;font-size:8px;letter-spacing:.07em;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
 .works .filters{display:inline-flex;flex-wrap:nowrap;align-items:center}
 .works .filters .filter{transition:opacity 160ms cubic-bezier(.23,1,.32,1),transform 160ms cubic-bezier(.23,1,.32,1),display 160ms allow-discrete}
 .works .filters .filter:not(.active){display:none;opacity:0;transform:translateX(-6px)}
 .works .filters:hover .filter,.works .filters:focus-within .filter{display:inline-flex;opacity:1;transform:none}
 @starting-style{.works .filters:hover .filter:not(.active),.works .filters:focus-within .filter:not(.active){opacity:0;transform:translateX(-6px)}}
}
.dialog:not(.intro) .dialog-head{position:sticky;top:0;z-index:12;background:rgba(244,246,251,.9);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
.dialog:not(.intro) .dialog-head .btn{position:relative;z-index:1;flex-shrink:0}
.section-heading{align-items:center}
.about .skill-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;width:min(100%,465px);max-width:100%}
.about .skill-tags .badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:max-content;text-align:center;white-space:nowrap}
@media(max-width:900px){.about .skill-tags{gap:9px}}
@media(max-width:580px){.about .skill-tags{width:auto;gap:8px}}
@media(max-width:580px){.work-toolbar{align-items:flex-start;flex-wrap:wrap;gap:8px}.sort-trigger{min-height:39px;min-width:148px;padding-block:8px;font-size:11px}.sort-menu{width:184px}}

/* Client marks use approved silhouettes with a new palette draw on each load. */
.clients .brand-wordmark{display:grid;place-items:center;width:clamp(128px,12vw,180px);min-width:clamp(128px,12vw,180px);height:72px;color:transparent;font-size:0;line-height:0}
.clients .brand-logo{display:block;width:86%;height:56px;background:var(--brand-color);-webkit-mask:var(--brand-logo) center/contain no-repeat;mask:var(--brand-logo) center/contain no-repeat;transition:transform 220ms cubic-bezier(.23,1,.32,1),opacity 180ms ease}
.clients .brand-wordmark:hover .brand-logo{transform:scale(1.045);opacity:.8}
.clients .brand-glacial .brand-logo{width:100%;height:66px}
.clients .brand-xp .brand-logo{width:62%}
.clients .brand-michelob .brand-logo,.clients .brand-espn .brand-logo,.clients .brand-mentos .brand-logo{width:100%}
.clients .brand-vivo .brand-logo{width:88%;height:62px}
@media(max-width:580px){.clients .brand-wordmark{width:116px;min-width:116px;height:60px}.clients .brand-logo{height:48px}.clients .brand-glacial .brand-logo{height:57px}.clients .brand-vivo .brand-logo{height:52px}}

/* Slow two-sided rotation gives the temporary portrait card real depth. */
.about .portrait-slot{perspective:1100px;transform:rotate(-2deg);overflow:visible}
.about .portrait-card{position:relative;aspect-ratio:4/5;transform-style:preserve-3d;will-change:transform;animation:portrait-turn 16s cubic-bezier(.77,0,.175,1) infinite}
.about .portrait-face{position:absolute;inset:0;border-radius:17px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 1px 1px #fff9}
.about .portrait-face:after{content:"";position:absolute;inset:-35%;pointer-events:none;background:linear-gradient(115deg,transparent 34%,#ffffff9c 47%,transparent 60%);transform:translateX(-70%) rotate(8deg);animation:portrait-sheen 8s ease-in-out infinite}
.about .portrait-frame{aspect-ratio:auto}
.about .portrait-front{background:#20212b}
.about .portrait-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.about .portrait-back{display:flex;flex-direction:column;justify-content:space-between;padding:28px;color:#444b66;background:radial-gradient(circle at 22% 18%,#d5e9f4,transparent 42%),radial-gradient(circle at 85% 80%,#f6d3bc,transparent 45%),linear-gradient(145deg,#e9e3f7,#d9e9df);transform:rotateY(180deg)}
.about .portrait-back>span{font:9px 'DM Mono',monospace;letter-spacing:.14em}
.about .portrait-back strong{font-size:clamp(27px,3vw,42px);line-height:.98;letter-spacing:-.06em;font-weight:500;color:#52446f}
.about .portrait-back small{max-width:210px;font:9px/1.6 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:#647085}
@keyframes portrait-turn{0%,34%{transform:rotateX(1deg) rotateY(0deg)}48%,56%{transform:rotateX(-1deg) rotateY(180deg)}70%,100%{transform:rotateX(1deg) rotateY(360deg)}}
@keyframes portrait-sheen{0%,28%{transform:translateX(-78%) rotate(8deg);opacity:0}42%{opacity:.62}58%,100%{transform:translateX(78%) rotate(8deg);opacity:0}}
@media(max-width:650px){.about .portrait-back{padding:22px}.about .portrait-back strong{font-size:31px}}
@media(prefers-reduced-motion:reduce){.about .portrait-card{animation:none}.about .portrait-face:after{display:none}}
.project-art.cover-light{color:#25283a}
.project-art.cover-light:after{background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%,rgba(37,40,58,.08))}
.project-art.cover-light .art-index{color:#25283a;text-shadow:0 1px 8px rgba(255,255,255,.7)}
.project-art.cover-light .art-arrow{color:#25283a;background:rgba(255,255,255,.72);border-color:rgba(37,40,58,.2);box-shadow:0 6px 18px rgba(55,48,68,.12)}