/* Sharp diagonals, oversized type, decisive landings. */
body{max-width:none;overflow-x:clip}header{position:relative;z-index:5}
.hero-stage{position:relative}
.hero-orbit,.section-geometry,.section-stroke,.principle-echo,.principles-meter,.motion-ticker{display:none;pointer-events:none}
.heading-line,.heading-text,.kanji-face,.service-reel,.service-reel>span{display:block}
.service-reel>span[aria-hidden]{display:none}
.motion-toggle{position:fixed;z-index:20;right:20px;bottom:18px;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:11px 16px;font:700 12px "Zen Kaku Gothic New",sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.motion-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* Aligned for two seconds, then automatically choreographed. */
.motion-on .hero{height:auto;min-height:0;padding:0;overflow:clip}
.motion-on .hero-stage{width:100%;height:auto;min-height:max(790px,calc(100svh - 100px));padding:4vh 4vw 130px;overflow:clip;isolation:isolate}
.motion-on .hero h1{font-size:clamp(64px,9.8vw,156px);line-height:1.21;letter-spacing:-.04em;margin:0 0 24px}
.motion-on #hero-title .title-mask{overflow:visible;margin:0;padding:0;position:relative}
.motion-on #hero-title .title-line{width:max-content;transform-origin:left center;--shift-a:19vw;--shift-b:5vw;--shift-c:26vw;--line-turn:-4deg;animation:hero-line 10.8s cubic-bezier(.76,0,.2,1) infinite;will-change:transform}
.motion-on #hero-title .title-mask:nth-child(2) .title-line{--shift-a:29vw;--shift-b:17vw;--shift-c:3vw;--line-turn:4deg}
.motion-on #hero-title .title-mask:nth-child(3) .title-line{--shift-a:8vw;--shift-b:26vw;--shift-c:18vw;--line-turn:-3deg}
.motion-on .hero-glyph{display:inline-block;animation:glyph-kick 10.8s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--glyph-index)*30ms)}
.motion-on .hero-diamond{left:67%;top:41%;width:78vmin;height:78vmin;animation:hero-diamond 10.8s cubic-bezier(.76,0,.2,1) infinite;transform:translate(-50%,-50%)}
.motion-on .hero-orbit{display:block;position:absolute;width:51vmin;height:51vmin;left:8%;top:22%;border:2px solid var(--ink);opacity:.3;transform:rotate(45deg);animation:hero-orbit 10.8s cubic-bezier(.76,0,.2,1) infinite;z-index:0}
.motion-on .hero-name,.motion-on .hero-copy{position:relative;margin-left:49%;max-width:49%;font-size:16px}
.motion-on .hero-name{font-size:12px;margin-top:30px;margin-bottom:14px}
.motion-on .hero-copy:last-child{display:none}
.motion-on .hero-mark{left:7%;right:auto;bottom:92px;animation:mark-snap 6s cubic-bezier(.65,0,.2,1) infinite}
.motion-on .hero-bottom{bottom:24px}
.motion-on .scroll span{animation:scroll-nudge 2s cubic-bezier(.5,0,.2,1) infinite}
.motion-on .hero:not(.in-view) .title-line,.motion-on .hero:not(.in-view) .hero-glyph,.motion-on .hero:not(.in-view) .hero-diamond,.motion-on .hero:not(.in-view) .hero-orbit,.motion-on .hero:not(.in-view) .hero-mark{animation-play-state:paused}

/* A diagonal cut followed by staggered headings. */
.motion-on .section,.motion-on .contact-section{position:relative;isolation:isolate;overflow:clip}
.motion-on .section{grid-template-columns:18% 82%;padding:125px 4%}
.motion-on .section>div:not(.section-geometry):not(.section-stroke),.motion-on .contact-section>h2,.motion-on .contact-section>div:not(.section-geometry):not(.section-stroke){position:relative;z-index:1}
.motion-on .section h2{font-size:clamp(36px,5.6vw,90px);line-height:1.42;transform:translateX(var(--heading-drift,0px));will-change:transform}
.motion-on .heading-line{overflow:hidden;padding:.06em 0 .12em;margin:-.06em 0 -.12em}
.motion-on .heading-text{transform:translate3d(-12vw,115%,0) rotate(6deg);transform-origin:left bottom;transition:transform 1.05s cubic-bezier(.16,1,.25,1);transition-delay:calc(.18s + var(--line-index)*.12s)}
.motion-on .has-entered .heading-text{transform:none}
.motion-on .section-stroke{display:block;position:absolute!important;left:0;top:-25%;width:36vw;height:150%;background:var(--yellow);z-index:3;transform:translateX(-180%) skewX(-20deg)}
.motion-on .has-entered>.section-stroke{animation:section-cross 1s cubic-bezier(.7,0,.25,1) both}
.motion-on .section-geometry{display:block;position:absolute!important;right:-10vw;top:10%;width:38vw;height:38vw;max-width:650px;max-height:650px;border:2px solid currentColor;opacity:.09;z-index:0;transform:rotate(45deg);animation:geometry-turn 13s cubic-bezier(.7,0,.3,1) infinite}
.motion-on .section:not(.in-view)>.section-geometry{animation-play-state:paused}
.motion-on .section-label{font-size:13px;gap:15px}
.motion-on .section-label::after{content:"";width:30px;height:30px;display:block;background:var(--yellow);margin:25px 0;transform:rotate(45deg);animation:mark-snap 6s cubic-bezier(.65,0,.2,1) infinite}
.motion-on .philosophy{background:#fff}
.motion-on .manifesto h2{font-size:clamp(46px,8.1vw,128px);line-height:1.4}
.motion-on .manifesto .heading-line:nth-child(2){margin-left:12%}
.motion-on .manifesto .heading-line:nth-child(3){margin-left:4%}
.motion-on .manifesto-copy{margin:50px 0 0 32%;font-size:17px}
.motion-on .reveal-item{opacity:0;transform:translate3d(var(--entry-x,0px),95px,0) rotate(var(--entry-rotation,3deg));transition:opacity .6s ease var(--delay,0ms),transform 1s cubic-bezier(.16,1,.25,1) var(--delay,0ms);transform-origin:left top}
.motion-on .reveal-item.revealed{opacity:1;transform:none}

/* Full-screen posters with opposing diagonal masks. */
.motion-on .principles-pin{height:340svh;position:relative}
.motion-on .principles-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:clip;background:var(--yellow);isolation:isolate}
.motion-on .principles{display:block;position:relative;width:100%;height:100%;margin:0;padding:0;background:transparent}
.motion-on .principles article{position:absolute;inset:0;width:100%;height:100%;border:0;padding:6vh 6vw 8vh;display:grid;grid-template-columns:53% 47%;grid-template-rows:40px 1fr auto;align-items:center;overflow:clip;background:var(--yellow);isolation:isolate}
.motion-on .principles article:nth-child(2){background:var(--ink);color:var(--yellow);clip-path:polygon(112% 0,100% 0,100% 100%,100% 100%);z-index:2}
.motion-on .principles article:nth-child(3){background:white;color:var(--ink);clip-path:polygon(0 112%,100% 100%,100% 100%,0 100%);z-index:3}
.motion-on .principle-top{grid-column:1/-1;font-size:18px;align-self:start;z-index:1}
.motion-on .kanji{grid-column:1;grid-row:2/4;font-size:min(48vw,68svh);line-height:1.1;padding:0;margin:0;transform:scale(var(--arrival-scale,1)) rotate(var(--arrival-turn,0deg));transform-origin:center;z-index:1}
.motion-on .kanji-face{animation:kanji-thrust 5.6s cubic-bezier(.76,0,.24,1) infinite;transform-origin:50% 60%;will-change:transform}
.motion-on .principles article:not(.panel-active) .kanji-face,.motion-on .principles-pin:not(.in-view) .kanji-face{animation-play-state:paused}
.motion-on .principle-echo{display:block;position:absolute;left:-8%;top:-8%;font-size:min(71vw,110svh);font-weight:700;line-height:1.1;color:transparent;--echo-color:#231815;-webkit-text-stroke:1.5px var(--echo-color);opacity:.14;transform:translateX(var(--echo-x,0px)) rotate(-12deg);z-index:0}
.motion-on .principles article:nth-child(2) .principle-echo{--echo-color:#fff100}
.motion-on .principles h3{grid-column:2;grid-row:2;align-self:end;font-size:clamp(28px,3.8vw,68px);line-height:1.45;margin:0 0 32px;z-index:1;transform:translateX(var(--copy-x,0px));opacity:var(--copy-opacity,1)}
.motion-on .principles p{grid-column:2;grid-row:3;align-self:start;font-size:clamp(16px,1.4vw,23px);line-height:2;margin:0 0 8vh;z-index:1;transform:translateX(var(--copy-x,0px));opacity:var(--copy-opacity,1)}
.motion-on .principles-meter{display:flex;gap:8px;position:absolute;right:6vw;bottom:4vh;z-index:4}
.motion-on .principles-meter i{display:block;width:30px;height:4px;background:var(--meter-color,var(--ink));opacity:.22;transition:width .4s,opacity .4s}
.motion-on .principles-meter i.active{width:74px;opacity:1}

/* Automatic service reels and intersecting moving bands. */
.motion-on .service{position:relative;isolation:isolate;overflow:clip;padding:36px 16px 36px 0;gap:28px;transition:opacity .6s,transform 1s cubic-bezier(.16,1,.25,1),padding .35s}
.motion-on .service::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);transform:translateX(-110%) skewX(-15deg);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.motion-on .service>span{font-size:16px;min-width:30px;color:var(--ink)}
.motion-on .service h3{font-size:clamp(29px,3.6vw,60px);line-height:1.25;height:1.25em;overflow:hidden;margin-bottom:18px}
.motion-on .service p{font-size:16px}
.motion-on .service-reel>span[aria-hidden]{display:block}
.motion-on .service-reel{animation:service-roll 7.6s cubic-bezier(.76,0,.2,1) infinite;animation-delay:calc(var(--row-index)*.7s)}
.motion-on .expertise:not(.in-view) .service-reel{animation-play-state:paused}
.motion-on .service.revealed::after{content:"";position:absolute;left:0;top:0;height:3px;width:20%;background:var(--ink);animation:rule-run 6s cubic-bezier(.65,0,.2,1) infinite;animation-delay:calc(var(--row-index)*.8s)}
.motion-on .motion-ticker{display:block;overflow:clip;background:var(--yellow);padding:48px 0 50px}
.motion-on .ticker-row{transform:rotate(-3deg) scale(1.06);padding:12px 0}
.motion-on .ticker-row:nth-child(2){background:var(--ink);color:var(--yellow);transform:rotate(3deg) scale(1.06);margin-top:15px}
.motion-on .ticker-rail{display:flex;width:max-content;animation:ticker-travel 18s linear infinite;will-change:transform}
.motion-on .ticker-row:nth-child(2) .ticker-rail{animation-direction:reverse;animation-duration:14s}
.motion-on .ticker-rail span{display:block;padding-right:.55em;white-space:nowrap;font-size:clamp(46px,7.5vw,125px);font-weight:700;line-height:1.25;letter-spacing:-.04em}
.motion-on .ticker-row:nth-child(2) span{font-family:Arial,sans-serif;font-weight:700;letter-spacing:-.055em}
.motion-on .motion-ticker:not(.in-view) .ticker-rail{animation-play-state:paused}

/* Moving geometry sits behind a steady reading layer. */
.motion-on .experience{border:0}
.motion-on .experience .section-geometry{border-color:var(--yellow);opacity:.22;top:25%;width:54vw;height:54vw}
.motion-on .clients{gap:0 35px}
.motion-on .clients>span{position:relative;overflow:clip;font-size:clamp(16px,1.45vw,24px);padding:28px 0}
.motion-on .clients>span::after{content:"";position:absolute;left:0;bottom:0;width:28%;height:2px;background:var(--yellow);transform:translateX(-110%);animation:rule-run 8s cubic-bezier(.65,0,.2,1) infinite;animation-delay:calc(var(--row-index)*.28s)}
.motion-on .experience:not(.in-view) .clients>span::after{animation-play-state:paused}
.motion-on .awards{margin-top:80px}
.motion-on .awards p{font-size:14px}
.motion-on .about .section-geometry{width:48vw;height:48vw;right:5%;top:20%;border-width:3px;opacity:.15;animation-direction:reverse}
.motion-on .about-expansion{font-size:clamp(30px,4.5vw,72px);line-height:1.35}
.motion-on .about-expansion strong{position:relative;isolation:isolate;text-decoration:none}
.motion-on .about-expansion strong::before{content:"";position:absolute;left:-.025em;right:-.025em;bottom:.03em;height:14%;background:var(--yellow);z-index:-1;animation:highlight-rise 7s cubic-bezier(.65,0,.2,1) infinite}
.motion-on .about:not(.in-view) .about-expansion strong::before{animation-play-state:paused}
.motion-on .contact-section{padding:85px 4% 95px}
.motion-on .contact-section>.section-stroke{background:white}
.motion-on .contact-section>.section-geometry{width:62vw;height:62vw;right:-15%;top:5%;border:3px solid white;opacity:1;animation-duration:11s}
.motion-on .contact-section h2{font-size:clamp(36px,7.1vw,112px);line-height:1.4;letter-spacing:-.05em}
.motion-on .contact-body{margin-top:48px;margin-left:38%}
.motion-on .contact-mail{font-size:clamp(20px,2.65vw,42px);font-weight:700;position:relative}
.motion-on .contact-mail span:last-child{font-size:1.35em;animation:contact-arrow 3.4s cubic-bezier(.65,0,.2,1) infinite}
.motion-on footer{overflow:clip;padding-top:20px;padding-bottom:80px}
.motion-on .footer-brand{width:90%;max-width:1500px;margin:55px auto 80px;transform:scale(var(--logo-scale,.5)) rotate(var(--logo-turn,-9deg));transform-origin:50% 70%;will-change:transform}
.motion-on .footer-brand img{animation:logo-flex 7s cubic-bezier(.65,0,.2,1) infinite;will-change:transform}
.motion-on footer:not(.in-view) .footer-brand img{animation-play-state:paused}
.motion-on.tab-hidden *,.motion-on.tab-hidden *::before,.motion-on.tab-hidden *::after{animation-play-state:paused!important}
@media(hover:hover){.motion-on nav a{transition:transform .3s,border-color .3s}.motion-on nav a:hover{transform:translateY(-4px)}.motion-on .service:hover{padding-left:22px}.motion-on .service:hover::before{transform:translateX(0) skewX(0)}.motion-on .clients>span:hover{color:var(--yellow)}.motion-on .contact-mail:hover span:last-child{animation:none;transform:translate(8px,-8px) rotate(8deg)}}

@keyframes hero-line{0%,18.52%,93%,100%{transform:translate3d(0,0,0) rotate(0) skewX(0) scale(1)}26%,38%{transform:translate3d(var(--shift-a),0,0) rotate(var(--line-turn)) skewX(-7deg) scale(1.025)}48%,59%{transform:translate3d(var(--shift-b),0,0) rotate(0) skewX(6deg) scale(.96)}69%,77%{transform:translate3d(var(--shift-c),0,0) rotate(var(--line-turn)) skewX(-4deg) scale(1.015)}}
@keyframes glyph-kick{0%,19%,32%,60%,76%,100%{transform:translateY(0)}24%,66%{transform:translateY(-.12em)}}
@keyframes hero-diamond{0%,18.52%,93%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)}26%,38%{transform:translate(-76%,-45%) rotate(135deg) scale(1.85)}48%,59%{transform:translate(-25%,-45%) rotate(225deg) scale(1.15)}69%,77%{transform:translate(-70%,-48%) rotate(315deg) scale(1.7)}}
@keyframes hero-orbit{0%,18.52%,93%,100%{transform:translateX(0) rotate(45deg) scale(1)}26%,38%{transform:translateX(42vw) rotate(180deg) scale(1.6)}48%,59%{transform:translateX(23vw) rotate(270deg) scale(.7)}69%,77%{transform:translateX(12vw) rotate(360deg) scale(1.4)}}
@keyframes mark-snap{0%,24%,55%,100%{transform:rotate(0) scale(1)}35%,42%{transform:rotate(180deg) scale(1.35)}70%,78%{transform:rotate(360deg) scale(.9)}}
@keyframes scroll-nudge{0%,35%,100%{transform:translateY(0)}60%{transform:translateY(8px)}}
@keyframes section-cross{0%{opacity:1;transform:translateX(-180%) skewX(-20deg)}99%{opacity:1}100%{opacity:0;transform:translateX(390%) skewX(-20deg)}}
@keyframes geometry-turn{0%,15%,100%{transform:rotate(45deg) scale(1)}40%,52%{transform:rotate(135deg) scale(1.3)}72%,82%{transform:rotate(225deg) scale(.85)}}
@keyframes kanji-thrust{0%,15%,100%{transform:rotate(-5deg) scale(1)}31%,43%{transform:translateY(-2vh) rotate(7deg) scale(1.1)}62%,75%{transform:rotate(-9deg) scale(.96)}}
@keyframes ticker-travel{to{transform:translateX(-25%)}}
@keyframes service-roll{0%,61%,100%{transform:translateY(0)}74%,88%{transform:translateY(-50%)}}
@keyframes rule-run{0%,12%{transform:translateX(-110%)}65%,100%{transform:translateX(550%)}}
@keyframes highlight-rise{0%,20%,100%{height:14%}43%,65%{height:86%}}
@keyframes contact-arrow{0%,22%,100%{transform:translate(0,0)}44%,60%{transform:translate(7px,-7px)}}
@keyframes logo-flex{0%,20%,100%{transform:scaleX(1) rotate(0)}43%,58%{transform:scaleX(1.04) rotate(-2deg)}76%{transform:scaleX(.96) rotate(1deg)}}

@media(max-width:1000px){.motion-on .section{grid-template-columns:1fr;padding:90px 5%;gap:35px}.motion-on .section-label{flex-direction:row;justify-content:space-between;align-items:center}.motion-on .section-label::after{display:none}.motion-on .manifesto-copy{margin-left:24%}.motion-on .section h2{font-size:clamp(36px,6.3vw,66px)}.motion-on .manifesto h2{font-size:clamp(46px,9.5vw,100px)}.motion-on .hero-stage{height:auto;min-height:max(730px,calc(100svh - 100px));padding-top:6vh}.motion-on .service h3{font-size:clamp(28px,4.4vw,44px)}.motion-on .contact-body{margin-left:25%}}
@media(max-width:600px){
  .motion-toggle{right:12px;bottom:12px;padding:9px 12px;box-shadow:2px 2px 0 var(--ink)}
  .motion-on .hero-stage{height:auto;min-height:max(700px,calc(100svh - 90px));padding:55px 6% 145px}
  .motion-on .hero h1{font-size:12vw;line-height:1.35;letter-spacing:-.045em;margin-bottom:32px}
  .motion-on #hero-title .title-line{--shift-a:10vw;--shift-b:2vw;--shift-c:14vw;--line-turn:-3deg}
  .motion-on #hero-title .title-mask:nth-child(2) .title-line{--shift-a:16vw;--shift-b:8vw;--shift-c:2vw;--line-turn:3deg}
  .motion-on #hero-title .title-mask:nth-child(3) .title-line{--shift-a:3vw;--shift-b:14vw;--shift-c:10vw;--line-turn:-2deg}
  .motion-on .hero-diamond{width:105vw;height:105vw;top:37%;left:65%}
  .motion-on .hero-orbit{width:64vw;height:64vw;left:-18%;top:18%}
  .motion-on .hero-name,.motion-on .hero-copy{margin-left:6%;max-width:94%}
  .motion-on .hero-name{font-size:12px;margin-top:30px;margin-bottom:18px}
  .motion-on .hero-copy{font-size:16px;line-height:2}
  .motion-on .hero-mark{width:38px;height:auto;left:auto;right:8%;bottom:100px}
  .motion-on .hero-bottom{left:6%;right:6%;bottom:26px}
  .motion-on .section{padding:75px 6%;gap:32px}
  .motion-on .section h2{font-size:8.3vw;line-height:1.5;transform:translateX(calc(var(--heading-drift,0px)*.3))}
  .motion-on .manifesto h2{font-size:11.8vw}
  .motion-on .manifesto .heading-line:nth-child(2){margin-left:7%}
  .motion-on .manifesto .heading-line:nth-child(3){margin-left:2%}
  .motion-on .manifesto-copy{margin:32px 0 0;font-size:16px}
  .motion-on .section-geometry{width:85vw;height:85vw;right:-35%;top:30%}
  .motion-on .section-stroke{width:50vw}
  .motion-on .principles-pin{height:315svh}
  .motion-on .principles-stage{height:100svh;min-height:600px}
  .motion-on .principles article{padding:5vh 7vw 65px;grid-template-columns:1fr;grid-template-rows:30px 1fr auto auto}
  .motion-on .principle-top{font-size:16px}
  .motion-on .kanji{grid-column:1;grid-row:2;justify-self:center;font-size:min(69vw,43svh)}
  .motion-on .principle-echo{font-size:min(120vw,76svh);top:4%;left:-18%}
  .motion-on .principles h3{grid-column:1;grid-row:3;font-size:clamp(27px,7.7vw,44px);margin:12px 0 18px}
  .motion-on .principles p{grid-column:1;grid-row:4;font-size:16px;margin:0;line-height:1.85}
  .motion-on .principles-meter{right:7vw;bottom:27px}
  .motion-on .principles-meter i{width:20px;height:3px}.motion-on .principles-meter i.active{width:48px}
  .motion-on .service{gap:14px;padding:30px 4px 30px 0}.motion-on .service>span{min-width:20px;font-size:13px}
  .motion-on .service h3{font-size:5.9vw;letter-spacing:-.04em;margin-bottom:17px}.motion-on .service p{font-size:14px}
  .motion-on .motion-ticker{padding:32px 0 35px}.motion-on .ticker-rail span{font-size:13vw}.motion-on .ticker-rail{animation-duration:15s}.motion-on .ticker-row:nth-child(2) .ticker-rail{animation-duration:11s}
  .motion-on .experience h2{font-size:6.8vw}.motion-on .clients{gap:0 18px}.motion-on .clients>span{font-size:14px;padding:23px 0}
  .motion-on .experience .section-geometry{width:120vw;height:120vw;right:-55%}.motion-on .awards{margin-top:55px}.motion-on .awards p{font-size:13px;line-height:2.2}
  .motion-on .about-expansion{font-size:7.5vw}.motion-on .about .section-geometry{width:88vw;height:88vw;right:-38%;top:25%}
  .motion-on .contact-section{padding:65px 6% 70px}.motion-on .contact-section h2{font-size:7.7vw;line-height:1.5}.motion-on .contact-top{font-size:12px;margin-bottom:40px}
  .motion-on .contact-body{margin:34px 0 0}.motion-on .contact-mail{font-size:5.25vw;gap:15px}.motion-on .contact-section>.section-geometry{width:105vw;height:105vw;right:-50%;top:18%}
  .motion-on .footer-brand{width:94%;margin:40px auto 55px}.motion-on footer{padding:20px 6% 85px}
}
@media(max-height:650px) and (min-width:601px){.motion-on .principles-stage{min-height:420px}.motion-on .principles article{padding-top:4vh;padding-bottom:6vh;grid-template-rows:25px 1fr auto}.motion-on .principles h3{font-size:4vw;margin-bottom:15px}.motion-on .principles p{font-size:16px;margin-bottom:3vh}.motion-on .kanji{font-size:65svh}}

.motion-on .section>div,.motion-on .service>div{min-width:0}
.motion-on .service-reel>span{white-space:nowrap}
html:not(.motion-on){scroll-behavior:auto}
.motion-on .contact-section:not(.in-view) .section-geometry,.motion-on .contact-section:not(.in-view) .contact-mail span:last-child,.motion-on .section:not(.in-view) .section-label::after,.motion-on .expertise:not(.in-view) .service::after{animation-play-state:paused}
@media(max-width:600px){.motion-on .principles-stage{min-height:560px}.motion-on .principles article{grid-template-rows:24px minmax(0,1fr) auto auto}.motion-on .kanji{font-size:min(69vw,33svh)}}