#work.wrap{width:min(100%,1920px);max-width:1920px;padding-inline:10px}
#projectGrid:not(.is-index){display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;row-gap:60px;align-items:start;margin:0;padding:0 0 60px}
#projectGrid:not(.is-index)>.card:nth-child(n){display:block;width:100%!important;max-width:none!important;min-width:0;grid-column:auto!important;margin:0!important;transform:none!important;translate:none!important;left:auto!important;right:auto!important;top:auto!important;justify-self:stretch!important;align-self:start!important;cursor:pointer}
#projectGrid:not(.is-index)>.card:nth-child(n).card--group-start{grid-column:1!important}
#projectGrid:not(.is-index) .card-media{position:relative;width:100%;aspect-ratio:4 / 5!important;overflow:hidden;background:var(--paper)}
#projectGrid:not(.is-index) .card-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1)!important;transition:transform 700ms cubic-bezier(.22,1,.36,1)!important;background:var(--paper)}
#projectGrid:not(.is-index) .card-media:before,#projectGrid:not(.is-index) .card-media:after{display:none;content:none}
#projectGrid:not(.is-index) .card:hover .card-frame,#projectGrid:not(.is-index) .card:focus-visible .card-frame{transform:scale(1.04)!important;transition:transform 1000ms cubic-bezier(.22,1,.36,1)!important}
#projectGrid:not(.is-index) .card-frame.is-transitioning{opacity:0;z-index:2}

#projectGrid:not(.is-index) .card-meta{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;margin:0;padding:10px;color:var(--ink);pointer-events:auto;text-shadow:none;text-transform:uppercase}
#projectGrid:not(.is-index)>.project-group-label{grid-column:1/-1;margin:0 0 -48px;padding:0 10px;font-family:Manrope,Arial,sans-serif;font-size:9px;font-weight:500;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#projectGrid.is-index>.project-group-label{margin:26px 0 12px;padding:0;font-family:Manrope,Arial,sans-serif;font-size:9px;font-weight:500;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#projectGrid.is-index>.project-group-label:first-child{margin-top:0}
#projectGrid:not(.is-index) .card-sub,#projectGrid:not(.is-index) .card-kind{display:none}
#projectGrid:not(.is-index) .card-category,#projectGrid:not(.is-index) .card-title{display:block;min-width:0;font-family:Manrope,Arial,sans-serif;font-size:9px;font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
#projectGrid:not(.is-index) .card-title{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#projectGrid:not(.is-index) .card-category abbr{text-decoration:none}
#projectGrid:not(.is-index) .card-detail{display:block;min-width:0;text-align:center;overflow:hidden;white-space:nowrap;font-family:Manrope,Arial,sans-serif;font-size:9px;font-weight:400;line-height:1.3;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
#projectGrid:not(.is-index) .detail-visual{display:block;overflow:hidden;text-overflow:clip;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity 150ms ease,visibility 0s linear 150ms}
#projectGrid:not(.is-index) .card.is-detail-visible .detail-visual{opacity:1;visibility:visible;transition:opacity 150ms ease}
#projectGrid:not(.is-index) .card-cta{position:absolute;z-index:4;left:50%;top:50%;max-width:calc(100% - 28px);transform:translate(-50%,calc(-50% + 4px));overflow:hidden;color:#fff;font-family:Manrope,Arial,sans-serif;font-size:9px;font-weight:500;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;text-shadow:none;mix-blend-mode:difference;opacity:0;pointer-events:none;transition:opacity 180ms ease,transform 180ms ease}
@media(hover:hover) and (pointer:fine){#projectGrid:not(.is-index) .card:hover .card-cta{opacity:1;transform:translate(-50%,-50%)}}
#projectGrid:not(.is-index) .card:focus-visible .card-cta{opacity:1;transform:translate(-50%,-50%)}
#projectGrid:not(.is-index) .label-mask{display:block;overflow:hidden}
#projectGrid:not(.is-index) .label-inner{display:block;transform:translateY(0);opacity:1}
#projectGrid:not(.is-index) .labels-ready .label-inner{transform:translateY(20px);transition:transform 1350ms cubic-bezier(.25,.8,.25,1);transition-delay:var(--label-delay,100ms)}
#projectGrid:not(.is-index) .labels-ready.labels-in .label-inner{transform:translateY(0)}
#projectGrid:not(.is-index) .labels-ready.labels-reset:not(.labels-in) .label-inner{transform:translateY(20px);transition:none}
#projectGrid:not(.is-index) .card[hidden]{display:none}
#projectGrid:not(.is-index)>.project-group-label[hidden],#projectGrid.is-index>.project-group-label[hidden]{display:none}
#projectGrid.is-index .card-meta{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr);justify-content:stretch;align-items:center;gap:clamp(12px,3vw,36px);position:static;min-width:0;margin:0;padding:0;text-shadow:none;color:var(--ink);pointer-events:auto}
#projectGrid.is-index .card-detail{min-width:0;overflow:hidden;text-align:center;color:var(--muted);font-family:Manrope,Arial,sans-serif;font-size:9px;font-weight:400;line-height:1.3;letter-spacing:.08em;white-space:nowrap;text-transform:uppercase}
#projectGrid.is-index .card-title{min-width:0;text-align:left;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
#projectGrid.is-index .card-cta{display:none}
#projectGrid.is-index .detail-visual{visibility:hidden!important;opacity:0!important}
#projectGrid.is-index .card-category,#projectGrid.is-index .card-title{font-family:Manrope,Arial,sans-serif;font-size:9px;font-weight:500;line-height:1.3;letter-spacing:.08em;color:var(--ink)}
#projectGrid.is-index .card-title{text-align:left}
#projectGrid.is-index .card-sub{display:none}
#projectGrid.is-index .card{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:20px;align-items:center;min-width:0;border-bottom:0}
#projectGrid.is-index .card-media{position:relative;width:100%;height:auto!important;aspect-ratio:4 / 5!important;overflow:hidden;background:transparent;line-height:0;border:0}
#projectGrid.is-index .card-frame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;background:transparent;vertical-align:top}
#projectGrid.is-index .card-meta>*{min-width:0}
#projectGrid.is-index .card-title .label-mask,#projectGrid.is-index .card-title .label-inner{display:block;min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere}
@media(min-width:1200px){#projectGrid:not(.is-index){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:45px}}
@media(min-width:1921px){#projectGrid:not(.is-index){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:810px) and (max-width:1199px){#projectGrid:not(.is-index){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:809px){#projectGrid:not(.is-index){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(42px,10vw,60px)}#projectGrid:not(.is-index) .card-meta{grid-template-columns:auto minmax(0,1fr);gap:8px;min-width:0}#projectGrid:not(.is-index) .card-detail{display:none}#projectGrid:not(.is-index) .card-title{min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}#projectGrid:not(.is-index) .card-title .label-mask,#projectGrid:not(.is-index) .card-title .label-inner{display:block;min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere}#projectGrid:not(.is-index) .card-category,#projectGrid:not(.is-index) .card-title,#projectGrid.is-index .card-category,#projectGrid.is-index .card-title{font-size:8px;line-height:1.3;letter-spacing:.08em}#projectGrid:not(.is-index) .card-detail,#projectGrid.is-index .card-detail{font-size:8px}}
@media(hover:none) and (max-width:809px){#projectGrid:not(.is-index) .card-meta{grid-template-columns:auto minmax(0,1fr);gap:8px}#projectGrid:not(.is-index) .card-detail{display:none}}
@media(max-width:809px){#projectGrid:not(.is-index)>.project-group-label{margin-bottom:-48px;font-size:8px}#projectGrid.is-index>.project-group-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){#projectGrid:not(.is-index) .labels-ready .label-inner{transform:none;transition:none}#projectGrid:not(.is-index) .card-frame,#projectGrid:not(.is-index) .card:hover .card-frame,#projectGrid:not(.is-index) .card:focus-visible .card-frame{transform:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){#projectGrid:not(.is-index) .card-cta,#projectGrid:not(.is-index) .detail-visual{transition:none}}

.hero-reel{width:100%;max-height:100svh;margin-inline:auto;aspect-ratio:16/9;overflow:hidden}
.hero-reel video{object-fit:contain;transform:none!important}

#work .work-head{position:sticky;top:0;isolation:isolate;background:transparent!important;border-bottom:0;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#work .work-head::before{content:"";position:absolute;z-index:-1;top:-1px;bottom:-1px;left:50%;width:var(--toolbar-viewport-width,100%);transform:translateX(-50%);pointer-events:none;box-sizing:border-box;background:var(--surface)}
#work .work-head.is-stuck::before{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}
#workCategoryMark{position:fixed;z-index:6;right:max(10px,calc((var(--toolbar-viewport-width,100vw) - 1920px)/2 + 10px));bottom:24px;max-width:calc(100vw - 20px);color:#fff;font-family:Manrope,Arial,sans-serif;font-size:clamp(48px,6.5vw,96px);font-weight:500;letter-spacing:-.05em;line-height:.9;text-align:right;mix-blend-mode:difference;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity 180ms ease,transform 180ms ease}
#workCategoryMark.is-visible{opacity:1;transform:translateY(0)}
@keyframes categoryMarkChange{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#workCategoryMark.is-changing{animation:categoryMarkChange 180ms ease both}
@media(max-width:809px){#workCategoryMark{font-size:clamp(28px,8vw,42px)}}
@media(prefers-reduced-motion:reduce){#workCategoryMark{transition:none!important;transform:none!important}#workCategoryMark.is-changing{animation:none!important}}
@supports not (background:color-mix(in srgb,var(--surface) 82%,transparent)){#work .work-head.is-stuck::before{background:var(--surface)}}


/* Services media pan */
#services .service-image-set{opacity:1;transform:none;transition:none}
#services .service-image-set.is-entering,#services .service-image-set.is-exiting{opacity:1;transform:none}
#services .service-image-set.is-exiting{pointer-events:none}
@media(prefers-reduced-motion:reduce){#services .service-image-set,#services .service-image-set.is-entering,#services .service-image-set.is-exiting{transition:none!important;transform:none!important}}

/* Dim only inactive Services titles while a selection is open. */
#services .service-trigger .service-name{opacity:1;transition:opacity .22s ease}
#services:has(.service-trigger[aria-expanded="true"]) .service-trigger[aria-expanded="false"] .service-name{opacity:.4}
@media(prefers-reduced-motion:reduce){#services .service-trigger .service-name{transition:none}}

/* Shared section typography and spacing. */
#projectGrid:not(.is-index){padding-bottom:0}
#about{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(40px,5.5vw,80px);padding:200px 0 0}
#about .about-label{min-width:0}
#about .about-label .eyebrow,#about .about-label h2,#services .services-heading-row h2{margin:0;color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:clamp(48px,6.5vw,96px);font-weight:500;letter-spacing:-.05em;line-height:.9;text-transform:none}
#about .about-copy{color:var(--secondary);font-size:14px;font-weight:400;line-height:1.65}
#services{--service-heading-height:108px;--service-block-base:504px;padding-top:32px}
#services .services-heading-row{height:auto;flex:0 0 auto}
#services .service-workflow-intro{color:var(--secondary);font-size:14px;font-weight:400;line-height:1.65;transition-duration:.12s}
#services.services-returning-workflow .service-item.is-closing{transition-duration:.38s}
@media(max-width:809px){
  #about{padding-top:160px;padding-bottom:0}
  #about .about-label .eyebrow,#about .about-label h2,#services .services-heading-row h2{font-size:clamp(28px,8vw,42px)}
  #services{padding-top:24px}
}
@media(max-width:760px){
  #about{grid-template-columns:1fr;gap:32px}
  #about .about-copy,#services .service-workflow-intro{font-size:12px;line-height:1.65}
}


/* Mobile toolbar: label and all filters share one compact row. */
#work .work-head{width:100%}#work .work-head .work-tools{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:100%;min-width:0;gap:10px;padding-inline:calc(clamp(20px,4vw,64px) - 10px)}#work .work-selection-label{grid-column:1;justify-self:start;color:var(--muted);font-family:Manrope,Arial,sans-serif;font-size:clamp(7px,2.1vw,9px);font-weight:400;letter-spacing:.08em;line-height:normal;text-transform:uppercase;white-space:nowrap}#work .work-tools .filters{grid-column:2;justify-self:center}#work .work-head .view-toggle{grid-column:3;justify-self:end}@media(max-width:600px){#work .work-head .work-tools{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label filters";grid-template-rows:42px;column-gap:4px;padding-inline:6px}#work .work-selection-label{grid-area:label;grid-column:1;justify-self:start;font-size:clamp(6px,2vw,8px);letter-spacing:.025em}#work .work-tools .filters{grid-area:filters;grid-column:2;justify-self:end;min-width:0;gap:0}#work .work-head .view-toggle{display:none!important}#work .work-selection-label,#work .work-tools .filters .filter{display:flex;align-items:center;height:42px;min-height:42px;line-height:1;padding-block:0;margin-block:0;white-space:nowrap}#work .work-tools .filters .filter{min-width:0;padding-inline:clamp(2px,1vw,4px);font-size:clamp(6px,2vw,8px);letter-spacing:.02em;gap:2px}#work .work-tools .filters .filter-count{font-size:clamp(5px,1.7vw,7px)}#work .work-tools .filters .filter>span{white-space:nowrap}}

@media(max-width:600px){#projectGrid.is-index .card{grid-template-columns:minmax(72px,22vw) minmax(0,1fr);gap:clamp(12px,3.5vw,18px)}#projectGrid.is-index .card-meta{grid-template-columns:auto minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(6px,2vw,10px)}#projectGrid.is-index .card-detail{white-space:normal;overflow-wrap:anywhere;text-align:left}#projectGrid.is-index .card-title{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-align:left}}

@media(max-width:809px){
  .mobile-nav-strip{position:relative;z-index:8;display:flex;flex-direction:column;align-items:stretch;width:calc(100% - 60px);max-width:1080px;margin:0 auto clamp(12px,3vw,16px);padding:10px 0 0;color:var(--foreground)}
  .mobile-nav-cluster{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content;align-content:center;align-items:center;row-gap:3px;min-height:44px}
  .mobile-nav-cluster .brand,.mobile-nav-cluster .hero-reel-role--mobile-nav{grid-column:1;margin:0;font-family:Manrope,Arial,sans-serif;font-size:clamp(7px,2.1vw,9px);letter-spacing:.08em;line-height:normal;text-transform:uppercase;white-space:nowrap}
  .mobile-nav-cluster .brand{grid-row:1;justify-self:start;color:var(--foreground);font-weight:500;text-decoration:none}
  .mobile-nav-cluster .hero-reel-role--mobile-nav{grid-row:2;justify-self:start;color:var(--muted);font-weight:400;text-align:left}
  .mobile-nav-toggle{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--foreground);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mobile-nav-cluster .mobile-nav-toggle{position:absolute;top:50%;right:0;transform:translateY(-50%)}
  .mobile-nav-toggle:focus-visible{outline:1px solid currentColor;outline-offset:2px}
  .mobile-nav-icon{display:flex;width:16px;height:8px;flex-direction:column;justify-content:space-between}
  .mobile-nav-icon{transform:translateX(14px)}
  .mobile-nav-icon i{display:block;width:100%;height:1px;background:currentColor;transform-origin:center;transition:transform 160ms ease}
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon i:first-child{transform:translateY(3.5px) rotate(45deg)}
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav.mobile-nav-dropdown{position:absolute;top:calc(100% - 1px);left:50%;display:grid;grid-template-columns:minmax(0,1fr);visibility:hidden;width:100vw;max-width:100vw;min-width:0;box-sizing:border-box;margin:0;padding:6px clamp(8px,4vw,16px) 32px;opacity:0;transform:translate(-50%,-4px);pointer-events:none;gap:0;border:0;background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(22px) saturate(1.16);-webkit-backdrop-filter:blur(22px) saturate(1.16);box-shadow:none;transition:opacity 220ms ease,transform 220ms ease,visibility 0s linear 225ms}
  .nav.mobile-nav-dropdown.is-open{visibility:visible;opacity:1;transform:translate(-50%,0);pointer-events:auto;transition:opacity 220ms ease,transform 220ms ease,visibility 0s}
  .nav.mobile-nav-dropdown a{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;padding:0 4px;color:var(--foreground);font-size:9px;font-weight:500;letter-spacing:.11em;line-height:1.2;text-decoration:none;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity 150ms ease,transform 150ms ease}
  .nav.mobile-nav-dropdown a:nth-child(1){transition-delay:60ms}.nav.mobile-nav-dropdown a:nth-child(2){transition-delay:40ms}.nav.mobile-nav-dropdown a:nth-child(3){transition-delay:20ms}.nav.mobile-nav-dropdown a:nth-child(4){transition-delay:0ms}
  .nav.mobile-nav-dropdown.is-open a{opacity:1;transform:translateY(0)}
  html[data-theme] .mobile-nav-strip .nav.mobile-nav-dropdown.is-open a,html[data-theme] .mobile-nav-strip .nav.mobile-nav-dropdown.is-open a:hover{opacity:1;transform:translateY(0)}
  .nav.mobile-nav-dropdown.is-open a:nth-child(1){transition-delay:0ms}.nav.mobile-nav-dropdown.is-open a:nth-child(2){transition-delay:20ms}.nav.mobile-nav-dropdown.is-open a:nth-child(3){transition-delay:40ms}.nav.mobile-nav-dropdown.is-open a:nth-child(4){transition-delay:60ms}
  html[data-theme] .mobile-nav-strip .nav.mobile-nav-dropdown a,html[data-theme] .mobile-nav-strip .nav.mobile-nav-dropdown a:hover{color:var(--foreground);mix-blend-mode:normal;text-shadow:none}
}
@media(max-width:600px){.mobile-nav-cluster .brand,.mobile-nav-cluster .hero-reel-role--mobile-nav{font-size:clamp(6px,2vw,8px);letter-spacing:.025em;line-height:1}}
@media(max-width:600px){.mobile-nav-strip{width:calc(100% - 32px)}}
@media(min-width:810px){.topbar .nav a:hover{text-decoration:underline;text-underline-offset:3px}}
@media(prefers-reduced-motion:reduce){.mobile-nav-icon i{transition:none!important}}
@media(max-width:600px){#projectGrid.is-index{display:grid!important}#projectGrid.is-index .card{display:block!important;grid-template-columns:none!important;gap:0!important}#projectGrid.is-index .card-media{width:100%;height:auto!important;aspect-ratio:4/5!important}#projectGrid.is-index .card-meta{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important}#projectGrid.is-index .card-detail{display:none!important}#projectGrid.is-index .card-title{white-space:normal!important}}
@media(max-width:809px) and (prefers-reduced-motion:reduce){.nav.mobile-nav-dropdown,.nav.mobile-nav-dropdown.is-open{transition:none;transform:translate(-50%,0)}.nav.mobile-nav-dropdown a,.nav.mobile-nav-dropdown.is-open a{transition:none;transform:none}}



@media(min-width:1920px) and (min-height:1200px){
  .topbar .brand,.topbar .nav a,.site-footer-links a{font-size:10px}
  .client-logo-caption{font-size:9px}
  .site-footer h3,.site-footer-bottom{font-size:10px}
  .site-footer p,.site-footer li,.site-footer address{font-size:12px}
  .about-entry span,.about-entry strong,.about-entry p,.about-entry a{font-size:13.5px}
  #projectGrid:not(.is-index) .card-category,#projectGrid:not(.is-index) .card-title,#projectGrid:not(.is-index) .card-detail,#projectGrid.is-index .card-category,#projectGrid.is-index .card-title,#projectGrid.is-index .card-detail{font-size:10px}
  #about .about-copy{font-size:16px}
  #services .service-copy,#services .service-workflow-intro{font-size:15px}
  #services .service-trigger .service-name{font-size:21px}
}