/* ARC / kinetic editorial — the approved outlined logo, photographs in motion. */
:root { --motion-ease: cubic-bezier(.19,1,.22,1); }
main { overflow: clip; }
.brand-mark { width: 126px; height: auto; flex: 0 0 auto; }
.brand { gap: 21px; }
.menu-dialog .brand-mark { width: 120px; }
.article-signature .brand-mark { width: 96px; }
.company-mark { width: min(270px,75%); height: auto; margin-top: 58px; }
.footer-logo { width: min(100%,1100px); margin: 75px 0 55px; font-size: initial; line-height: 1; }
.footer-logo img { width: 100%; height: auto; transition: transform .8s var(--motion-ease); }
.footer-logo:hover img { transform: translateX(12px); }

/* Oversized camera movement and three photographic cuts fill the first view. */
.hero-scene { --hero-y: 0px; --hero-scale: 1; --pointer-x: 0px; --pointer-y: 0px; }
.hero-camera { position: absolute; inset: -6%; transform: translate3d(var(--pointer-x),calc(var(--hero-y) + var(--pointer-y)),0) scale(var(--hero-scale)); will-change: transform; }
.hero-camera .hero-photograph { width: 100%; height: 100%; object-fit: cover; object-position: 65% 55%; }
.has-motion .hero-photograph { animation: arc-camera 11s cubic-bezier(.45,0,.25,1) infinite alternate; }
.hero-camera .hero-fragment { background-position: 65% 55%; pointer-events: none; will-change: transform, clip-path; }
.has-motion .hero-fragment { animation: arc-cut-one 8s cubic-bezier(.65,0,.25,1) infinite; }
.has-motion .hero-fragment-two { animation: arc-cut-two 8s cubic-bezier(.65,0,.25,1) .15s infinite; }
.has-motion .hero-fragment-three { animation: arc-cut-three 8s cubic-bezier(.65,0,.25,1) .3s infinite; }
.hero-scene::after { background: linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.1) 65%),linear-gradient(0deg,rgba(0,0,0,.58),transparent 40%); }
.has-motion .hero-shutters span { animation: arc-open 1.4s cubic-bezier(.76,0,.24,1) both; }
.has-motion .hero-shutters span:nth-child(2) { animation-delay: .10s; }
.has-motion .hero-shutters span:nth-child(3) { animation-delay: .20s; }
.hero-editorial h1 .hero-line { overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.hero-editorial h1 .hero-line>span { display: inline-block; color: #fff; }
.hero-editorial h1 .hero-period { color: #ff493d; }
.motion-ready .hero-line>span { animation: arc-title-in 1.3s var(--motion-ease) .30s both; }
.motion-ready .hero-line:nth-child(2)>span { animation-delay: .46s; }
.motion-ready .hero-eyebrow,.motion-ready .hero-description { animation: arc-copy-in 1.1s var(--motion-ease) .85s both; }
.motion-ready .hero-description { animation-delay: 1s; }
.hero-edition { pointer-events: none; }
.motion-toggle { position: relative; z-index: 5; }
.hero.is-offstage .hero-camera * { animation-play-state: paused; }
@keyframes arc-camera { from { transform: scale(1.035) translate3d(1.2%,0,0); } to { transform: scale(1.22) translate3d(-3.5%,-1%,0); } }
@keyframes arc-cut-one {
  0%,7%,100% { clip-path: inset(0 18% 0 66%); transform: translate3d(0,0,0) scale(1.035); opacity: 0; }
  20%,36% { clip-path: inset(0 12% 0 67%); transform: translate3d(-8%,2%,0) scale(1.14); opacity: 1; }
  53%,69% { clip-path: inset(0 32% 0 48%); transform: translate3d(6%,-2%,0) scale(1.21); opacity: .9; }
  89% { clip-path: inset(0 18% 0 66%); transform: translate3d(0,0,0) scale(1.035); opacity: 0; }
}
@keyframes arc-cut-two {
  0%,8%,88%,100% { clip-path: inset(0 51% 0 29%); transform: translate3d(0,0,0) scale(1.04); opacity: 0; }
  23%,39% { clip-path: inset(0 51% 0 29%); transform: translate3d(5%,-3%,0) scale(1.13); opacity: .85; }
  57%,70% { clip-path: inset(0 69% 0 10%); transform: translate3d(-4%,3%,0) scale(1.18); opacity: .75; }
}
@keyframes arc-cut-three {
  0%,9%,85%,100% { clip-path: inset(0 78% 0 0); transform: translate3d(0,0,0) scale(1.04); opacity: 0; }
  25%,39% { clip-path: inset(0 75% 0 0); transform: translate3d(-5%,2%,0) scale(1.2); opacity: .8; }
  59%,70% { clip-path: inset(0 0 0 80%); transform: translate3d(4%,-2%,0) scale(1.1); opacity: .8; }
}
@keyframes arc-open { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-101%,0); } }
@keyframes arc-title-in { from { transform: translate3d(0,110%,0) rotate(3deg); } to { transform: translate3d(0,0,0) rotate(0); } }
@keyframes arc-copy-in { from { opacity: 0; transform: translate3d(0,28px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* WHO WE ARE: two separately revealed lines, a moving photograph and its cut. */
.about { --section-p: .5; }
.statement-title .statement-line { display: block; overflow: hidden; }
.statement-title .statement-line>span { display: inline-block; }
.statement-title .statement-line:nth-child(2) { padding-left: clamp(0px,3vw,42px); }
.motion-ready .statement-line>span { transition: transform 1.25s var(--motion-ease); }
.motion-ready .statement-title:not(.is-visible) .statement-line>span { transform: translate3d(0,110%,0); }
.motion-ready .statement-line:nth-child(2)>span { transition-delay: .13s; }
.about-photo-frame { position: relative; overflow: hidden; aspect-ratio: 1.06; background: #e9e9e9; isolation: isolate; }
.about-photo-frame>img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform: translate3d(0,calc((.5 - var(--section-p)) * 100px),0) scale(1.15); will-change: transform; }
.about-photo-slice { position: absolute; inset: -6%; background: url('/assets/arc-expression.webp') center / cover; clip-path: inset(0 18% 0 57%); transform: translate3d(calc((var(--section-p) - .5) * 120px),calc((.5 - var(--section-p)) * -55px),0) scale(1.09); mix-blend-mode: normal; opacity: .9; will-change: transform; }
.about-photo-wipe { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: right; pointer-events: none; transition: transform 1.1s cubic-bezier(.76,0,.24,1); }
.motion-ready .about-photo:not(.is-visible) .about-photo-wipe { transform: scaleX(1); }
.about-photo figcaption { position: relative; }
.about-photo figcaption::before { content: ''; position: absolute; top: -1px; height: 2px; background: var(--red); width: 28%; transform: translateX(calc(var(--section-p) * 180%)); }
.about-signature { position: relative; }
.about-signature::before { content: ''; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--red); transform: scaleX(var(--section-p)); transform-origin: left; }

/* Carry the same rhythm through services, results, process and journal. */
.motion-ready [data-reveal] { transition: opacity .9s var(--motion-ease),transform 1.05s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translate3d(0,55px,0); }
.motion-ready .service-item[data-reveal]:not(.is-visible) { transform: translate3d(60px,0,0); }
.motion-ready .metric[data-reveal]:not(.is-visible) { transform: translate3d(0,80px,0); }
.section-label { position: relative; }
.section-label::after { content: ''; width: 46px; height: 1px; margin-left: 8px; background: currentColor; opacity: .35; transform-origin: left; transition: transform 1s var(--motion-ease); }
.motion-ready .section-label:not(.is-visible)::after { transform: scaleX(0); }
.service-item { position: relative; overflow: clip; }
.service-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--motion-ease); }
.service-item:hover::before,.service-item:focus-within::before { transform: scaleX(1); }
.service-name h3 { transition: color .3s,translate .6s var(--motion-ease); }
.service-item summary:hover h3 { translate: 9px 0; }
.profile { --section-p: .5; }
.profile-visual { overflow: hidden; }
.profile-visual img { transform: translate3d(0,calc((.5 - var(--section-p)) * 50px),0) scale(1.07); }
.experience { --section-p: .5; background: #111; position: relative; isolation: isolate; overflow: hidden; }
.experience::before { content: ''; position: absolute; z-index: -1; inset: -40%; background: radial-gradient(ellipse at 65% 55%,#692019 0%,#301613 26%,transparent 55%); transform: translate3d(calc((var(--section-p) - .5) * -18%),0,0); }
.metric { position: relative; }
.metric-value { display: inline-block; }
.approach-step { position: relative; }
.approach-step::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--motion-ease) var(--reveal-delay,0ms); }
.approach-step.is-visible::before { transform: scaleX(1); }
.journal-card .cover-title { transition: transform .8s var(--motion-ease); }
.journal-card:hover .cover-title,.journal-card:focus-visible .cover-title { transform: translate3d(6px,-5px,0); }
.contact-intro h2 { display: inline-block; }
.header-contact,.form-action button { transition: color .3s,background .3s,transform .5s var(--motion-ease); }
.header-contact:hover,.form-action button:hover { transform: translateY(-3px); }

@media(max-width:1100px) { .brand-mark { width: 116px; } }
@media(max-width:760px) {
  .brand-mark { width: 91px; } .brand { gap: 0; }
  .company-mark { display: none; }
  .footer-logo { width: 100%; margin: 54px 0 38px; }
  .hero-camera { inset: -5%; }
  .hero-editorial h1 .hero-line { padding-block: .09em; margin-block: -.09em; }
  .hero-camera .hero-fragment-two,.hero-camera .hero-fragment-three { display: none; }
  .has-motion .hero-photograph { animation-name: arc-camera-mobile; }
  .statement-title .statement-line:nth-child(2) { padding-left: 0; }
  .about-photo-frame { aspect-ratio: 1.24; }
  .about-photo-frame>img { aspect-ratio: auto; transform: translate3d(0,calc((.5 - var(--section-p)) * 55px),0) scale(1.13); }
  .about-photo-slice { transform: translate3d(calc((var(--section-p) - .5) * 65px),0,0) scale(1.06); }
  .motion-ready [data-reveal]:not(.is-visible) { transform: translate3d(0,32px,0); }
  .motion-ready .service-item[data-reveal]:not(.is-visible) { transform: translate3d(25px,0,0); }
  .section-label::after { width: 25px; margin-left: 0; }
  .section-label .label-ja { margin-left: auto; }
}
@keyframes arc-camera-mobile { from { transform: scale(1.04) translateX(1%); } to { transform: scale(1.16) translateX(-2%); } }
/* Keep UNDERSTAND. CREATE. GROW. still on every screen size. */
.method-statement,.method-statement span { transform: none; animation: none; transition: none; }
/* The existing motion control now pauses the entire site. */
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation-play-state: paused!important; transition-duration: 0s!important; transition-delay: 0s!important; }
.motion-paused [data-reveal],.motion-paused .statement-line>span,.motion-paused .hero-line>span,.motion-paused .hero-description,.motion-paused .hero-eyebrow { opacity: 1!important; transform: none!important; }
.motion-paused .hero-shutters { display: none; }
.motion-paused .about-photo-wipe { transform: scaleX(0)!important; }
@media(prefers-reduced-motion:reduce) {
  .hero-camera,.hero-photograph,.about-photo-frame>img,.profile-visual img,.method-statement span,.footer-logo img { transform: none!important; }
  .hero-camera { inset: 0; }
  .hero-fragment,.about-photo-slice,.about-photo-wipe,.hero-shutters { display: none!important; }
  [data-reveal],.statement-line>span,.hero-line>span,.hero-eyebrow,.hero-description { opacity: 1!important; transform: none!important; }
  .service-name h3 { translate: none!important; }
  .motion-toggle { display: none!important; }
}