/* Motion lives in the details; every control remains a native, visible target. */
:root{--interaction-ease:cubic-bezier(.2,.75,.18,1);--interaction-paper:#e9e9e2;--interaction-ink:#17211f}
.micro-link{position:relative;display:inline-flex!important;align-items:center;gap:20px;touch-action:manipulation}
.micro-label{display:inline-grid;overflow:hidden;vertical-align:bottom;line-height:1.3}
.micro-label-current,.micro-label-copy{grid-area:1 / 1;white-space:nowrap}
.micro-glyph{display:inline-block;transition:transform .52s var(--interaction-ease);transition-delay:var(--glyph-delay,0ms)}
.micro-label-copy .micro-glyph{transform:translateY(130%) rotate(6deg)}
.micro-link:is(:hover,:focus-visible) .micro-label-current .micro-glyph{transform:translateY(-130%) rotate(-6deg)}
.micro-link:is(:hover,:focus-visible) .micro-label-copy .micro-glyph{transform:translateY(0) rotate(0)}
.micro-arrow{display:inline-grid;overflow:hidden;width:1.35em;height:1.35em;line-height:1.35;text-align:center;flex:none}
.micro-arrow>span{grid-area:1 / 1;transition:transform .5s var(--interaction-ease)}
.micro-arrow>span+span{transform:translate(-130%,130%)}
.micro-link:is(:hover,:focus-visible) .micro-arrow>span:first-child{transform:translate(130%,-130%)}
.micro-link:is(:hover,:focus-visible) .micro-arrow>span+span{transform:translate(0,0)}
.micro-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--interaction-ease);pointer-events:none}
.micro-link:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
.micro-magnetic{translate:var(--magnetic-x,0px) var(--magnetic-y,0px);transition:translate .48s var(--interaction-ease)}
.micro-link:focus-visible,.project>.project-media:focus-visible{outline:2px solid currentColor;outline-offset:7px}

.studio-navigation{position:fixed;right:30px;bottom:27px;z-index:100;isolation:isolate;color:var(--interaction-paper);font-family:Arial,Helvetica,sans-serif}
.studio-menu-toggle{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0 0 0 auto;width:146px;height:56px;padding:0 23px;border:1px solid #ffffff16;border-radius:7px;background:#19201f;color:var(--interaction-paper);font:500 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;cursor:pointer;box-shadow:0 7px 22px #071a1420;transition:translate .48s var(--interaction-ease),background .3s,border-color .3s;touch-action:manipulation}
.studio-menu-toggle:hover{background:#2b3431;border-color:#ffffff40}
.studio-menu-toggle:focus-visible{outline:2px solid #e4e7da;outline-offset:5px;box-shadow:0 0 0 7px #17211f}
.studio-menu-toggle-label{display:grid;overflow:hidden;line-height:1.3;text-align:left}
.studio-menu-toggle-label>span{grid-area:1/1;transition:transform .45s var(--interaction-ease),opacity .3s}
.studio-menu-close-label{transform:translateY(130%);opacity:0}
.is-open .studio-menu-open-label{transform:translateY(-130%);opacity:0}
.is-open .studio-menu-close-label{transform:translateY(0);opacity:1}
.studio-menu-symbol{display:block;position:relative;width:15px;height:15px;flex:none}
.studio-menu-symbol i{position:absolute;left:0;top:7px;width:15px;height:1px;background:currentColor;transition:transform .6s var(--interaction-ease)}
.studio-menu-symbol i+i{transform:rotate(90deg)}
.is-open .studio-menu-symbol i{transform:rotate(135deg)}
.is-open .studio-menu-symbol i+i{transform:rotate(225deg)}
.studio-menu-panel{position:absolute;display:flex;flex-direction:column;gap:0;right:0;bottom:70px;width:400px;max-height:calc(100svh - 120px);padding:28px 30px 25px;overflow:auto;overscroll-behavior:contain;background:#19201f;color:var(--interaction-paper);border:1px solid #e8efdf16;border-radius:10px;box-shadow:0 22px 70px #09110d33;transform-origin:bottom right;clip-path:inset(100% 0 0 72% round 10px);opacity:0;visibility:hidden;transform:translateY(12px);transition:clip-path .62s cubic-bezier(.76,0,.24,1),opacity .35s,transform .62s var(--interaction-ease),visibility .62s}
.studio-menu-panel[hidden]{display:none}
.is-open .studio-menu-panel{clip-path:inset(0 0 0 0 round 10px);opacity:1;visibility:visible;transform:translateY(0)}
.studio-menu-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:33px;color:#a6b0a4;font-size:8px;line-height:1.4;letter-spacing:.13em}
.studio-menu-links{display:grid}
.studio-menu-links>a{display:flex;align-items:baseline;gap:14px;position:relative;overflow:hidden;margin:0;padding:15px 0;border-top:1px solid #a1ac992e;color:inherit;text-decoration:none;transform:translateY(28px);opacity:0;transition:transform .72s var(--interaction-ease),opacity .5s,color .3s}
.is-open .studio-menu-links>a{transform:translateY(0);opacity:1}
.is-open .studio-menu-links>a:nth-child(1){transition-delay:.14s,.14s,0s}
.is-open .studio-menu-links>a:nth-child(2){transition-delay:.20s,.20s,0s}
.is-open .studio-menu-links>a:nth-child(3){transition-delay:.26s,.26s,0s}
.studio-menu-number{font-size:9px;color:#b4bbae;letter-spacing:.03em;flex:none}
.studio-menu-word{font-size:clamp(29px,3vw,39px);line-height:1.1;font-weight:400;letter-spacing:-.055em;transition:translate .55s var(--interaction-ease)}
.studio-menu-arrow{margin-left:auto;font-size:22px;line-height:1;opacity:0;transform:translate(-10px,10px);transition:transform .5s var(--interaction-ease),opacity .4s}
.studio-menu-links>a:is(:hover,:focus-visible){color:#d7e8b6}
.studio-menu-links>a:is(:hover,:focus-visible) .studio-menu-word{translate:7px 0}
.studio-menu-links>a:is(:hover,:focus-visible) .studio-menu-arrow{transform:translate(0,0);opacity:1}
.studio-menu-links>a:focus-visible{outline:1px solid #d7e8b6;outline-offset:4px;border-radius:2px}
.studio-menu-foot{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-top:30px;font-size:10px;line-height:1.6;color:#a6b0a4;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s var(--interaction-ease)}
.is-open .studio-menu-foot{opacity:1;transform:none;transition-delay:.3s}
.studio-menu-foot>a{font-size:11px;color:#e9e9e2;padding-bottom:4px;border-bottom:1px solid #9da69880;white-space:nowrap}
.studio-menu-foot>a span{margin-left:15px;display:inline-block;transition:translate .4s var(--interaction-ease)}
.studio-menu-foot>a:hover span{translate:3px -3px}

.project>.project-media{position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;isolation:isolate;font-size:inherit;line-height:0;background:#0b161c;box-shadow:0 25px 60px #0002;clip-path:inset(0 round 0);transition:clip-path .8s var(--interaction-ease)}
.project>.project-media-image>img{display:block;width:100%;height:550px;object-fit:cover;object-position:top;border:0;box-shadow:none;padding:0}
.project.reverse>.project-media-image>img{height:460px}
.project-media>img,.project-media>.site-frame{transform:scale(1.001);transition:transform 1.15s cubic-bezier(.19,1,.22,1)}
.project>.project-media:is(:hover,:focus-visible){clip-path:inset(6px round 11px)}
.project>.project-media:is(:hover,:focus-visible)>img,.project>.project-media:is(:hover,:focus-visible)>.site-frame{transform:scale(1.045)}
.project-media .site-frame:hover{transform:none}
.project-media-cue{position:absolute;z-index:4;right:28px;bottom:26px;display:flex;align-items:center;gap:29px;padding:18px 21px;color:#17221f;background:#e9e9e2;line-height:1;font-size:11px;border-radius:3px;opacity:0;transform:translateY(20px);transition:transform .62s var(--interaction-ease),opacity .35s;box-shadow:0 4px 22px #05121b18;pointer-events:none}
.project-media-cue>span+span{font-size:17px}
.project>.project-media:is(:hover,:focus-visible) .project-media-cue{opacity:1;transform:translateY(0)}
.service{position:relative;transition:border-color .5s}
.service:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--interaction-ease)}
.service:hover:before{transform:scaleX(1)}
.service b{display:inline-block;transition:translate .6s var(--interaction-ease)}
.service:hover b{translate:6px 0}
.brief input,.brief textarea{transition:background .3s,border-color .3s,box-shadow .3s}
.brief input:focus,.brief textarea:focus{background:#ffffff45;box-shadow:0 2px 0 #17242a;outline:1px solid #17242a;outline-offset:3px}
.brief-grid>div>label{display:inline-block;transition:color .3s,translate .3s}
.brief-grid>div:focus-within>label{color:#17242a;translate:0 -2px}

@media(max-width:750px){
  .studio-navigation{right:18px;bottom:18px;bottom:max(18px,env(safe-area-inset-bottom))}
  .studio-menu-toggle{height:52px;width:133px;padding:0 20px;font-size:11px}
  .studio-menu-panel{width:min(360px,calc(100vw - 36px));max-height:calc(100svh - 106px);bottom:64px;padding:25px 25px 22px}
  .studio-menu-meta{font-size:7px;margin-bottom:24px}
  .studio-menu-word{font-size:35px}
  .studio-menu-links>a{padding:15px 0}
  .studio-menu-arrow{opacity:.7;transform:none}
  .project>.project-media-image>img,.project.reverse>.project-media-image>img{height:270px}
  .project-media-cue{right:16px;bottom:16px;padding:14px 16px;gap:21px;font-size:10px}
  footer{padding-bottom:92px}
}
@media(hover:none),(pointer:coarse){
  .micro-magnetic{translate:none!important}
  .project-media-cue{opacity:1;transform:none}
  .micro-link:hover .micro-label-current .micro-glyph{transform:none}
  .micro-link:hover .micro-label-copy .micro-glyph{transform:translateY(130%)}
  .service:hover b{translate:none}
}
.paused :is(.micro-glyph,.micro-arrow>span,.micro-link,.micro-link:after,.micro-magnetic,.studio-menu-toggle,.studio-menu-toggle-label>span,.studio-menu-symbol i,.studio-menu-panel,.studio-menu-links>a,.studio-menu-word,.studio-menu-arrow,.studio-menu-foot,.studio-menu-foot>a span,.project-media,.project-media>img,.project-media>.site-frame,.project-media-cue,.service,.service:before,.service b,.brief input,.brief textarea,.brief-grid label){transition:none!important}
.paused .micro-magnetic{translate:none!important}
.paused .micro-label-current .micro-glyph{transform:none!important}
.paused .micro-label-copy{display:none}
.paused .project>.project-media:is(:hover,:focus-visible)>img,.paused .project>.project-media:is(:hover,:focus-visible)>.site-frame{transform:none}
@media(prefers-reduced-motion:reduce){
  :is(.micro-glyph,.micro-arrow>span,.micro-link,.micro-link:after,.micro-magnetic,.studio-menu-toggle,.studio-menu-toggle-label>span,.studio-menu-symbol i,.studio-menu-panel,.studio-menu-links>a,.studio-menu-word,.studio-menu-arrow,.studio-menu-foot,.studio-menu-foot>a span,.project-media,.project-media>img,.project-media>.site-frame,.project-media-cue,.service,.service:before,.service b,.brief input,.brief textarea,.brief-grid label){transition:none!important}
  .micro-magnetic{translate:none!important}
  .micro-label-current .micro-glyph{transform:none!important}
  .micro-label-copy{display:none}
  .project>.project-media:is(:hover,:focus-visible)>img,.project>.project-media:is(:hover,:focus-visible)>.site-frame{transform:none}
}