/* MotionMax spectrum identity. */
:root{--accent:#8be9df;--spectrum:linear-gradient(110deg,#83f2cc 0%,#79cfff 23%,#b6a0ff 46%,#ff97ca 68%,#f9ec99 85%,#83f2cc 100%)}
::selection{background:#b6a0ff;color:#181817}
.brand{position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:after{content:'';position:absolute;inset:-7px;border-radius:50%;background:var(--spectrum);filter:blur(13px);opacity:0;z-index:-1;transition:opacity .3s}
.brand:hover{transform:rotate(-8deg) scale(1.09)}.brand:hover:after,.brand:focus-visible:after{opacity:.5}
.main-menu a,.filter,.pages button,.contact-links a{position:relative;isolation:isolate}
.main-menu a{transition:color .25s,transform .25s}.main-menu a:hover{transform:translateY(-2px);color:#b6a0ff}
.main-menu a.active{box-shadow:none}
.main-menu a.active:after,.filter:after,.pages button.current:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--spectrum);background-size:220% 100%;animation:spectrum-flow 7s ease-in-out infinite;transform-origin:left}
.filter{transition:color .25s,background .25s;border-bottom-color:var(--line)}
.filter:after{transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.filter.active{border-bottom-color:transparent;color:#b9e9ef}
.filter.active:after,.filter:hover:after,.filter:focus-visible:after{transform:scaleX(1)}
.filter.active .category-name,.pages button.current,.info-page .eyebrow,.experience h3{background-image:var(--spectrum);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:spectrum-flow 7s ease-in-out infinite}
.filter:hover{color:#f4f4f0;background:radial-gradient(ellipse at var(--pointer-x,50%) 100%,#b6a0ff16,transparent 75%)}
.filter .category-name{transition:translate .25s}.filter:hover .category-name{translate:3px 0}
.filter.active .category-tools{color:#a4ddd8}
.pages button.current{box-shadow:none;background-color:transparent}.pages button:hover:enabled{color:#b6a0ff;transform:translateY(-2px)}
.pages button{transition:color .2s,transform .2s}.pages button:active:enabled{transform:scale(.9)}
.contact-links b{color:#b6a0ff;transition:transform .3s}.contact-links a:hover b{transform:translate(4px,-4px)}
.contact-links a:hover strong,.experience a:hover{color:#8be9df}
.tutorial-play{border-color:#b6a0ff;color:#d5c8ff;transition:background .25s,transform .25s}.tutorial-play:hover{background:#b6a0ff;color:#181817;transform:scale(1.04)}
.rive-status.unavailable{color:#f2a6ce}.logo{background:var(--spectrum);color:#181817}
button:focus-visible,a:focus-visible{outline-color:#b6a0ff}
.grid>article{animation:identity-arrive .48s both}.grid>article:nth-child(2){animation-delay:45ms}.grid>article:nth-child(3){animation-delay:90ms}.grid>article:nth-child(4){animation-delay:135ms}.grid>article:nth-child(5){animation-delay:180ms}.grid>article:nth-child(6){animation-delay:225ms}
.identity-press{animation:identity-press .4s ease-out}
@keyframes spectrum-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes identity-arrive{from{opacity:.15;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes identity-press{50%{scale:1.025}}
.paused .filter:after,.paused .filter.active .category-name,.paused .pages button.current,.paused .pages button.current:after,.paused .main-menu a.active:after,.paused .grid>article{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.brand,.main-menu a,.filter,.filter:after,.filter .category-name,.pages button,.contact-links b,.tutorial-play{transition:none}.filter:after,.filter.active .category-name,.pages button.current,.pages button.current:after,.main-menu a.active:after,.info-page .eyebrow,.experience h3,.grid>article,.identity-press{animation:none}.brand:hover,.main-menu a:hover,.pages button:hover:enabled,.pages button:active:enabled,.tutorial-play:hover{transform:none}.filter:hover .category-name{translate:none}}
/* Named identity and clear, cyclic pagination. */
header .brand,.info-shell header .brand{width:auto;height:auto;display:inline-flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:1;min-width:0}
.brand-name{color:#f2f1ea;font-size:17px;font-weight:500;letter-spacing:-.35px;line-height:1.25;white-space:nowrap}
.brand img{flex-shrink:0}.brand:after{right:auto;width:44px}.brand:hover{transform:none}
.pages{flex-wrap:wrap;gap:8px;max-width:none}
.pages button{min-width:40px;height:44px;font-size:14px}
.pages .page-step:first-child,.pages .page-step:last-child{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:108px;height:46px;padding:0 18px;margin:0 8px 0 0;border:1px solid #70706b;border-radius:8px;background:#2b2c2a;color:#f2f1ea;font-size:14px;font-weight:600;white-space:nowrap}
.pages .page-step:last-child{margin:0 0 0 8px}
.pages .page-step:hover:enabled{background:#383b3a;border-color:#9fe8df;color:#fff;transform:translateY(-2px)}
.pages .page-step span{font-size:20px;font-weight:400}
@media(max-width:650px){header .brand,.info-shell header .brand{gap:9px}.brand-name{font-size:13px;white-space:normal;max-width:120px}.main-menu,.info-shell .main-menu{gap:14px}.pages{gap:5px;width:100%}.pages button{min-width:32px;height:42px;padding:0 4px}.pages .page-step:first-child,.pages .page-step:last-child{min-width:84px;height:44px;padding:0 12px;margin:0;gap:7px;font-size:13px}.work-controls .toolbar{flex-wrap:wrap}}
@media(max-width:380px){.brand-name{font-size:12px;max-width:100px}.main-menu,.info-shell .main-menu{gap:10px}.main-menu a,.info-shell .main-menu a{font-size:10px;letter-spacing:.6px}header{gap:12px}}
/* Keep category tool marks only on the selected category. */
.filter:not(.active) .category-tools{visibility:hidden}
/* Outlined pagination controls with a clear, unfilled surface. */
.work-controls .toolbar{border-bottom:0}
.pages .page-step:first-child,.pages .page-step:last-child{background:transparent;color:#f2f1ea;border-color:#777b78}
.pages .page-step:hover:enabled{background:transparent;border-color:#9fe8df;color:#b9e9ef}

/* Pagination follows the category controls, with five numbers per centered row. */
.pages{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:18px;max-width:100%;width:100%}
.page-numbers{display:flex;flex-direction:column;gap:8px;min-width:0}
.page-row{display:flex;justify-content:center;gap:8px}
.pages .page-row button{min-width:40px;height:44px;margin:0;padding:0 6px;font-size:14px;color:var(--muted)}
.pages .page-row button.current{color:transparent}
.pages .page-step:first-child,.pages .page-step:last-child{position:relative;min-width:94px;height:46px;padding:0 8px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);font-weight:600;transition:color .25s,background .25s}
.pages .page-step:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--spectrum);background-size:220% 100%;animation:spectrum-flow 7s ease-in-out infinite;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pages .page-step:hover:enabled,.pages .page-step:focus-visible{transform:none;border-color:transparent;background:radial-gradient(ellipse at var(--pointer-x,50%) 100%,#b6a0ff16,transparent 75%);color:#f4f4f0}
.pages .page-step:hover:after,.pages .page-step:focus-visible:after{transform:scaleX(1)}
.pages .page-step .step-label{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;transition:translate .25s}
.pages .page-step:hover .step-label,.pages .page-step:focus-visible .step-label{translate:3px 0;background-image:var(--spectrum);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:spectrum-flow 7s ease-in-out infinite}
.paused .page-step:after,.paused .page-step .step-label{animation-play-state:paused}
@media(max-width:650px){.pages{width:100%;gap:8px}.page-row{gap:2px}.pages .page-row button{min-width:24px;padding:0 2px;font-size:13px}.pages .page-step:first-child,.pages .page-step:last-child{min-width:60px;padding:0 3px}.pages .page-step .step-label{font-size:12px;gap:5px}}
@media(prefers-reduced-motion:reduce){.pages .page-step,.pages .page-step:after,.pages .page-step .step-label{transition:none;animation:none}.pages .page-step:hover .step-label,.pages .page-step:focus-visible .step-label{translate:none;animation:none}}


/* Compact homepage controls echo the active Rive Reface category. */
.home-page{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.home-page .brand-name{display:none}
.home-page .brand img{width:36px;height:36px;object-fit:contain}
.home-page .portfolio-navigation header{min-height:78px;padding-top:15px;padding-bottom:15px}
.home-page .work-controls{padding-top:12px}
.home-page .controls-group{margin:0}
.home-page .controls-heading{display:inline-flex;align-items:center;margin:0 0 7px;padding:7px 12px;background:#171918;color:#83cfff;font-size:10px;font-weight:650;letter-spacing:1.35px;line-height:1;text-transform:uppercase}
.home-page .filters{width:100%;max-width:none;margin:0;padding:0;border:0;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,3.2vw,48px);row-gap:0}
.home-page .filter{min-height:40px;padding:9px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);font-size:clamp(14px,1.1vw,17px);font-weight:450}
.home-page .filter:hover{background:transparent;color:#f4f4f0}
.home-page .filter.active{color:#f2f1ea;background:transparent}
.home-page .filter.active .category-name{background-image:var(--spectrum);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent}
.home-page .filter:after{bottom:-1px}
.home-page .navigation-group{margin-top:12px}
.home-page .navigation-group .toolbar{display:flex;align-items:center;gap:18px;margin:0;padding:0;border:0}
.home-page .navigation-group .pages{display:flex;flex:1;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(7px,1.4vw,20px);width:100%;max-width:none}
.home-page .page-numbers{display:flex;flex:1;min-width:0;flex-direction:column;gap:0}
.home-page .page-row{display:flex;flex:1;justify-content:space-around;gap:clamp(3px,.6vw,10px)}
.home-page .pages .page-row button{min-width:30px;height:38px;margin:0;padding:0 4px;font-size:13px}
.home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{min-width:70px;height:38px;padding:0 8px;margin:0;font-size:13px}
.home-page .pages .page-step .step-label{font-size:13px;letter-spacing:.1px}
.home-page .navigation-group .section-label{flex:0 0 auto;color:var(--muted);font-size:11px;white-space:nowrap}
.home-page .navigation-group .section-label strong{color:#f2f1ea}
.home-page #work{padding-top:14px;scroll-margin-top:82px}
.home-page .grid{gap:28px 24px}
.home-page .visual{aspect-ratio:1.5!important}
@media(max-width:850px){.home-page .portfolio-navigation header{min-height:72px}.home-page .work-controls{padding-top:10px}.home-page .navigation-group .toolbar{flex-wrap:wrap}.home-page #work{padding-top:10px}}
@media(max-width:650px){.home-page .portfolio-navigation header{min-height:68px;padding-top:14px;padding-bottom:14px}.home-page .controls-heading{margin-bottom:5px}.home-page .filters{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}.home-page .filter{min-height:36px;padding:8px 0;font-size:13px}.home-page .navigation-group{margin-top:10px}.home-page .navigation-group .toolbar{gap:7px}.home-page .navigation-group .pages{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px}.home-page .page-numbers{gap:2px}.home-page .page-row{gap:2px}.home-page .pages .page-row button{min-width:23px;height:34px;padding:0 1px;font-size:12px}.home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{min-width:54px;height:36px;padding:0 2px}.home-page .pages .page-step .step-label{font-size:11px}.home-page .navigation-group .section-label{font-size:10px}.home-page .grid{grid-template-columns:1fr;gap:26px}.home-page .visual{aspect-ratio:1.25!important}}
@media(max-width:380px){.home-page .filters{column-gap:16px}.home-page .filter{font-size:12px}.home-page .navigation-group .toolbar{gap:4px}.home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{min-width:46px}.home-page .pages .page-row button{min-width:20px}}
@media(prefers-reduced-motion:reduce){.home-page .filter.active .category-name{animation:none}}

/* Unified spectrum controls and a denser square portfolio grid. */
.home-page .controls-heading{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0 0 10px;
  padding:0 0 7px;
  background:none;
  color:#c5c7c0;
  font:600 10px/1.4 Inter,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.home-page .controls-heading::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--spectrum);
  background-size:220% 100%;
  animation:spectrum-flow 7s ease-in-out infinite;
  opacity:.8;
}
.home-page .filters,.home-page .pages,.home-page .main-menu{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.home-page .filter{
  min-height:42px;
  padding:9px 12px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  transition:color .25s,background .25s,box-shadow .25s;
}
.home-page .filter:hover,.home-page .filter:focus-visible{
  background:radial-gradient(ellipse at var(--pointer-x,50%) 100%,#b6a0ff14,transparent 76%);
}
.home-page .filter.active{
  box-shadow:inset 0 -2px transparent;
  background:linear-gradient(#181817,#181817) padding-box,
    var(--spectrum) border-box;
  border-bottom:2px solid transparent;
}
.home-page .filter.active .category-name{font-weight:650;text-shadow:0 0 16px #b6a0ff30}
.home-page .portfolio-navigation .brand:after{
  opacity:.27;
  filter:blur(11px);
  animation:spectrum-flow 8s ease-in-out infinite;
}
.home-page .portfolio-navigation .brand img{filter:drop-shadow(0 0 5px #b6a0ff42)}
.home-page .main-menu a{font-family:inherit;transition:color .25s,transform .25s,text-shadow .25s}
.home-page .main-menu a.active{
  color:#f2f1ea;
  text-shadow:0 0 15px #b6a0ff35;
}
.home-page .main-menu a.active:after{height:2px;filter:drop-shadow(0 0 5px #b6a0ff66)}
.home-page .pages .page-row button{font-family:inherit;border-radius:0}
.home-page .pages .page-row button.current{
  color:transparent;
  text-shadow:0 0 15px #b6a0ff52;
  filter:drop-shadow(0 0 4px #b6a0ff45);
}
.home-page .pages .page-row button.current:after{filter:drop-shadow(0 0 5px #b6a0ff66)}
.home-page .filter:focus-visible,.home-page .pages button:focus-visible,.home-page .main-menu a:focus-visible{
  outline:1px solid #b6a0ff;
  outline-offset:3px;
}
.home-page .grid{gap:24px 22px}
.home-page .visual{aspect-ratio:1!important;border-radius:0}
.home-page .visual video,.home-page .visual canvas,.home-page .visual .lottie-canvas,.home-page .tutorial-cover{object-fit:cover}
.home-page .tutorial-visual{aspect-ratio:1!important}
.home-page .client,.home-page .role,.home-page .description{padding-left:2px;padding-right:2px}
.home-page .navigation-group{margin-top:9px}
.home-page #work{padding-top:10px}
@media(min-width:431px) and (max-width:650px){
  .home-page .navigation-group .toolbar{flex-wrap:nowrap}
  .home-page .navigation-group .pages{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px}
  .home-page .page-numbers{display:flex;flex:1;flex-direction:row;gap:0}
  .home-page .page-row{flex:1;justify-content:space-between;gap:1px}
  .home-page .pages .page-row button{min-width:21px;height:34px;padding:0 1px;font-size:12px}
  .home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{min-width:46px;height:36px;padding:0 2px}
}
@media(max-width:430px){
  .home-page .controls-heading{margin-bottom:5px}
  .home-page .filter{min-height:36px;padding:7px 9px;font-size:12px}
  .home-page .navigation-group .toolbar{flex-wrap:wrap}
  .home-page .navigation-group .pages{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px}
  .home-page .page-numbers{display:flex;flex-direction:column;gap:2px}
  .home-page .page-row{justify-content:flex-start;gap:2px}
  .home-page .pages .page-row button{min-width:23px;height:32px;padding:0 1px;font-size:12px}
  .home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{min-width:48px;height:34px;padding:0 2px}
  .home-page .grid{grid-template-columns:1fr;gap:22px}
}
@media(prefers-reduced-motion:reduce){
  .home-page .controls-heading::after,.home-page .main-menu a.active:after,.home-page .pages .page-row button.current:after{animation:none}
  .home-page .portfolio-navigation .brand:after{animation:none}
}

/* Match the active Gallery link to the selected category's spectrum. */
.home-page .main-menu a.active{
  background-image:var(--spectrum);
  background-size:100% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  font-weight:600;
  text-shadow:none;
  animation:spectrum-flow 7s ease-in-out infinite;
}
.home-page.paused .main-menu a.active{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.home-page .main-menu a.active{animation:none}}

/* Gallery layout aligned to the supplied reference. */
.home-page{
  --gallery-spectrum:linear-gradient(90deg,#168dff 0%,#29d4e5 100%);
  background:radial-gradient(ellipse at 50% 0%,#171d2a 0%,#10131b 55%,#0d0f15 100%);
}
.home-page .portfolio-navigation header{
  width:calc(100% - 48px);
  max-width:1040px;
  padding:24px 15% 25px 0;
}
.home-page .portfolio-navigation{background:transparent}
.home-page .work-controls{
  width:calc(100% - 48px);
  max-width:1040px;
  padding:30px 0 0;
}
.home-page .controls-heading{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.home-page .filters{column-gap:clamp(28px,4.5vw,66px)}
.home-page .filter{
  min-height:54px;
  padding:14px 0;
  color:#c3c8d7;
  border-bottom-color:transparent;
}
.home-page .filter:not(.active){border-bottom-color:transparent}
.home-page .filter .category-tools{display:none}
.home-page .filter.active{background:transparent;border-bottom-color:transparent;box-shadow:none}
.home-page .filter.active .category-name{
  background-image:var(--gallery-spectrum);
  background-size:100% 100%;
  text-shadow:0 0 16px #168dff38;
  animation:none;
}
.home-page .filter.active:after,
.home-page .main-menu a.active:after,
.home-page .pages .page-row button.current:after{
  background-image:var(--gallery-spectrum);
  background-size:100% 100%;
  animation:none;
  filter:drop-shadow(0 0 5px #168dff55);
}
.home-page .main-menu a.active{
  background-image:var(--gallery-spectrum);
  background-size:100% 100%;
  animation:none;
  font-weight:600;
}
.home-page .main-menu a.active:after{height:3px}
.home-page .navigation-group{margin-top:50px}
.home-page .navigation-group .pages{justify-content:flex-start;gap:clamp(18px,3vw,42px)}
.home-page .pages .page-step:first-child{margin-right:25px}
.home-page .page-numbers{flex:0 1 auto}
.home-page .page-row{justify-content:flex-start;gap:clamp(14px,2vw,28px)}
.home-page .pages .page-row button.current{
  background-image:var(--gallery-spectrum);
  text-shadow:0 0 14px #168dff44;
}
.home-page .pages .page-step:first-child,
.home-page .pages .page-step:last-child{
  min-width:58px;
  width:58px;
  height:40px;
  padding:0;
  border:0;
  color:#168dff;
}
.home-page .pages .page-step:after{display:none}
.home-page .pages .page-step .step-label{
  font-size:30px;
  line-height:1;
  color:#168dff;
  transition:color .2s,transform .2s;
}
.home-page .pages .page-step:hover:enabled .step-label{color:#29d4e5;transform:translateX(2px)}
.home-page .pages .page-step:first-child:hover:enabled .step-label{transform:translateX(-2px)}
.home-page #work{
  width:calc(100% - 48px);
  max-width:1040px;
  padding:44px 0 54px;
}
.home-page .grid{
  width:100%;
  max-width:920px;
  margin-left:0;
  gap:36px 56px;
}
.home-page .visual{border-radius:0}
@media(max-width:850px){
  .home-page .portfolio-navigation header{padding:20px 10% 22px 0}
  .home-page .work-controls,.home-page #work{width:calc(100% - 40px)}
  .home-page .navigation-group .pages{gap:14px}
  .home-page .page-row{gap:clamp(6px,1.6vw,14px)}
  .home-page .grid{max-width:none;gap:28px 24px}
}
@media(max-width:650px){
  .home-page .portfolio-navigation header{padding:16px 0}
  .home-page .filter{min-height:40px;padding:10px 0}
  .home-page .work-controls{padding-top:24px}
  .home-page .navigation-group{margin-top:28px}
  .home-page .pages .page-step:first-child{margin-right:0}
  .home-page .navigation-group .pages{justify-content:space-between;gap:4px}
  .home-page .page-row{gap:2px}
  .home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{min-width:46px;width:46px}
  .home-page #work{padding-top:26px}
}
@media(prefers-reduced-motion:reduce){
  .home-page .pages .page-step .step-label{transition:none}
  .home-page .pages .page-step:hover:enabled .step-label{transform:none}
}