/* Minimal navigation inspired by the supplied reference. */
.home-page .portfolio-navigation{position:relative;top:auto}
.home-page .portfolio-navigation header,.home-page .work-controls,.home-page #work{width:88%;max-width:1600px}
.home-page .portfolio-navigation header{min-height:170px;border-bottom:0;padding:28px 0;align-items:center}
.home-page .main-menu{gap:44px}.home-page .main-menu a{font-size:20px;letter-spacing:0;text-transform:none;padding:10px 0;font-weight:400}
.home-page .main-menu a.active{font-weight:400}
.home-page .work-controls{padding-top:42px}
.home-page .filters{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(30px,5.4vw,110px)}
.home-page .filter,.home-page .filter:not(.active),.home-page .filter:not(.active):hover{font-size:clamp(16px,1.4vw,24px);min-height:84px;padding:23px 0;line-height:1.5}
.home-page .filter.active .category-name{font-weight:500}
.home-page .navigation-group{margin-top:64px}
.home-page .navigation-group[hidden],.home-page .load-more-area[hidden],.home-page .load-more[hidden]{display:none}
.home-page .navigation-group .toolbar{margin:0;padding:0;border:0}
.home-page .navigation-group .pages{gap:clamp(16px,2.4vw,44px)}
.home-page .pages .page-row{gap:clamp(14px,2.2vw,40px)}
.home-page .pages .page-row button,.home-page .pages .page-row button.current,.home-page .pages .page-row button.current:hover:enabled{border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--muted);font-size:22px;font-weight:400;width:40px;min-width:40px;flex-basis:40px;height:54px;line-height:52px}
.home-page .pages .page-row button.current,.home-page .pages .page-row button.current:hover:enabled{color:var(--text);border-bottom-color:var(--text)}
.home-page .pages .page-row button.current:after{display:none}
.home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{width:auto;min-width:60px;flex-basis:auto;height:54px;border:0;border-bottom:1px solid var(--line);border-radius:0}
.home-page .pages .page-step .step-label,.home-page .pages .page-step:hover:enabled .step-label{font-size:22px;font-weight:400;color:var(--muted)}
.home-page .pages .page-step:hover:enabled .step-label{color:var(--text)}
.home-page #work{padding-top:64px}.home-page .load-more-area{text-align:center;padding:56px 0 8px}
.home-page .load-more{background:none;color:var(--text);border:0;border-bottom:1px solid var(--text);padding:16px 30px;font:500 18px "Space Grotesk",sans-serif;cursor:pointer}
.home-page .load-more:hover{background:var(--surface-top)}.home-page .load-progress{color:var(--muted);font-size:13px;margin:18px 0 0}
@media(max-width:650px){
.home-page .portfolio-navigation header,.home-page .work-controls,.home-page #work{width:calc(100% - 40px)}
.home-page .portfolio-navigation header{min-height:110px;padding:12px 0}.home-page .main-menu{gap:20px}.home-page .main-menu a{font-size:15px}
.home-page .work-controls{padding-top:20px}.home-page .filters{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.home-page .filter,.home-page .filter:not(.active),.home-page .filter:not(.active):hover{font-size:15px;min-height:62px;padding:18px 0}
.home-page .navigation-group{margin-top:32px}.home-page .navigation-group .pages{gap:14px}.home-page .pages .page-row{gap:10px}
.home-page .pages .page-row button,.home-page .pages .page-row button.current,.home-page .pages .page-row button.current:hover:enabled{font-size:18px;min-width:32px;width:32px;flex-basis:32px}
.home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child{min-width:44px}.home-page .pages .page-step .step-label,.home-page .pages .page-step:hover:enabled .step-label{font-size:18px}
.home-page #work{padding-top:36px}.home-page .load-more-area{padding-top:36px}}

.home-page .brand-signature{display:block;width:clamp(200px,23vw,380px);line-height:0}.home-page .brand-signature svg{display:block;width:100%;height:auto}.home-page .filter:after{width:100%;right:0}.home-page .main-menu a.active{font-weight:400}@media(max-width:650px){.home-page .brand-signature{width:170px}}@media(max-width:380px){.home-page .brand-signature{width:140px}.home-page .main-menu{gap:14px}}
/* Reference spacing: a centered gallery, compact top section, breathing room before cards. */
.home-page .portfolio-navigation header,.home-page .work-controls,.home-page #work{width:76%;max-width:1400px}
.home-page .portfolio-navigation header{min-height:144px;padding:22px 0}
.home-page .work-controls{padding-top:18px}
.home-page .filter,.home-page .filter:not(.active),.home-page .filter:not(.active):hover{min-height:76px;padding:20px 0;font-size:20px}
.home-page .navigation-group{margin-top:40px}
.home-page #work{padding-top:48px}
.home-page .grid{column-gap:clamp(28px,3.3vw,64px);align-items:start}
.home-page[data-layout="natural"] .visual{aspect-ratio:var(--source-ratio,1)!important;height:auto;min-height:0}
.home-page[data-layout="natural"] .visual video,.home-page[data-layout="natural"] .lottie-canvas{object-fit:contain;object-position:top center}
.home-page .grid[data-masonry]{display:block;position:relative}
.home-page .grid[data-masonry]>article{position:absolute;box-sizing:border-box;width:calc((100% - clamp(28px,3.3vw,64px))/2);margin:0;min-width:0}
.home-page .grid[data-masonry] > article.motion-solo { width: 100%; }
.home-page .load-more-area{padding:12px 0 0}.home-page .load-sentinel{height:1px}
.home-page .load-progress{font-size:12px}
@media(max-width:1000px){.home-page .portfolio-navigation header,.home-page .work-controls,.home-page #work{width:88%}}
@media(max-width:650px){
.home-page .portfolio-navigation header,.home-page .work-controls,.home-page #work{width:calc(100% - 40px)}
.home-page .portfolio-navigation header{min-height:104px;padding:12px 0}.home-page .work-controls{padding-top:14px}
.home-page .filter,.home-page .filter:not(.active),.home-page .filter:not(.active):hover{min-height:60px;padding:16px 0;font-size:15px}
.home-page .navigation-group{margin-top:28px}.home-page #work{padding-top:32px}
.home-page .grid[data-masonry]>article{width:100%}
}

/* Keep the first eight banners and onboarding pieces wider than the gameplay recordings. */
.home-page #portfolio-grid[data-surprise] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --preview-room: calc(100svh - var(--header-height, 0px) - var(--pinned-height, 0px) - 52px);
}
.home-page #portfolio-grid[data-surprise] > article { min-width: 0; }
.home-page #portfolio-grid[data-surprise] .visual {
  width: min(100%, calc(var(--preview-room) * var(--source-ratio, 1)));
  margin-inline: auto;
}
@media (min-width: 900px) {
  .home-page #portfolio-grid[data-surprise] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-page #portfolio-grid[data-surprise] > article { grid-column: span 2; }
  .home-page #portfolio-grid[data-surprise] > article:nth-child(-n+8) { grid-column: span 3; }

}
@media (max-width: 650px) {
  .home-page #portfolio-grid[data-surprise] { grid-template-columns: minmax(0, 1fr); }
}

/* Client and role use the same label column and icon rhythm throughout the gallery. */
.home-page #portfolio-grid > article { container: project-card / inline-size; }
.home-page #portfolio-grid .client,
.home-page #portfolio-grid .role {
  display: grid;
  align-items: center;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 8px;
  min-height: 22px;
  padding-inline: 0;
}
.home-page #portfolio-grid .client {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  margin: 14px 0 9px;
}
.home-page #portfolio-grid .role {
  margin: 0 0 14px;
  padding-block: 0 14px;
}
.home-page #portfolio-grid .field-label,
.home-page #portfolio-grid .role > span {
  padding: 0;
  font-size: 10px;
  letter-spacing: .6px;
  line-height: 1.5;
}
.home-page #portfolio-grid .client-name {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 550;
  letter-spacing: -.15px;
  overflow-wrap: normal;
}
.home-page #portfolio-grid .client-logo {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.home-page #portfolio-grid .year { font-size: 11px; line-height: 1.4; }
.home-page #portfolio-grid .client-external { font-size: 12px; }
.home-page #portfolio-grid .role-value {
  align-items: center;
  gap: 6px;
  min-height: 20px;
}
.home-page #portfolio-grid .role-tools { padding: 0; gap: 4px; }
.home-page #portfolio-grid .role-text { font-size: 14px; line-height: 1.4; }
.home-page #portfolio-grid .role-tools .tool-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 13px;
  border-radius: 4px;
}
.home-page #portfolio-grid .role-tools .tool-rive {
  padding: 2px;
  background: #141414;
}
.tool-rive img { display: block; width: 100%; height: 100%; object-fit: contain; }
@container project-card (max-width: 260px) {
  .home-page #portfolio-grid .client { row-gap: 3px; }
  .home-page #portfolio-grid .client-name { font-size: 14px; }
  .home-page #portfolio-grid .year { grid-column: 2; margin-left: 26px; }
}