@layer components{.skip_link{top:var(--space-2);z-index:100;translate:0 calc(-100% - var(--space-2) * 2);position:fixed;inset-inline-start:var(--space-2);&:focus{translate:0}}.nav-panel{--panel-bg:#0b0b0b;--panel-border:#1b1b1b;--panel-radius:.5rem;top:3.75rem;visibility:hidden;font-size:.875rem;font-weight:var(--primary-medium);letter-spacing:var(--letter-spacing-tight);line-height:1.25rem;position:absolute;inset-inline:0;&:before{content:"";position:absolute;inset:-1.25rem 0 100%}}.nav-panel_surface{background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);position:absolute;inset:0;overflow:hidden}.nav-panel_weave{left:calc(50% - 960px + var(--weave-x,0px));top:calc(50% - 540px + var(--weave-y,0px));width:1920px;max-width:none;height:1080px;rotate:var(--weave-rotate,0deg);pointer-events:none;position:absolute}.nav-panel[data-panel=services]{--weave-y:-146px}.nav-panel[data-panel=work]{--weave-x:1px;--weave-y:388.5px}.nav-panel[data-panel=studio]{--weave-y:173px;--weave-rotate:180deg}.nav-panel[data-panel=resources]{--weave-x:1px;--weave-y:-15.5px;--weave-rotate:180deg}.nav-panel_body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;justify-content:space-between;align-items:flex-end;gap:2.5rem;padding:calc(1.25rem + 1px);display:flex;position:relative}.nav-panel_groups{flex:1 1 0;align-self:flex-start;gap:2.5rem;min-width:0;padding:1.25rem;display:flex}.nav-panel_group{flex-direction:column;gap:2.5rem;display:flex}[data-columns=fill] .nav-panel_group{flex:1 1 0;min-width:0}[data-columns=fixed] .nav-panel_group{flex:none;width:11.625rem}.nav-panel_heading{font-family:var(--secondary-family);letter-spacing:var(--letter-spacing-tight);color:var(--text);font-size:2rem;font-weight:300;line-height:2rem;display:block}.nav-panel .nav-panel_links{gap:.25rem;& .nav-links_link{vertical-align:top;white-space:nowrap;text-overflow:ellipsis;max-width:100%;display:inline-block;overflow:hidden}}@media (hover:hover){.nav-panel_groups:has(.nav-panel_group:hover) .nav-panel_group:not(:hover) .nav-links_link,.nav-panel_body:has(.nav-panel_aside .nav-links:hover) .nav-panel_group .nav-links_link,.nav-panel_body:has(.nav-panel_group:hover) .nav-panel_aside .nav-links_link{opacity:.35}}.nav-panel_body:has(.nav-panel_aside) .nav-panel_groups{flex:none}.nav-panel_aside{flex-direction:column;flex:1 1 0;justify-content:flex-end;align-self:stretch;align-items:flex-end;padding:1.25rem;display:flex}.nav-panel .nav-panel_contact{text-align:right;align-items:flex-end;gap:.5rem}.nav-panel_feature{color:var(--text);align-items:flex-end;gap:1.25rem;text-decoration:none;display:flex}.nav-panel_feature-label{width:10.25rem;font-family:var(--secondary-family);text-align:right;padding-bottom:1.25rem;font-size:2rem;font-weight:300;line-height:2rem}.nav-panel_card{aspect-ratio:432/243;border:1px solid var(--panel-border);border-radius:var(--panel-radius);width:min(27rem,30vw);color:var(--text);background-color:#111;flex:none;text-decoration:none;position:relative;overflow:hidden}.nav-panel_reel{font-family:var(--secondary-family);place-items:center;font-size:2rem;font-weight:300;line-height:2rem;transition:background-color .25s;display:grid}@media (hover:hover){.nav-panel_feature:hover .nav-panel_reel{background-color:#161616}}.nav-panel_promo{container-type:inline-size}.nav-panel_promo .nav-panel_promo-image{object-fit:cover;width:194.884%;max-width:none;height:153.527%;transition:scale .6s cubic-bezier(.2,.8,.2,1);position:absolute;top:-41.079%;left:-47.442%}@media (hover:hover){.nav-panel_promo:hover .nav-panel_promo-image{scale:1.03}}.nav-panel_promo-brand{font-family:"Manrope", var(--primary-family);letter-spacing:-.02em;text-transform:uppercase;color:#fff;align-items:center;font-size:max(.6rem,2.706cqw);font-weight:800;line-height:1.2;display:flex;position:absolute;top:7.884%;left:4.651%}.nav-panel_promo .nav-panel_promo-logo{width:2.15em;height:1.2em}.nav-panel_promo-title{font-family:var(--secondary-family);white-space:nowrap;flex-direction:column;font-size:7.442cqw;font-weight:300;line-height:1;display:flex;position:absolute;top:65.975%;left:33.953%}.nav-panel_promo-caption{color:var(--text-muted);position:absolute;bottom:1.1875rem;left:4.651%}.nav-panel :focus-visible{outline:1px solid var(--text);outline-offset:2px;border-radius:2px}@media (width<64rem){.nav-panel{margin-block:var(--space-2) var(--space-4);display:none;position:relative;top:auto;&:before{content:none}}.nav-panel_body{align-items:stretch;gap:var(--space-4);padding:var(--space-3);flex-direction:column}.nav-panel_groups{gap:var(--space-5) var(--space-4);padding:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}[data-columns] .nav-panel_group{gap:var(--space-3);width:auto}.nav-panel_heading,.nav-panel_feature-label,.nav-panel_reel{font-size:1.5rem;line-height:1.75rem}.nav-panel_feature{align-items:stretch;gap:var(--space-2);flex-direction:column}.nav-panel_feature-label{width:auto;padding:0 var(--space-2);text-align:left}.nav-panel_card{width:100%}.nav-panel_aside{padding:var(--space-2);align-items:flex-start}.nav-panel .nav-panel_contact{text-align:left;align-items:flex-start}}@media (width<30rem){.nav-panel_groups{grid-template-columns:minmax(0,1fr)}}.nav_wrap{inset-inline:0;z-index:50;padding-inline:var(--site-margin);color:var(--text);justify-content:center;display:flex;position:fixed;top:0}.nav_blur{inset:0 0 calc(-1% * var(--nav-band,40));z-index:1;pointer-events:none;position:absolute;&>div{position:absolute;inset:0 0 auto}&>div:first-child{background-color:rgb(11 11 11/var(--nav-tint,.55));height:95%;backdrop-filter:blur(calc(.5px * var(--nav-blur,1.6)));mask-image:linear-gradient(#000 42%,#0000 100%)}&>div:nth-child(2){height:80%;backdrop-filter:blur(calc(1.5px * var(--nav-blur,1.6)));mask-image:linear-gradient(#000 31%,#0000 100%)}&>div:nth-child(3){height:62%;backdrop-filter:blur(calc(3px * var(--nav-blur,1.6)));mask-image:linear-gradient(#000 19%,#0000 100%)}&>div:nth-child(4){height:45%;backdrop-filter:blur(calc(6px * var(--nav-blur,1.6)));mask-image:linear-gradient(#000 0%,#0000 100%)}&>div:nth-child(5){height:28%;backdrop-filter:blur(calc(10px * var(--nav-blur,1.6)));mask-image:linear-gradient(#000 0%,#0000 100%)}}.nav_inner{width:100%;max-width:var(--max-width-main);column-gap:var(--site-gutter);font-size:.875rem;font-weight:var(--primary-medium);letter-spacing:var(--letter-spacing-tight);z-index:2;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;padding-block:1.25rem;line-height:1.25rem;display:grid;position:relative}.nav_logo{color:inherit;letter-spacing:var(--letter-spacing-tight);grid-column:1/span 6;justify-self:start;align-items:center;gap:.3125rem;font-size:.8333rem;text-decoration:none;display:inline-flex;@media (hover:hover){&>*{transition:opacity .2s}&:hover>*{opacity:.7}}}.nav_logo .nav_logo_icon{width:1.0417rem;height:1.0417rem;color:var(--brand-500)}.nav_menu{grid-column:9/span 3}.nav_menus{gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.nav_trigger{font:inherit;letter-spacing:inherit;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;will-change:transform;background:0 0;border:0;border-radius:2px;padding:0;transition:color .2s;display:inline-flex;&[aria-expanded=true]{color:var(--text)}&:focus-visible{outline:1px solid var(--text);outline-offset:2px}@media (hover:hover){&:hover{color:var(--text)}}}.nav_wrap:not([data-nav-ready]) .nav_item:is(:hover,:focus-within){&>.nav-panel{visibility:visible}&>.nav_trigger{color:var(--text)}}.nav-panel[data-show]{visibility:visible}.nav-panel_surface{z-index:1}.nav-panel_body{z-index:3}.nav_cloth{z-index:0;opacity:0;pointer-events:none;max-width:none;position:absolute}.nav_wrap[data-cloth]{& .nav_cloth{opacity:1}& .nav-panel_surface{visibility:hidden}}.nav_wrap[data-cloth][data-handoff] .nav-panel_surface{visibility:visible}.nav_wrap[data-mode=fade] .nav-panel{opacity:0;transition:opacity .18s,visibility 0s linear .18s;&[data-show]{opacity:1;transition:opacity .18s,visibility}}.nav_inner .nav_contact{white-space:nowrap;grid-column:12/span 1;justify-content:space-between;justify-self:end;width:max-content;min-width:100%;font-size:.875rem;line-height:1.25rem}.nav_toggle{display:none}@media (width<64rem){.nav_inner{flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.nav_menu{visibility:hidden;flex-basis:100%;order:3;grid-template-rows:0fr;transition:grid-template-rows .25s,visibility .25s;display:grid;&>.nav_menus{flex-direction:column;gap:0;overflow:hidden}}.nav_cloth{display:none!important}.nav_trigger{width:100%;padding-block:var(--space-1);font-family:var(--secondary-family);font-size:var(--h3);color:var(--text);font-weight:300;line-height:1.1;&[aria-expanded=false]{color:var(--text-muted)}}.nav_trigger_comma{display:none}.nav-panel[data-show]{display:block}.nav_wrap[data-open]{background-color:var(--background);& .nav_menu{visibility:visible;overscroll-behavior:contain;grid-template-rows:1fr;max-height:calc(100dvh - 3.75rem);overflow-y:auto;&>.nav_menus{padding-block:var(--space-3) var(--space-4)}}}.nav_inner .nav_contact{width:max-content;margin-left:auto;margin-right:var(--space-4);gap:var(--space-2)}.nav_toggle{--_icon-width:1.625rem;--_bar-gap:.5rem;min-width:2.75rem;min-height:2.75rem;margin-right:calc((2.75rem - var(--_icon-width)) / -2);color:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.nav_toggle_icon{width:var(--_icon-width);height:calc(var(--_bar-gap) + var(--border-width));display:block;position:relative;&:before,&:after{content:"";height:var(--border-width);background-color:currentColor;transition:rotate .22s cubic-bezier(.4,0,.2,1),translate .2s cubic-bezier(.4,0,.2,1) .18s,width .3s cubic-bezier(.4,0,.2,1);position:absolute;inset-inline:0}&:before{top:0}&:after{top:var(--_bar-gap);width:62%;left:auto}}@media (hover:hover){.nav_toggle:hover .nav_toggle_icon:after{width:100%}}.nav_wrap[data-open] .nav_toggle_icon{&:before,&:after{transition:translate .18s cubic-bezier(.4,0,.2,1),rotate .26s cubic-bezier(.34,1.4,.64,1) .14s,width .18s cubic-bezier(.4,0,.2,1)}&:before{translate:0 calc(var(--_bar-gap) / 2);rotate:45deg}&:after{translate:0 calc(var(--_bar-gap) / -2);width:100%;rotate:-45deg}}}}
