﻿#siteHeader{--header-surface:hsla(0,0%,98%,.97);--header-ink:#191919;--header-muted:#626262;--header-rule:#dedede;display:grid;grid-template-columns:minmax(112px,1fr) auto auto auto;column-gap:calc(clamp(18px, 2.3vw, 38px));height:82px;padding:0 calc(clamp(22px, 4vw, 72px));background:var(--header-surface);color:var(--header-ink);border:0;border-bottom:1px solid var(--header-rule);box-shadow:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:auto}
#siteHeader.scrolled{height:76px;background:var(--header-surface);border-color:var(--header-rule);box-shadow:0 5px 22px #00000005}
body.inner-page:is(.services-page,.portfolio-page) #siteHeader{--header-surface:rgba(24,24,24,.97);--header-ink:#f5f5f5;--header-muted:#bdbdbd;--header-rule:#414141}
#siteHeader .header-studio{display:flex;position:static;grid-column:1;grid-row:1;justify-self:start;gap:0;color:var(--header-ink)}
#siteHeader .primary-nav{display:flex;grid-column:2;grid-row:1;gap:calc(clamp(18px, 2vw, 30px));align-items:center;justify-content:center;margin:0;font-size:13px;font-weight:500;color:var(--header-muted)}
#siteHeader .primary-nav a{min-height:44px;padding:0;background:transparent;box-shadow:none;text-decoration:none;color:inherit;transition:color .2s}
#siteHeader .primary-nav a:hover,#siteHeader .primary-nav a[aria-current=page]{color:var(--header-ink)}
#siteHeader .primary-nav a:after{bottom:5px;height:2px;background:var(--header-ink)}
#siteHeader .header-cta{display:inline-flex;position:static;align-items:center;justify-content:center;gap:12px;width:auto;min-width:0;height:44px;min-height:44px;padding:0 18px;margin:0;border:1px solid var(--header-ink);border-radius:7px;font:500 12px/1 var(--sans);letter-spacing:0;white-space:nowrap;text-decoration:none;transform:none;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;transition:background-color .2s,color .2s,border-color .2s}
#siteHeader .header-signup{grid-column:3;grid-row:1}
#siteHeader :is(.header-signup,.desktop-login){background:var(--header-ink);color:#fafafa;border-color:var(--header-ink)}
body.inner-page:is(.services-page,.portfolio-page) #siteHeader :is(.header-signup,.desktop-login){color:#191919}
#siteHeader .desktop-login{grid-column:4;grid-row:1}
#siteHeader :is(.header-signup,.desktop-login):is(:hover,:focus-visible){background:#414141;color:#fff;border-color:#414141;box-shadow:none}

#siteHeader .header-cta>span{display:block;font-size:16px;line-height:1;transform:none}
#siteHeader .header-cta .cta-arrow{width:16px;height:16px}
#siteHeader .header-actions{display:none;position:relative;inset:auto;transform:none;grid-row:1;z-index:60}
#siteHeader #headerActionsToggle{background:transparent;color:var(--header-ink);border-color:var(--header-rule);border-radius:7px;width:auto;height:44px;min-height:44px;padding:0 14px;gap:10px;box-shadow:none}
#siteHeader #headerActionsToggle .menu-button-label{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;font:inherit;transform:none}
#siteHeader #headerActionsToggle .menu-button-plus{display:none}
#siteHeader #headerActionsToggle .mobile-menu-bars{display:flex;flex-direction:column;gap:4px;width:18px;transform:none}
#siteHeader .mobile-menu-bars i{display:block;width:18px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
#siteHeader #headerActionsToggle[aria-expanded=true] .mobile-menu-bars i:first-child{transform:translateY(6px) rotate(45deg)}
#siteHeader #headerActionsToggle[aria-expanded=true] .mobile-menu-bars i:nth-child(2){opacity:0}
#siteHeader #headerActionsToggle[aria-expanded=true] .mobile-menu-bars i:last-child{transform:translateY(-6px) rotate(-45deg)}
#siteHeader #headerActionsPanel{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;position:absolute;inset:calc(100% + 16px) 0 auto auto;width:240px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 160px);overflow:auto;padding:8px;gap:0;border:1px solid var(--header-rule);border-radius:10px;background:var(--header-surface);color:var(--header-ink);box-shadow:0 16px 40px #00000012;transform:none;opacity:1;pointer-events:auto}
#siteHeader #headerActionsPanel[hidden]{display:none}
#siteHeader #headerActionsPanel a{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;min-height:46px;margin:0;padding:12px 14px;background:transparent;color:var(--header-muted);border:0;border-radius:5px;box-shadow:none;text-decoration:none;font:500 14px/1.4 var(--sans);transform:none;opacity:1;transition:background-color .2s,color .2s}
#siteHeader #headerActionsPanel a+a{border:0}
#siteHeader #headerActionsPanel a:is(:hover,:focus-visible),#siteHeader #headerActionsPanel a[aria-current=page]{background:#88888815;color:var(--header-ink);box-shadow:none}
#siteHeader :is(a,button):focus-visible{outline:2px solid var(--header-ink);outline-offset:4px}
@media(max-width:1100px){
  #siteHeader{grid-template-columns:minmax(80px,1fr) auto auto auto;column-gap:12px}
  #siteHeader .primary-nav{display:none}
  #siteHeader .header-signup{grid-column:2}
  #siteHeader .desktop-login{grid-column:3}
  #siteHeader .header-actions{display:block;grid-column:4}
}
@media(max-width:800px){
  body:not(.inner-page) #siteHeader:not(.mobile-past-hero){display:grid}
  #siteHeader,#siteHeader.scrolled{height:124px;padding:8px max(16px, env(safe-area-inset-left)) 12px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px 44px;gap:8px 10px;backdrop-filter:none;-webkit-backdrop-filter:none}
  #siteHeader .header-studio{grid-column:1;grid-row:1}
  #siteHeader .header-actions{grid-column:2;grid-row:1;justify-self:end}
  #siteHeader .header-signup{grid-column:1}
  #siteHeader .desktop-login,#siteHeader .header-signup{grid-row:2;width:100%;padding:0 10px;font-size:11px;gap:7px}
  #siteHeader .desktop-login{grid-column:2}
  #siteHeader #headerActionsPanel{top:calc(100% + 66px)}
  #leadForm{scroll-margin-top:144px}
}
@media(prefers-reduced-motion:reduce){#siteHeader .header-cta,#siteHeader .mobile-menu-bars i,#siteHeader .primary-nav a{transition:none}}
body:not(.inner-page) #siteHeader:not(.scrolled){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(min-width:801px){
  body:not(.inner-page) #siteHeader.scrolled{height:82px}
  body:not(.inner-page) #siteHeader:not(.scrolled){--header-ink:#191919;--header-muted:#444;--header-rule:#bdbdbd}
  body:not(.inner-page) #siteHeader:not(.scrolled) :is(.header-signup,.desktop-login){color:#fafafa}
  body:not(.inner-page) #siteHeader:not(.scrolled) :is(.header-signup,.desktop-login):hover{color:#fff}

  body:not(.inner-page) #siteHeader:not(.scrolled) #headerActionsPanel{--header-ink:#191919;--header-muted:#626262;--header-rule:#dedede}
}
#siteHeader .header-studio .header-home img{width:9rem;height:4.4rem}
@media(min-width:1101px){#siteHeader .header-home{margin-left:calc(clamp(0px, 100vw - 1150px, 144px))}}
@media(min-width:801px) and (max-width:1100px){#siteHeader .header-studio .header-home img{width:8rem;height:3.9rem}}
@media(max-width:800px){#siteHeader .header-studio .header-home img{width:5.5rem;height:2.7rem}}
@media(max-width:800px){
  .mobile-cta-scroll{transform:translate3d(0,calc(-1 * var(--mobile-header-lift,0px)),0);will-change:transform}
  #mobileMenuDock{display:block;position:fixed;inset:auto max(18px,env(safe-area-inset-right)) calc(max(18px,env(safe-area-inset-bottom)) + var(--mobile-keyboard-lift,0px)) auto;width:54px;height:54px;z-index:110;transform:none;opacity:0;visibility:hidden;pointer-events:none}
  #mobileMenuDock.mobile-dock-ready{opacity:1;visibility:visible;pointer-events:auto}
  #mobileMenuDock>button{display:grid;place-items:center;width:54px;height:54px;min-height:54px;padding:0;gap:0;border:1px solid #343434;border-radius:50%;background:linear-gradient(145deg,#303030,#111);color:#fff;box-shadow:0 6px 24px #0003,inset 0 1px #ffffff24;transform:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
  #mobileMenuDock>button[aria-expanded=true]{transform:rotate(90deg);box-shadow:0 5px 20px #0004,inset 0 1px #ffffff24}
  #mobileMenuDock>button>span:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #mobileMenuDock>button>span:nth-child(2){display:none}
  #mobileMenuDock>button>span:last-child{display:flex;flex-direction:column;gap:4px;width:20px;transform:none}
  #mobileMenuDock>button i{display:block;width:20px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
  #mobileMenuDock>button[aria-expanded=true] i:first-child{transform:translateY(6px) rotate(45deg)}
  #mobileMenuDock>button[aria-expanded=true] i:nth-child(2){opacity:0}
  #mobileMenuDock>button[aria-expanded=true] i:last-child{transform:translateY(-6px) rotate(-45deg)}
  #mobileMenuDock>nav{display:flex;flex-direction:column;align-items:flex-end;gap:9px;position:absolute;inset:auto -4px 68px auto;width:min(248px,calc(100vw - 36px));max-height:calc(100dvh - 120px - env(safe-area-inset-bottom));overflow:auto;padding:8px 4px 12px;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .16s .14s,transform .22s}
  #mobileMenuDock>nav.menu-open{opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  #mobileMenuDock>nav[hidden]{display:none}
  #mobileMenuDock>nav{overflow:visible;scrollbar-width:none;opacity:1;transform:none;transition:none}
  #mobileMenuDock>nav::-webkit-scrollbar{display:none}
  #mobileMenuDock>nav a{display:flex;flex:none;align-items:center;justify-content:center;gap:0;min-height:42px;min-width:132px;padding:10px 17px;border:0;border-radius:999px;background:#171717;color:#fff;font-size:13px;font-weight:500;box-shadow:0 5px 14px #0002;opacity:0;transform:translate(var(--menu-from-x,40px),var(--menu-from-y,100px)) scale(.08);transform-origin:center;transition:opacity .15s,transform .22s cubic-bezier(.4,0,.7,.3),background-color .2s;transition-delay:calc((var(--menu-count,4) - 1 - var(--menu-order,0)) * 25ms)}
  #mobileMenuDock>nav a::before,#mobileMenuDock>nav a::after{display:none;content:none}
  #mobileMenuDock>nav.menu-open a{opacity:1;transform:translate(0,0) scale(1);transition-duration:.18s,.36s,.2s;transition-timing-function:ease,cubic-bezier(.16,1,.3,1),ease;transition-delay:calc(var(--menu-order,0) * 45ms)}
  #mobileMenuDock>nav a:hover,#mobileMenuDock>nav a:focus-visible{background:#363636;color:#fff}
  #mobileMenuDock :is(button,a):focus-visible{outline:2px solid #967c5e;outline-offset:3px}
  #mobileMenuDock>button{-webkit-tap-highlight-color:transparent}
  #mobileMenuDock>nav a{-webkit-tap-highlight-color:transparent}
  #mobileMenuDock>nav a:focus{outline:none}
  #mobileMenuDock>nav a:focus-visible{outline:2px solid #967c5e;outline-offset:3px}
  #mobileMenuDock>button:focus{outline:none}
  #mobileMenuDock>button:focus-visible{outline:2px solid #967c5e;outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){#mobileMenuDock>button,#mobileMenuDock>button i,#mobileMenuDock>nav,#mobileMenuDock>nav a,#mobileMenuDock>nav.menu-open a{transition:none}}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
  body:not(.inner-page) #mobileMenuDock{transition:opacity 1.4s ease .3s,visibility 0s linear .3s}
}
