/* One continuous scene: the opening logo becomes the heart of the service grid. */
.site-header{justify-content:flex-end;height:78px;padding:18px 28px}
.site-header .wordmark{display:none}
.header-right{gap:25px}.header-cta{font-size:10px}.location{font-size:8px}
.story{height:330svh}
.story-sticky{height:100svh;min-height:0;position:sticky;top:0;overflow:hidden}
.intro-grid{inset:-25%;height:auto;background-size:16.666% 25%;opacity:.7}
.intro-grid i{display:none}
.intro{position:absolute;inset:auto;left:50%;top:50%;width:min(88vw,86svh);height:min(88vw,86svh);transform:translate(-50%,-50%);background:#fff;padding:0;display:block;overflow:hidden;pointer-events:auto;border:1px solid #d9c9e840;will-change:width,height,left,top}
.intro-copy{position:absolute;left:26px;right:26px;top:26px;margin:0;max-width:505px}
.intro-first .eyebrow{display:block;font-size:8px;letter-spacing:.1em;margin-bottom:20px;color:#805da0}
.intro h1,.intro-second{font-size:clamp(24px,2.55vw,42px);letter-spacing:-.055em;line-height:1.16;font-weight:500;color:#7227dc}
.intro h1{margin:0;max-width:100%}
.intro-second{opacity:0;visibility:hidden}
.opening-logo{position:absolute;left:26px;bottom:25px;width:125px;transform-origin:left bottom;will-change:transform}
.opening-logo img{width:100%;height:auto;display:block}
.intro-scroll{position:absolute;right:23px;bottom:23px;padding:0;background:transparent;display:flex;align-items:center;gap:18px;color:#7227dc}
.intro-scroll span{font-size:7px;letter-spacing:.11em;max-width:90px;text-align:left;line-height:1.7}
.intro-scroll svg{width:30px;height:38px;fill:none;stroke:currentColor;stroke-width:2}
.intro-scroll:hover svg{translate:0 4px}
.mosaic{transform:none;opacity:1;pointer-events:auto;will-change:auto}
.mosaic>.tile{will-change:transform;transform-origin:center;visibility:hidden;pointer-events:none}
.mosaic>.tile.is-visible{visibility:visible;pointer-events:auto}
.tile-logo{padding:12%;background:#fff;border:1px solid #d9c9e840}
.tile-logo img{width:100%;height:auto;display:block}
.mosaic-foot{opacity:0}
@media(max-width:760px){
  .site-header{height:65px;padding:13px 18px}.header-right{gap:18px}.header-cta{font-size:9px}.nav-panel{position:fixed;top:65px}
  .story{height:340svh}.story-sticky{position:sticky;height:100svh;min-height:0}
  .intro{position:absolute;inset:auto;left:50%;top:50%;width:calc(100vw - 32px);height:min(125vw,75svh);min-height:0;padding:0}
  .intro-copy{top:24px;left:23px;right:23px}.intro-first .eyebrow{font-size:7px;margin-bottom:18px}
  .intro h1,.intro-second{font-size:clamp(23px,6.7vw,40px);line-height:1.18}
  .opening-logo{left:23px;bottom:25px;width:110px}.intro-scroll{right:21px;bottom:24px;gap:10px}.intro-scroll span{font-size:6px;max-width:65px}.intro-scroll svg{width:25px}
  .mosaic{position:absolute;inset:8px 8px 26px;margin:0;height:auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:8px;transform:none!important}
  .mosaic>.tile{padding:13px;border-radius:2px;grid-area:auto!important;min-height:0}
  .mosaic>.tile-agency{grid-area:1/1/2/2!important}.mosaic>.tile-branding{grid-area:1/2/2/3!important}
  .mosaic>.tile-web{grid-area:2/1/3/2!important}.mosaic>.tile-marketing{grid-area:2/2/3/3!important}
  .mosaic>.tile-approach{grid-area:3/1/4/2!important}.mosaic>.tile-contact{grid-area:3/2/4/3!important}
  .mosaic>.tile-projects{grid-area:4/1/5/2!important}.mosaic>.tile-production{grid-area:4/2/5/3!important}
  .mosaic>.tile-logo{display:grid;position:absolute;left:calc(50% - 25px);top:calc(50% - 25px);width:50px;height:50px;padding:6px;z-index:6;border:4px solid var(--paper)}
  .mosaic .tile-label,.mosaic .tile-contact .tile-label,.mosaic .tile-projects .tile-label,.mosaic .tile-production .tile-label{font-size:17px;top:13px;left:13px;right:13px;max-width:none}
  .mosaic .tile-index{font-size:5px;left:13px;bottom:9px;letter-spacing:0}
  .mosaic .agency-art{height:59%;width:70%;left:20%;bottom:8%}.mosaic .brand-art{height:46%;bottom:15%;left:10%;right:8%}.mosaic .brand-a{font-size:60px}.mosaic .brand-star{font-size:56px}
  .mosaic .browser-art{height:54%;width:67%;bottom:8%;left:31%}.mosaic .browser-bar{height:15px}.mosaic .browser-content{padding:8px}.mosaic .browser-heading{font-size:26px}.mosaic .browser-lines{margin-top:6px;gap:3px}.mosaic .browser-mini{display:none}.mosaic .web-cursor{width:22px;bottom:-10px}
  .mosaic .marketing-art{height:42%;bottom:14%;width:65%;left:18%}.mosaic .chart-arrow{font-size:50px}
  .mosaic .approach-art{width:86px;height:86px;scale:1;left:50%;top:52%;transform-origin:center}.mosaic .approach-art>span{width:36px;height:36px}.mosaic .approach-art b{font-size:20px}.mosaic .contact-art{font-size:105px;right:15%;bottom:13%}
  .mosaic .project-art{width:70%;height:57%;right:-2%;bottom:-5%}.mosaic .project-sticker{width:38px;height:38px;font-size:5px}.mosaic .production-art{inset:35% 0 0}
  .mosaic-foot{display:flex;left:10px;right:10px;bottom:9px;font-size:5px;letter-spacing:.04em}
}
@media(max-height:600px) and (max-width:760px){.mosaic .tile-label,.mosaic .tile-contact .tile-label,.mosaic .tile-projects .tile-label,.mosaic .tile-production .tile-label{font-size:14px}.mosaic .tile-index{display:none}.mosaic .tile-art{opacity:.6}}
@media(prefers-reduced-motion:reduce){
  .story{height:auto}.story-sticky{position:relative;height:auto;overflow:hidden}
  .intro{position:relative;left:auto;top:auto;transform:none;margin:90px auto 45px;width:min(88vw,650px);height:70svh;min-height:400px}
  .intro-second{display:none}.intro-first{opacity:1!important;visibility:visible!important}
  .mosaic{position:relative;inset:auto;margin:12px;height:88svh;min-height:580px}
  .mosaic>.tile{visibility:visible;transform:none!important;pointer-events:auto}.mosaic>.tile-logo{visibility:visible}
  .mosaic-foot{display:none}
  @media(max-width:760px){.mosaic{height:1050px;min-height:0}.intro{min-height:400px;height:65svh}}
}