/* Personica — https://personica.co.jp/
   One page, two layouts: the PC layout from 768px, the phone layout below it. */
:root{color-scheme:dark}
html,body{background:#0C0D0F;color:#ECEAE4}
body{margin:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
[hidden]{display:none!important}
img{max-width:100%}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
@media (max-width: 767px){.v-pc{display:none}}
@media (min-width: 768px){.v-sp{display:none!important}}
.v-sp .mv-sp{width:auto!important}
.mm{position:fixed;inset:0;z-index:60;overflow-y:auto;background:#0C0D0F}
.mm>div{width:auto!important;min-height:100%;height:auto!important}
.pc-burger{display:none}
@media (max-width: 819px){.pc-hdr nav{display:none!important}.pc-burger{display:inline-flex!important}}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #D2F34C;outline-offset:3px}
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.js-contact button[disabled]{opacity:.72;cursor:progress}
.pv-pre{opacity:0;transform:translate3d(0,64px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.pv-pre.pv-in{opacity:1;transform:none}

body{margin:0;background:#0C0D0F}
a{color:inherit;text-decoration:none}
a:hover{color:inherit;opacity:.75}
button,input,textarea{font:inherit}
.pb-spin{transform-origin:500px 500px;animation:pb-spin 200s linear infinite}
@keyframes pb-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.pb-cell{transition:background-color .35s ease}
.pb-cell:hover{background-color:#14161A}
.pb-case .pb-art{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pb-case:hover .pb-art{transform:scale(1.05)}
.pb-field{transition:border-color .25s ease}
.pb-field::placeholder{color:#8A887F}
.pb-field:focus{outline:none;border-bottom-color:#ECEAE4}
.pb-chip:focus-within{border-color:#ECEAE4}
.pb-policy summary{list-style:none}
.pb-policy summary::-webkit-details-marker{display:none}
.pb-policy[open] .pb-plus{transform:rotate(45deg)}
.pb-plus{transition:transform .3s ease;display:inline-block}
body{word-break:auto-phrase;overflow-wrap:break-word}
p,dd,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.pb-wave{animation:pb-wave 22s linear infinite}
@keyframes pb-wave{from{transform:translateX(0)}to{transform:translateX(-439.82px)}}
.pb-hop{animation:pb-hop 10s ease-in-out infinite}
@keyframes pb-hop{0%,18%{transform:translate(0,0)}25%,43%{transform:translate(82px,0)}50%,68%{transform:translate(82px,78px)}75%,93%{transform:translate(-164px,78px)}100%{transform:translate(0,0)}}
.pb-flow{stroke-dasharray:5 7;animation:pb-flow 1.4s linear infinite}
@keyframes pb-flow{to{stroke-dashoffset:-24}}
.pb-blink{animation:pb-blink 3.2s ease-in-out infinite}
.pb-blink2{animation:pb-blink 3.2s ease-in-out 1.6s infinite}
@keyframes pb-blink{0%,100%{opacity:1}50%{opacity:.12}}
@media (max-width: 760px){.pb-vert{display:none}}
@media (max-width: 1100px){.pb-x{display:none}}
.pb-caps>article{display:grid!important;grid-row:span 4;grid-template-rows:subgrid;row-gap:0!important;min-height:0!important}
.pb-caps>article>div:first-child{margin-bottom:56px}
.pb-caps>article>div:last-child{display:grid!important;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.pb-caps>article>div:last-child>p:last-child{margin-top:0!important;align-self:start}
@media (min-width: 960px){.pb-caps{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width: 959px){.pb-caps{grid-template-columns:minmax(0,1fr)!important}}
@media (min-width: 1100px){.pb-proc{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (min-width: 561px) and (max-width: 1099px){.pb-proc{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (prefers-reduced-motion: reduce){.pb-spin,.pb-wave,.pb-hop,.pb-flow,.pb-blink,.pb-blink2{animation:none}.pb-case .pb-art{transition:none}}
/* generative AI section */
.ai-pulse{stroke-dasharray:3 31;animation:ai-pulse 2.4s linear infinite}
@keyframes ai-pulse{to{stroke-dashoffset:-68}}
.ai-blink{animation:pb-blink 2.8s ease-in-out infinite}
.ai-ping{transform-box:fill-box;transform-origin:center;animation:ai-ping 3.2s cubic-bezier(.2,.7,.2,1) infinite}
.ai-ping2{animation-delay:1.6s}
@keyframes ai-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(5);opacity:0}}
.ai-dash{stroke-dasharray:14 30;animation:ai-dash 1.2s linear infinite}
@keyframes ai-dash{to{stroke-dashoffset:-44}}
.ai-wave{animation:ai-wave 2.4s linear infinite}
@keyframes ai-wave{to{transform:translateX(-48px)}}
.ai-track{animation:ai-marquee 56s linear infinite}
@keyframes ai-marquee{to{transform:translateX(-50%)}}
.ai-word{color:transparent;-webkit-text-stroke:1px rgba(236,234,228,.42)}
@media (min-width: 960px){.ai-pillars{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width: 959px){.ai-pillars{grid-template-columns:minmax(0,1fr)!important}.ai-pillars>article+article{margin-top:56px}}
@media (prefers-reduced-motion: reduce){.ai-pulse,.ai-blink,.ai-ping,.ai-dash,.ai-wave,.ai-track{animation:none}}
@keyframes ai-reveal{from{clip-path:circle(0% at 0% 50%)}to{clip-path:circle(150% at 0% 50%)}}
/* header: hides while scrolling down, comes back when scrolling up */
@keyframes mv-hdr-in{from{opacity:0}to{opacity:1}}
.pc-hdr{transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .35s ease,border-color .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease;border-bottom:1px solid transparent}
.pc-hdr>div{transition:padding .35s ease}
.pc-hdr.is-shown,.pc-hdr.is-hidden{background-color:rgba(12,13,15,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(236,234,228,.1)}
.pc-hdr.is-shown>div,.pc-hdr.is-hidden>div{padding-top:12px!important;padding-bottom:12px!important}
.pc-hdr.is-hidden{transform:translate3d(0,-100%,0)}
.pc-hdr:has(:focus-visible){transform:none}
@media (prefers-reduced-motion: reduce){.pc-hdr,.pc-hdr>div{transition:none}}
@media (prefers-reduced-motion: no-preference){.mv-intro>header{animation:mv-hdr-in .8s ease 1.2s backwards}}
/* hero figure: stays behind the hero copy, then travels into the philosophy sheet and fades once the text is in view */
@keyframes mv-orbit-out{to{opacity:0}}
@keyframes mv-orbit-pc{0%{opacity:0;transform:translate(0,0)}13.3%{opacity:0;transform:translate(0,120px)}15.6%{opacity:1;transform:translate(0,140px)}78%{opacity:1;transform:translate(var(--odx),var(--ody)) scale(var(--os))}100%{opacity:0;transform:translate(var(--odx),var(--ody)) scale(var(--os))}}
html{scroll-timeline-name:--pg}
.mv-orbit{display:none}
.mv-orbit>svg{opacity:0;transform-origin:50% 50%}
@media (prefers-reduced-motion: no-preference){@supports (animation-timeline: scroll()){
.mv-pc .mv-orbit{display:block}
.mv-pc #top>svg{animation:none}
.mv-pc #top>svg>g{animation:pb-spin 200s linear infinite,mv-orbit-out linear both;animation-timeline:auto,--pg;animation-range:normal,120px 140px}
.mv-pc .mv-orbit>svg{--odx:calc(max(clamp(20px, 4vw, 56px), calc((100vw - 1440px) / 2 + 56px)) + 140px - 106vw + min(520px, 46vw));--ody:calc(clamp(96px, 12vw, 176px) + 690px);--os:.29;animation:mv-orbit-pc linear both;animation-timeline:--pg;animation-range:0px 900px}
@media (max-width: 1029px){.mv-pc .mv-orbit>svg{--odx:calc(100vw - clamp(20px, 4vw, 56px) - 100px - 106vw + min(520px, 46vw));--ody:calc(clamp(96px, 12vw, 176px) + 500px);--os:.24}}
}}
/* motion: sections slide in on scroll */
@keyframes mv-rise{from{opacity:0;transform:translate3d(0,80px,0)}to{opacity:1;transform:none}}
@keyframes mv-recede{to{opacity:.18;transform:scale(.94)}}
@keyframes mv-slide-l{from{opacity:0;transform:translate3d(-56px,0,0)}to{opacity:1;transform:none}}
@keyframes mv-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mv-in-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
.mv-pc #top{position:sticky!important;top:0;z-index:0}
.mv-pc #top~section{position:relative;z-index:1;background-color:#0C0D0F;box-shadow:0 0 0 100vmax #0C0D0F;clip-path:inset(0 -100vmax)}
.mv-pc #philosophy{max-width:none!important;padding-left:max(clamp(20px, 4vw, 56px), calc((100% - 1440px) / 2 + 56px))!important;padding-right:max(clamp(20px, 4vw, 56px), calc((100% - 1440px) / 2 + 56px))!important;border-top:1px solid rgba(236,234,228,.16);border-radius:32px 32px 0 0;box-shadow:0 -28px 64px rgba(0,0,0,.6)!important;clip-path:none!important}
@supports (animation-timeline: view()){
.mv-pc{timeline-scope:--mv-next}.mv-pc #philosophy{view-timeline-name:--mv-next}.mv-pc #top>*{animation:mv-recede linear both;animation-timeline:--mv-next;animation-range:entry 0% entry 100%}
.mv-pc #philosophy>div:first-child,.mv-pc #philosophy>div:last-child>*,.mv-pc #capabilities>div:first-child>*,.mv-pc #works>div:first-child>*,.mv-pc #service>div>div:first-child>*,.mv-pc #people>div>*:not(.pb-people),.mv-pc .pb-people>article,.mv-pc #company>div>div,.mv-pc #company dl>*,.mv-pc #careers>div>*,.mv-pc #contact>div>*,.mv-pc footer>div>p:first-child{animation:mv-rise cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 60%}
.mv-pc .pb-people>article:nth-of-type(2),.mv-pc #contact>div>*:nth-child(2){animation-range:entry 8% entry 68%}
.mv-pc .pb-people>article:nth-of-type(3){animation-range:entry 16% entry 76%}
.mv-pc .pb-caps>article,.mv-pc #works>div:last-child>article,.mv-pc .pb-svc>article{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:cover 4% cover 16%}
.mv-pc .pb-caps>article:nth-child(2){animation-range:cover 12% cover 24%}
.mv-pc .pb-caps>article:nth-child(3){animation-range:cover 20% cover 32%}
.mv-pc #works>div:last-child>article:nth-child(even),.mv-pc .pb-svc>article:nth-child(2){animation-range:cover 14% cover 26%}
.mv-pc #philosophy>div:last-child>p{animation-range:entry 30% cover 24%}
.mv-pc #philosophy>div:last-child>div{position:relative;border-top-color:transparent!important;animation:none;view-timeline-name:--pr}
.mv-pc #philosophy>div:last-child>div::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(236,234,228,.16);transform-origin:left center;animation:mv-draw cubic-bezier(.4,0,.2,1) both;animation-timeline:--pr;animation-range:cover 6% cover 26%}
.mv-pc #philosophy>div:last-child>div>p:first-child{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:--pr;animation-range:cover 10% cover 26%}
.mv-pc #philosophy>div:last-child>div>p:nth-child(2),.mv-pc #philosophy>div:last-child>div>div>p:first-child{animation:mv-in-up cubic-bezier(.2,.7,.2,1) both;animation-timeline:--pr;animation-range:cover 15% cover 31%}
.mv-pc #philosophy>div:last-child>div>div>p:nth-child(2){animation:mv-in-up cubic-bezier(.2,.7,.2,1) both;animation-timeline:--pr;animation-range:cover 20% cover 36%}
.mv-pc .ai-head>*,.mv-pc .ai-band,.mv-pc .ai-foot>*{animation:mv-rise cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 60%}
.mv-pc .ai-foot>*:nth-child(2){animation-range:entry 8% entry 68%}
.mv-pc .ai-fan{animation:ai-reveal cubic-bezier(.45,0,.2,1) both;animation-timeline:view();animation-range:cover 28% cover 56%}
.mv-pc .ai-pillars>article{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:cover 4% cover 16%}
.mv-pc .ai-pillars>article:nth-child(2){animation-range:cover 12% cover 24%}
.mv-pc .ai-pillars>article:nth-child(3){animation-range:cover 20% cover 32%}
.mv-pc .pb-proc>div{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:cover 6% cover 20%}
.mv-pc .pb-proc>div>div:first-child>span:last-child{transform-origin:left center;animation:mv-draw cubic-bezier(.4,0,.2,1) both;animation-timeline:view();animation-range:cover 10% cover 26%}
.mv-pc .pb-proc>div:nth-child(2){animation-range:cover 16% cover 30%}.mv-pc .pb-proc>div:nth-child(2)>div:first-child>span:last-child{animation-range:cover 20% cover 36%}
.mv-pc .pb-proc>div:nth-child(3){animation-range:cover 26% cover 40%}.mv-pc .pb-proc>div:nth-child(3)>div:first-child>span:last-child{animation-range:cover 30% cover 46%}
.mv-pc .pb-proc>div:nth-child(4){animation-range:cover 36% cover 50%}.mv-pc .pb-proc>div:nth-child(4)>div:first-child>span:last-child{animation-range:cover 40% cover 56%}
}
}
/* opening: a point spreads into the first screen */
@keyframes mv-intro-clip{from{clip-path:circle(0px at var(--ix) var(--iy))}to{clip-path:circle(150vmax at var(--ix) var(--iy))}}
@keyframes mv-intro-dot{0%{transform:scale(0);opacity:1}35%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes mv-intro-ring{0%{width:0;height:0;opacity:1}65%{opacity:.85}100%{width:300vmax;height:300vmax;opacity:0}}
@keyframes mv-intro-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
.mv-intro{--ix:calc(106% - min(520px, 46vw));--iy:460px;position:relative}
.mv-intro>#top{animation:mv-intro-clip 1.4s cubic-bezier(.7,0,.2,1) .45s backwards}
.mv-intro::before,.mv-intro::after{content:"";position:absolute;left:var(--ix);top:var(--iy);z-index:3;pointer-events:none;border-radius:50%;opacity:0}
.mv-intro::before{width:12px;height:12px;margin:-6px 0 0 -6px;background:#D2F34C;animation:mv-intro-dot 1s cubic-bezier(.2,.7,.2,1) both}
.mv-intro::after{width:0;height:0;border:1.5px solid #D2F34C;translate:-50% -50%;animation:mv-intro-ring 1.4s cubic-bezier(.7,0,.2,1) .45s both}
.mv-intro #top>div:last-of-type>*{animation:mv-intro-rise .9s cubic-bezier(.2,.7,.2,1) both}
.mv-intro #top>div:last-of-type>*:nth-child(1){animation-delay:1.15s}.mv-intro #top>div:last-of-type>*:nth-child(2){animation-delay:1.3s}.mv-intro #top>div:last-of-type>*:nth-child(3){animation-delay:1.45s}
}

body{margin:0;background:#0C0D0F}
a{color:inherit;text-decoration:none}
a:hover{color:inherit;opacity:.75}
button,input,textarea{font:inherit}
.pb-spin{transform-origin:500px 500px;animation:pb-spin 200s linear infinite}
@keyframes pb-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.pb-cell{transition:background-color .35s ease}
.pb-cell:hover{background-color:#14161A}
.pb-case .pb-art{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pb-case:hover .pb-art{transform:scale(1.05)}
.pb-field{transition:border-color .25s ease}
.pb-field::placeholder{color:#8A887F}
.pb-field:focus{outline:none;border-bottom-color:#ECEAE4}
.pb-chip:focus-within{border-color:#ECEAE4}
.pb-policy summary{list-style:none}
.pb-policy summary::-webkit-details-marker{display:none}
.pb-policy[open] .pb-plus{transform:rotate(45deg)}
.pb-plus{transition:transform .3s ease;display:inline-block}
body{word-break:auto-phrase;overflow-wrap:break-word}
p,dd,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.pb-wave{animation:pb-wave 22s linear infinite}
@keyframes pb-wave{from{transform:translateX(0)}to{transform:translateX(-439.82px)}}
.pb-hop{animation:pb-hop 10s ease-in-out infinite}
@keyframes pb-hop{0%,18%{transform:translate(0,0)}25%,43%{transform:translate(82px,0)}50%,68%{transform:translate(82px,78px)}75%,93%{transform:translate(-164px,78px)}100%{transform:translate(0,0)}}
.pb-flow{stroke-dasharray:5 7;animation:pb-flow 1.4s linear infinite}
@keyframes pb-flow{to{stroke-dashoffset:-24}}
.pb-blink{animation:pb-blink 3.2s ease-in-out infinite}
.pb-blink2{animation:pb-blink 3.2s ease-in-out 1.6s infinite}
@keyframes pb-blink{0%,100%{opacity:1}50%{opacity:.12}}
@media (min-width: 900px) and (max-width: 1239px){.pb-people{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}.pb-people>article{min-width:0}.pb-people>.pb-x{display:none}}
@media (max-width: 899px){.pb-people{display:grid!important;grid-template-columns:minmax(0,1fr)}}
@media (min-width: 1200px){.pb-chips{display:grid!important;grid-template-columns:repeat(3,max-content)}}
@media (min-width: 601px) and (max-width: 1199px){.pb-chips{display:grid!important;grid-template-columns:repeat(2,max-content)}}
@media (max-width: 760px){.pb-vert{display:none}}
@media (max-width: 1100px){.pb-x{display:none}}
@media (max-width: 1000px){.pb-svc>article+article{margin-top:72px}}
@media (prefers-reduced-motion: reduce){.pb-spin,.pb-wave,.pb-hop,.pb-flow,.pb-blink,.pb-blink2{animation:none}.pb-case .pb-art{transition:none}}
/* motion: sections slide in on scroll */
@keyframes mv-rise{from{opacity:0;transform:translate3d(0,80px,0)}to{opacity:1;transform:none}}
@keyframes mv-recede{to{opacity:.18;transform:scale(.94)}}
@keyframes mv-slide-l{from{opacity:0;transform:translate3d(-56px,0,0)}to{opacity:1;transform:none}}
@keyframes mv-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
.mv-pc #top{position:sticky!important;top:0;z-index:0}
.mv-pc #top~section{position:relative;z-index:1;background-color:#0C0D0F;box-shadow:0 0 0 100vmax #0C0D0F;clip-path:inset(0 -100vmax)}
.mv-pc #philosophy{max-width:none!important;padding-left:max(clamp(20px, 4vw, 56px), calc((100% - 1440px) / 2 + 56px))!important;padding-right:max(clamp(20px, 4vw, 56px), calc((100% - 1440px) / 2 + 56px))!important;border-top:1px solid rgba(236,234,228,.16);border-radius:32px 32px 0 0;box-shadow:0 -28px 64px rgba(0,0,0,.6)!important;clip-path:none!important}
@supports (animation-timeline: view()){
.mv-pc{timeline-scope:--mv-next}.mv-pc #philosophy{view-timeline-name:--mv-next}.mv-pc #top>*{animation:mv-recede linear both;animation-timeline:--mv-next;animation-range:entry 0% entry 100%}
.mv-pc #philosophy>div:first-child,.mv-pc #philosophy>div:last-child>*,.mv-pc #capabilities>div:first-child>*,.mv-pc #works>div:first-child>*,.mv-pc #service>div>div:first-child>*,.mv-pc #people>div>*:not(.pb-people),.mv-pc .pb-people>article,.mv-pc #company>div>div,.mv-pc #company dl>*,.mv-pc #careers>div>*,.mv-pc #contact>div>*,.mv-pc footer>div>p:first-child{animation:mv-rise cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 60%}
.mv-pc .pb-people>article:nth-of-type(2),.mv-pc #contact>div>*:nth-child(2){animation-range:entry 8% entry 68%}
.mv-pc .pb-people>article:nth-of-type(3){animation-range:entry 16% entry 76%}
.mv-pc .pb-caps>article,.mv-pc #works>div:last-child>article,.mv-pc .pb-svc>article{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:cover 4% cover 16%}
.mv-pc .pb-caps>article:nth-child(2){animation-range:cover 12% cover 24%}
.mv-pc .pb-caps>article:nth-child(3){animation-range:cover 20% cover 32%}
.mv-pc #works>div:last-child>article:nth-child(even),.mv-pc .pb-svc>article:nth-child(2){animation-range:cover 14% cover 26%}
.mv-pc .pb-proc>div{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:cover 6% cover 20%}
.mv-pc .pb-proc>div>div:first-child>span:last-child{transform-origin:left center;animation:mv-draw cubic-bezier(.4,0,.2,1) both;animation-timeline:view();animation-range:cover 10% cover 26%}
.mv-pc .pb-proc>div:nth-child(2){animation-range:cover 16% cover 30%}.mv-pc .pb-proc>div:nth-child(2)>div:first-child>span:last-child{animation-range:cover 20% cover 36%}
.mv-pc .pb-proc>div:nth-child(3){animation-range:cover 26% cover 40%}.mv-pc .pb-proc>div:nth-child(3)>div:first-child>span:last-child{animation-range:cover 30% cover 46%}
.mv-pc .pb-proc>div:nth-child(4){animation-range:cover 36% cover 50%}.mv-pc .pb-proc>div:nth-child(4)>div:first-child>span:last-child{animation-range:cover 40% cover 56%}
}
}
/* opening: a point spreads into the first screen */
@keyframes mv-intro-clip{from{clip-path:circle(0px at var(--ix) var(--iy))}to{clip-path:circle(150vmax at var(--ix) var(--iy))}}
@keyframes mv-intro-dot{0%{transform:scale(0);opacity:1}35%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes mv-intro-ring{0%{width:0;height:0;opacity:1}65%{opacity:.85}100%{width:300vmax;height:300vmax;opacity:0}}
@keyframes mv-intro-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
.mv-intro{--ix:calc(106% - min(520px, 46vw));--iy:460px;position:relative}
.mv-intro>#top{animation:mv-intro-clip 1.4s cubic-bezier(.7,0,.2,1) .45s backwards}
.mv-intro::before,.mv-intro::after{content:"";position:absolute;left:var(--ix);top:var(--iy);z-index:3;pointer-events:none;border-radius:50%;opacity:0}
.mv-intro::before{width:12px;height:12px;margin:-6px 0 0 -6px;background:#D2F34C;animation:mv-intro-dot 1s cubic-bezier(.2,.7,.2,1) both}
.mv-intro::after{width:0;height:0;border:1.5px solid #D2F34C;translate:-50% -50%;animation:mv-intro-ring 1.4s cubic-bezier(.7,0,.2,1) .45s both}
.mv-intro #top>div:last-of-type>*{animation:mv-intro-rise .9s cubic-bezier(.2,.7,.2,1) both}
.mv-intro #top>div:last-of-type>*:nth-child(1){animation-delay:1.15s}.mv-intro #top>div:last-of-type>*:nth-child(2){animation-delay:1.3s}.mv-intro #top>div:last-of-type>*:nth-child(3){animation-delay:1.45s}
}

body{margin:0;background:#0C0D0F}
a{color:inherit;text-decoration:none}
a:hover{color:inherit;opacity:.75}
button,input,textarea{font:inherit}
.pm-spin{transform-origin:500px 500px;animation:pm-spin 200s linear infinite}
@keyframes pm-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.pm-field::placeholder{color:#8A887F}
.pm-field:focus{outline:none;border-bottom-color:#ECEAE4}
.pm-chip:focus-within{border-color:#ECEAE4}
.pm-policy summary{list-style:none}
.pm-policy summary::-webkit-details-marker{display:none}
.pm-policy[open] .pm-plus{transform:rotate(45deg)}
.pm-plus{transition:transform .3s ease;display:inline-block}
body{word-break:auto-phrase;overflow-wrap:break-word}
p,dd,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.pb-wave{animation:pb-wave 22s linear infinite}
@keyframes pb-wave{from{transform:translateX(0)}to{transform:translateX(-439.82px)}}
.pb-hop{animation:pb-hop 10s ease-in-out infinite}
@keyframes pb-hop{0%,18%{transform:translate(0,0)}25%,43%{transform:translate(82px,0)}50%,68%{transform:translate(82px,78px)}75%,93%{transform:translate(-164px,78px)}100%{transform:translate(0,0)}}
.pb-flow{stroke-dasharray:5 7;animation:pb-flow 1.4s linear infinite}
@keyframes pb-flow{to{stroke-dashoffset:-24}}
.pb-blink{animation:pb-blink 3.2s ease-in-out infinite}
.pb-blink2{animation:pb-blink 3.2s ease-in-out 1.6s infinite}
@keyframes pb-blink{0%,100%{opacity:1}50%{opacity:.12}}
@media (prefers-reduced-motion: reduce){.pm-spin,.pb-wave,.pb-hop,.pb-flow,.pb-blink,.pb-blink2{animation:none}}
/* generative AI section (phone) */
.am-pulse{stroke-dasharray:3 31;animation:am-pulse 2.4s linear infinite}
@keyframes am-pulse{to{stroke-dashoffset:-68}}
.am-blink{animation:pb-blink 2.8s ease-in-out infinite}
.am-ping{transform-box:fill-box;transform-origin:center;animation:am-ping 3.2s cubic-bezier(.2,.7,.2,1) infinite}
.am-ping2{animation-delay:1.6s}
@keyframes am-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(4);opacity:0}}
.am-dash{stroke-dasharray:14 30;animation:am-dash 1.2s linear infinite}
@keyframes am-dash{to{stroke-dashoffset:-44}}
.am-wave{animation:am-wave 2.4s linear infinite}
@keyframes am-wave{to{transform:translateX(-48px)}}
.am-track{animation:am-marquee 56s linear infinite}
@keyframes am-marquee{to{transform:translateX(-50%)}}
.am-word{color:transparent;-webkit-text-stroke:1px rgba(236,234,228,.42)}
@media (prefers-reduced-motion: reduce){.am-pulse,.am-blink,.am-ping,.am-dash,.am-wave,.am-track{animation:none}}
@keyframes am-reveal{from{clip-path:circle(0px at 26px 50%)}to{clip-path:circle(480px at 26px 50%)}}
/* header: hides while scrolling down, comes back when scrolling up */
@keyframes mv-hdr-in{from{opacity:0}to{opacity:1}}
.sp-hdr{transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .35s ease,border-color .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease,padding .35s ease;border-bottom:1px solid transparent}
.sp-hdr.is-shown,.sp-hdr.is-hidden{background-color:rgba(12,13,15,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(236,234,228,.1)}
.sp-hdr.is-shown,.sp-hdr.is-hidden{padding-top:6px!important;padding-bottom:6px!important}
.sp-hdr.is-hidden{transform:translate3d(0,-100%,0)}
.sp-hdr:has(:focus-visible){transform:none}
@media (prefers-reduced-motion: reduce){.sp-hdr{transition:none}}
@media (prefers-reduced-motion: no-preference){.mv-intro-sp>header{animation:mv-hdr-in .8s ease 1.2s backwards}}
/* hero figure: stays behind the hero copy, then travels into the philosophy sheet and fades once the text is in view */
@keyframes mv-orbit-out{to{opacity:0}}
@keyframes mv-orbit-sp{0%{opacity:0;transform:translate(0,0)}13.5%{opacity:0;transform:translate(0,100px)}16%{opacity:1;transform:translate(0,118px)}78%{opacity:1;transform:translate(var(--odx),var(--ody)) scale(var(--os))}100%{opacity:0;transform:translate(var(--odx),var(--ody)) scale(var(--os))}}
html{scroll-timeline-name:--pg}
.mv-orbit{display:none}
.mv-orbit>svg{opacity:0;transform-origin:50% 50%}
@media (prefers-reduced-motion: no-preference){@supports (animation-timeline: scroll()){
.mv-sp .mv-orbit{display:block}
.mv-sp section[id$="top"]>svg{animation:none}
.mv-sp section[id$="top"]>svg>g{animation:pm-spin 200s linear infinite,mv-orbit-out linear both;animation-timeline:auto,--pg;animation-range:normal,100px 118px}
.mv-sp .mv-orbit>svg{--odx:calc(100vw - 435px);--ody:606px;--os:.17;animation:mv-orbit-sp linear both;animation-timeline:--pg;animation-range:0px 740px}
}}
/* motion: sections slide in on scroll */
@keyframes mv-rise-sp{from{opacity:0;transform:translate3d(0,56px,0)}to{opacity:1;transform:none}}
@keyframes mv-recede{to{opacity:.18;transform:scale(.94)}}
@keyframes mv-slide-l{from{opacity:0;transform:translate3d(-56px,0,0)}to{opacity:1;transform:none}}
@keyframes mv-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mv-in-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
.mv-sp section[id$="top"]{position:sticky!important;top:0;z-index:0}
.mv-sp section[id$="top"]~section{position:relative;z-index:1;background-color:#0C0D0F}
.mv-sp section[id$="philosophy"]{border-top:1px solid rgba(236,234,228,.16);border-radius:24px 24px 0 0;box-shadow:0 -20px 48px rgba(0,0,0,.6)}
@supports (animation-timeline: view()){
.mv-sp{timeline-scope:--mv-next}.mv-sp section[id$="philosophy"]{view-timeline-name:--mv-next}.mv-sp section[id$="top"]>*{animation:mv-recede linear both;animation-timeline:--mv-next;animation-range:entry 0% entry 100%}
.mv-sp section[id$="philosophy"]>*,.mv-sp section[id$="capabilities"]>*:not(div),.mv-sp section[id$="capabilities"]>div>article,.mv-sp section:not([id])>p,.mv-sp section:not([id]) li,.mv-sp section[id$="works"]>*,.mv-sp section[id$="service"]>*,.mv-sp section[id$="people"]>*,.mv-sp section[id$="company"]>*:not(dl),.mv-sp section[id$="company"] dl>*,.mv-sp section[id$="careers"]>*,.mv-sp section[id$="contact"]>div>*,.mv-sp footer>p:first-child{animation:mv-rise-sp cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 55%}
.mv-sp section[id$="philosophy"]>h2+p{animation-range:entry 30% cover 22%}
.mv-sp section[id$="philosophy"]>div{position:relative;border-top-color:transparent!important;animation:none;view-timeline-name:--pr}
.mv-sp section[id$="philosophy"]>div::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(236,234,228,.16);transform-origin:left center;animation:mv-draw cubic-bezier(.4,0,.2,1) both;animation-timeline:--pr;animation-range:cover 5% cover 22%}
.mv-sp section[id$="philosophy"]>div>p:first-child{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:--pr;animation-range:cover 8% cover 22%}
.mv-sp section[id$="philosophy"]>div>p:nth-child(2){animation:mv-in-up cubic-bezier(.2,.7,.2,1) both;animation-timeline:--pr;animation-range:cover 12% cover 27%}
.mv-sp section[id$="philosophy"]>div>p:nth-child(3){animation:mv-in-up cubic-bezier(.2,.7,.2,1) both;animation-timeline:--pr;animation-range:cover 16% cover 32%}
.mv-sp .am-head>*,.mv-sp .am-band,.mv-sp .am-foot>div{animation:mv-rise-sp cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 55%}
.mv-sp .am-fan{animation:am-reveal cubic-bezier(.45,0,.2,1) both;animation-timeline:view();animation-range:entry 30% cover 55%}
.mv-sp .am-pillars>article{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 70%}
.mv-sp section:not([id]) li{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 80%}
.mv-sp section[id$="capabilities"]>div>article,.mv-sp section[id$="works"]>article,.mv-sp section[id$="service"]>article{animation-name:mv-slide-l;animation-range:entry 10% entry 70%}
}
}
/* opening: a point spreads into the first screen */
@keyframes mv-intro-clip{from{clip-path:circle(0px at var(--ix) var(--iy))}to{clip-path:circle(150vmax at var(--ix) var(--iy))}}
@keyframes mv-intro-dot{0%{transform:scale(0);opacity:1}35%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes mv-intro-ring{0%{width:0;height:0;opacity:1}65%{opacity:.85}100%{width:300vmax;height:300vmax;opacity:0}}
@keyframes mv-intro-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
.mv-intro-sp{--ix:360px;--iy:280px;position:relative}
.mv-intro-sp>section[id$="top"]{animation:mv-intro-clip 1.4s cubic-bezier(.7,0,.2,1) .45s backwards}
.mv-intro-sp::before,.mv-intro-sp::after{content:"";position:absolute;left:var(--ix);top:var(--iy);z-index:3;pointer-events:none;border-radius:50%;opacity:0}
.mv-intro-sp::before{width:12px;height:12px;margin:-6px 0 0 -6px;background:#D2F34C;animation:mv-intro-dot 1s cubic-bezier(.2,.7,.2,1) both}
.mv-intro-sp::after{width:0;height:0;border:1.5px solid #D2F34C;translate:-50% -50%;animation:mv-intro-ring 1.4s cubic-bezier(.7,0,.2,1) .45s both}
.mv-intro-sp section[id$="top"]>div:last-of-type>*{animation:mv-intro-rise .9s cubic-bezier(.2,.7,.2,1) both}
.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(1){animation-delay:1.15s}.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(2){animation-delay:1.3s}.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(3){animation-delay:1.45s}.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(4){animation-delay:1.6s}
}

body{margin:0;background:#0C0D0F}
a{color:inherit;text-decoration:none}
a:hover{color:inherit;opacity:.75}
button,input,textarea{font:inherit}
.pm-spin{transform-origin:500px 500px;animation:pm-spin 200s linear infinite}
@keyframes pm-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.pm-field::placeholder{color:#8A887F}
.pm-field:focus{outline:none;border-bottom-color:#ECEAE4}
.pm-chip:focus-within{border-color:#ECEAE4}
.pm-policy summary{list-style:none}
.pm-policy summary::-webkit-details-marker{display:none}
.pm-policy[open] .pm-plus{transform:rotate(45deg)}
.pm-plus{transition:transform .3s ease;display:inline-block}
body{word-break:auto-phrase;overflow-wrap:break-word}
p,dd,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.pb-wave{animation:pb-wave 22s linear infinite}
@keyframes pb-wave{from{transform:translateX(0)}to{transform:translateX(-439.82px)}}
.pb-hop{animation:pb-hop 10s ease-in-out infinite}
@keyframes pb-hop{0%,18%{transform:translate(0,0)}25%,43%{transform:translate(82px,0)}50%,68%{transform:translate(82px,78px)}75%,93%{transform:translate(-164px,78px)}100%{transform:translate(0,0)}}
.pb-flow{stroke-dasharray:5 7;animation:pb-flow 1.4s linear infinite}
@keyframes pb-flow{to{stroke-dashoffset:-24}}
.pb-blink{animation:pb-blink 3.2s ease-in-out infinite}
.pb-blink2{animation:pb-blink 3.2s ease-in-out 1.6s infinite}
@keyframes pb-blink{0%,100%{opacity:1}50%{opacity:.12}}
@media (prefers-reduced-motion: reduce){.pm-spin,.pb-wave,.pb-hop,.pb-flow,.pb-blink,.pb-blink2{animation:none}}
/* motion: sections slide in on scroll */
@keyframes mv-rise-sp{from{opacity:0;transform:translate3d(0,56px,0)}to{opacity:1;transform:none}}
@keyframes mv-recede{to{opacity:.18;transform:scale(.94)}}
@keyframes mv-slide-l{from{opacity:0;transform:translate3d(-56px,0,0)}to{opacity:1;transform:none}}
@keyframes mv-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
.mv-sp section[id$="top"]{position:sticky!important;top:0;z-index:0}
.mv-sp section[id$="top"]~section{position:relative;z-index:1;background-color:#0C0D0F}
.mv-sp section[id$="philosophy"]{border-top:1px solid rgba(236,234,228,.16);border-radius:24px 24px 0 0;box-shadow:0 -20px 48px rgba(0,0,0,.6)}
@supports (animation-timeline: view()){
.mv-sp{timeline-scope:--mv-next}.mv-sp section[id$="philosophy"]{view-timeline-name:--mv-next}.mv-sp section[id$="top"]>*{animation:mv-recede linear both;animation-timeline:--mv-next;animation-range:entry 0% entry 100%}
.mv-sp section[id$="philosophy"]>*,.mv-sp section[id$="capabilities"]>*:not(div),.mv-sp section[id$="capabilities"]>div>article,.mv-sp section:not([id])>p,.mv-sp section:not([id]) li,.mv-sp section[id$="works"]>*,.mv-sp section[id$="service"]>*,.mv-sp section[id$="people"]>*,.mv-sp section[id$="company"]>*:not(dl),.mv-sp section[id$="company"] dl>*,.mv-sp section[id$="careers"]>*,.mv-sp section[id$="contact"]>div>*,.mv-sp footer>p:first-child{animation:mv-rise-sp cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 55%}
.mv-sp section:not([id]) li{animation:mv-slide-l cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 80%}
.mv-sp section[id$="capabilities"]>div>article,.mv-sp section[id$="works"]>article,.mv-sp section[id$="service"]>article{animation-name:mv-slide-l;animation-range:entry 10% entry 70%}
}
}
/* opening: a point spreads into the first screen */
@keyframes mv-intro-clip{from{clip-path:circle(0px at var(--ix) var(--iy))}to{clip-path:circle(150vmax at var(--ix) var(--iy))}}
@keyframes mv-intro-dot{0%{transform:scale(0);opacity:1}35%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes mv-intro-ring{0%{width:0;height:0;opacity:1}65%{opacity:.85}100%{width:300vmax;height:300vmax;opacity:0}}
@keyframes mv-intro-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
.mv-intro-sp{--ix:360px;--iy:280px;position:relative}
.mv-intro-sp>section[id$="top"]{animation:mv-intro-clip 1.4s cubic-bezier(.7,0,.2,1) .45s backwards}
.mv-intro-sp::before,.mv-intro-sp::after{content:"";position:absolute;left:var(--ix);top:var(--iy);z-index:3;pointer-events:none;border-radius:50%;opacity:0}
.mv-intro-sp::before{width:12px;height:12px;margin:-6px 0 0 -6px;background:#D2F34C;animation:mv-intro-dot 1s cubic-bezier(.2,.7,.2,1) both}
.mv-intro-sp::after{width:0;height:0;border:1.5px solid #D2F34C;translate:-50% -50%;animation:mv-intro-ring 1.4s cubic-bezier(.7,0,.2,1) .45s both}
.mv-intro-sp section[id$="top"]>div:last-of-type>*{animation:mv-intro-rise .9s cubic-bezier(.2,.7,.2,1) both}
.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(1){animation-delay:1.15s}.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(2){animation-delay:1.3s}.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(3){animation-delay:1.45s}.mv-intro-sp section[id$="top"]>div:last-of-type>*:nth-child(4){animation-delay:1.6s}
}

body{margin:0;background:#0C0D0F}
a{color:inherit;text-decoration:none}
a:hover{color:inherit;opacity:.75}
button{font:inherit;color:inherit}