/* Quiet studio lighting carries the cyan material through the page. */
.screen-depth { perspective: 1600px; }
.screen-depth .work-stage {
  transform-origin: 50% 70%;
  transform: rotateX(var(--screen-angle,0deg)) rotateY(var(--screen-turn,0deg)) scale(var(--screen-scale,1));
  box-shadow: 0 25px 65px #0005;
  border: 1px solid #8ed5e529;
  will-change: transform;
}
.screen-depth .work-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg,transparent 28%,#d9faff 52%,transparent 70%); opacity: var(--screen-gloss,0); }
.kusabi-logo { position: relative; }
.kusabi-model { position: absolute; top: -16px; width: 290px; max-width: 120%; aspect-ratio: 1.25; pointer-events: none; }
.kusabi-logo.model-ready svg { opacity: 0; }
.contact { position: relative; isolation: isolate; overflow: hidden; }
.contact > .wrap { position: relative; z-index: 1; }
.contact-orb { position: absolute; width: clamp(230px,27vw,430px); aspect-ratio: 1; right: -5%; top: -6%; pointer-events: none; opacity: .62; z-index: 0; }
@media(max-width:800px) { .kusabi-model { width: 245px; } .contact-orb { right: -100px; top: 50px; opacity: .45; } }
@media(max-width:520px) { .kusabi-model { width: 165px; top: -11px; } .screen-depth .work-stage { transform: none; } }
@media(prefers-reduced-motion:reduce) { .screen-depth .work-stage { transform: none; will-change: auto; } .screen-depth .work-stage::after { display: none; } }
:root { --latin: 'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif; }
body { font-kerning: normal; -webkit-font-smoothing: antialiased; }
.logo { font-family: 'Barlow','Noto Sans JP',sans-serif; }
.latin-title, .section-intro h2.latin-title { font-weight: 500; letter-spacing: -.065em; }
.hero-english { font-size: clamp(23px,2.18vw,34px); font-weight: 500; letter-spacing: -.045em; }
.hero h1 { font-weight: 400; letter-spacing: .095em; }
.service-text strong { font-size: clamp(22px,2.15vw,31px); letter-spacing: -.04em; }
.eyebrow,.hero-location,.hero-side-label,.frame-label { font-family: 'Barlow','Noto Sans JP',sans-serif; letter-spacing: .16em; }
.proof-number strong { font-variant-numeric: tabular-nums; letter-spacing: -.065em; }
.outline-button,.solid-button { position: relative; isolation: isolate; overflow: hidden; transition: border-color .35s,background .35s,color .35s,box-shadow .35s,transform .2s; }
.outline-button::before,.solid-button::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--button-x,50%) var(--button-y,50%),#69e6ff35,transparent 70%); transition: opacity .35s; }
.outline-button::after,.solid-button::after { content: ''; position: absolute; inset: -50%; pointer-events: none; background: linear-gradient(105deg,transparent 42%,#d6faff38 50%,transparent 58%); transform: translateX(-80%); transition: transform .85s cubic-bezier(.18,.65,.25,1); }
.outline-button:hover::before,.outline-button:focus-visible::before,.solid-button:hover::before { opacity: 1; }
.outline-button:hover::after,.solid-button:hover::after { transform: translateX(80%); }
.outline-button:hover { box-shadow: 0 0 25px #20d5f00d,inset 0 0 20px #20d5f008; }
.solid-button:hover { box-shadow: 0 7px 30px #20d5f025; }
.outline-button:active,.solid-button:active { transform: translateY(1px); box-shadow: inset 0 3px 12px #0002; }
button:focus-visible,a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.menu-button { transition: background .3s,box-shadow .3s; }
.menu-button:hover { background: #9df2ff; box-shadow: 0 0 25px #23d3ee35; }
.hero-link .round-link { transition: color .4s,border-color .4s,box-shadow .4s; }
.hero-link:hover .round-link { color: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 0 20px #23d3ee16,0 0 24px #23d3ee13; }
.hero-link:hover svg { transform: translateX(3px); }
.hero-link svg { transition: transform .4s; }
.kusabi-logo { width: min(460px,100%); min-height: 170px; justify-content: center; }
.kusabi-official-logo { width: 95%; height: auto; filter: invert(1); opacity: .92; }
.kusabi-model { width: 100%; max-width: 100%; height: 155px; aspect-ratio: auto; top: -6px; }
.kusabi-logo.model-ready .kusabi-official-logo { visibility: hidden; }
.kusabi-logo > .kusabi-logo-caption { font: 500 11px/1.6 var(--ui); letter-spacing: .19em; margin: 28px 0 0; color: #8fa5ae; }
.kusabi-film { margin-top: 38px; margin-bottom: 44px; }
.kusabi-film-button { display: block; position: relative; width: 100%; aspect-ratio: 2.25; overflow: hidden; border: 1px solid #9cdde22b; background: #071218; text-align: left; }
.kusabi-film-button video { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .5s,transform 1.2s cubic-bezier(.2,.65,.2,1); }
.kusabi-film-button:hover video { opacity: 1; transform: scale(1.015); }
.kusabi-film-caption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 24px; padding: 60px 27px 22px; background: linear-gradient(transparent,#061016d9); font: 500 12px/1.5 var(--ui); letter-spacing: .13em; }
.kusabi-film-motion { display: block; margin: 10px 0 0 auto; min-height: 44px; background: none; color: #b4c6ce; font: 400 12px/1.5 var(--ui); }
.kusabi-film-motion[hidden] { display: none; }
.kusabi-dialog-film video { width: 100%; max-height: 72svh; background: #03090c; display: block; }
@media(max-width:800px) { .kusabi-logo { min-height: 120px; } .kusabi-model { height: 110px; top: -4px; } .hero-english { font-size: 25px; } }
@media(max-width:520px) { .hero-english { font-size: 22px; letter-spacing: -.035em; } .hero h1 { letter-spacing: .075em; } .kusabi-logo { width: 100%; max-width: 310px; min-height: 116px; } .kusabi-model { height: 110px; } .kusabi-film-button { aspect-ratio: 1.35; } .kusabi-film-caption { padding: 45px 15px 15px; font-size: 10px; gap: 14px; } .service-text strong { font-size: 25px; } }
@media(prefers-reduced-motion:reduce) { .outline-button::after,.solid-button::after { display:none; } .outline-button,.solid-button,.menu-button,.hero-link svg,.kusabi-film-button video { transition:none; } .kusabi-film-button:hover video { transform:none; } }
@media(max-width:520px) { .service-intro h3 > span { display: block; } .service-intro h3 { font-size: 25px; line-height: 1.65; } }
.mobile-line { display: none; }
@media(max-width:520px) { .mobile-line { display: initial; } }