/* Peakreative motion: a deliberate entrance, soft depth and responsive details. */
.header-actions{display:flex;align-items:center;gap:14px}
.motion-toggle{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #001d3626;border-radius:50%;color:var(--navy);background:transparent;transition:background .25s,border-color .25s}
.motion-toggle[hidden]{display:none}
.motion-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.motion-toggle:hover{background:var(--cloud);border-color:var(--blue)}
.motion-toggle:disabled{cursor:default;opacity:.55}
.motion-play{display:none}
html[data-motion=off] .motion-pause{display:none}
html[data-motion=off] .motion-play{display:block}
.reading-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;pointer-events:none;background:var(--blue);transform:scaleX(0);transform-origin:left;z-index:2}
.site-header{transition:box-shadow .35s}
.site-header.is-scrolled{box-shadow:0 6px 24px #001d3609}
.hero h1 span,.hero p,.hero-cta,.project-dialog{animation:none}
.hero h1 .hero-line{overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
.hero h1 .hero-word{transform-origin:0 100%;padding-right:.04em}
html[data-motion=on] .hero-art{transform:translate3d(var(--drift-x,0px),var(--drift-y,0px),0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hero-art picture{transform-origin:70% 55%}
.hero-art picture{transition:opacity .55s}
.peak-flow{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .65s}
.hero-art.has-flow picture{opacity:0}
.hero-art.has-flow .peak-flow{opacity:1}
.hero h1{translate:0 var(--title-lift,0px);transition:translate .55s cubic-bezier(.2,.7,.2,1)}
.hero h1 .hero-word{perspective:900px;white-space:nowrap}
.hero h1 .hero-char{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.title-line{display:block;overflow:hidden;padding-block:.05em .14em;margin-block:-.05em -.14em}
.title-line-inner{display:block;transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--line-index,0) * 100ms + var(--reveal-delay,0ms))}
html[data-motion=on] [data-reveal]:not(.is-visible) .title-line-inner{transform:translate3d(0,var(--title-reveal-y,120%),0) rotate(2deg)}
.thought-word{transition:color .35s}
html[data-motion=on] .thought-word{color:#64758b}
html[data-motion=on] .thought-word.is-read{color:var(--navy)}
html[data-motion=on] .service-spotlight.is-visible{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .9s,box-shadow .65s}
.service-spotlight::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,25%),#ffffff65,transparent 65%);transition:opacity .6s}
.service-spotlight.is-interacting{box-shadow:0 24px 50px -24px #21389445}
.service-spotlight.is-interacting::after{opacity:1}
.hero-cta,.spotlight-project,.contact-main>.button{translate:var(--magnet-x,0px) var(--magnet-y,0px)}
html[data-motion=on] .studio-art{transform:translate3d(0,var(--studio-drift,0px),0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
html[data-motion=on] [data-reveal]{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
html[data-motion=on] [data-reveal]:not(.is-visible){opacity:0;transform:translate3d(0,var(--reveal-y,30px),0)}
html[data-motion=on] [data-reveal=scale]:not(.is-visible){transform:translate3d(0,var(--reveal-y,24px),0) scale(.96)}
html[data-motion=on] [data-reveal=logo]:not(.is-visible){transform:translate3d(0,calc(var(--reveal-y,30px) * .5),0)}
html[data-motion=on] .scroll-heading{translate:0 var(--depth-y,0px);rotate:var(--depth-turn,0deg);transform-origin:50% 50%}
html[data-motion=on] .studio-art{rotate:var(--scroll-sway,0deg)}
html[data-motion=on] .contact-art{translate:0 var(--depth-y,0px);rotate:var(--scroll-sway,0deg);scale:1.03}
.clients-heading-line,.section-label>span{transform-origin:left}
html[data-motion=on] .is-visible .clients-heading-line,html[data-motion=on] .is-visible.section-label>span{animation:line-unfold 1s cubic-bezier(.16,1,.3,1) both}
.overview-button{position:relative;isolation:isolate;overflow:hidden;transition:color .3s,background .3s,box-shadow .3s}
.overview-button::before{content:"";position:absolute;inset:0;background:#e8e1f4;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.overview-button:hover::before,.overview-button:focus-visible::before{transform:scaleX(1)}
.overview-name{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.overview-button:hover .overview-name{transform:translateX(3px)}
.overview-button .icon{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.overview-button:hover .icon{transform:translate(3px,-3px)}
.button{transition:background .3s,color .3s,transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,translate .4s cubic-bezier(.16,1,.3,1)}
.button:hover{transform:translateY(-3px);box-shadow:0 8px 24px #001d3614}
.button:active{transform:translateY(0) scale(.98);box-shadow:none}
.button .icon,.hero-talk .icon,.back-top .icon,.contact-phone .icon{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.button:hover .icon,.hero-talk:hover .icon,.contact-phone:hover .icon{transform:translate(3px,-3px)}
.hero-cta:hover .button-icon{transform:rotate(45deg)}
.hero-cta .button-icon{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hero-cta:hover .icon{transform:none}
.back-top:hover .icon{transform:translate(0,-4px)}
.contact-phone{transition:border-color .3s,background .3s}
.contact-phone:hover{border-color:#c3a2ff99;background:#001d3673}
.client-gallery img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.client-gallery li:hover img{transform:translateY(-4px)}
.service-dialog[open]::backdrop,.project-dialog[open]::backdrop{animation:backdrop-in .4s ease-out}
.mobile-menu:not([hidden]){animation:menu-in .4s cubic-bezier(.16,1,.3,1)}
.planner-progress span{transition:background .4s}
@keyframes line-unfold{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .header-actions{gap:10px}
  .motion-toggle{width:40px;height:40px}
  .overview-list li:first-child .overview-button::before{background:#0047d3}
  .overview-button:hover .overview-name{transform:none}
  html[data-motion=on] [data-reveal]:not(.is-visible){transform:translate3d(0,calc(var(--reveal-y,30px) * .6),0)}
}
@media(hover:none){.button:hover{transform:none;box-shadow:none}.client-gallery li:hover img{transform:none}}
@media(max-width:359px){.site-header .brand img{width:158px}.header-actions{gap:4px}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] .hero-art,html[data-motion=off] .studio-art{transform:none}
html[data-motion=off] .peak-flow{display:none}
html[data-motion=off] .hero-art picture{opacity:1}
html[data-motion=off] .service-spotlight{transform:none}
html[data-motion=off] .service-spotlight::after{display:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}